How can I have the user upload their own photo and have that photo stored on the database so that each user can have his

[Yurii Orishchuk]

Hi Stefan.

I need to look at your app to understand what is working and what is not.

Please give us your app public link and then describe steps how to reproduce issue you currently have.

Thanks & regards.

[Stefan Zier]

Thanks Yurii. I provided the link and steps on the Bio post.

[Maryna Brodina]

Tnak you!

We will update here https://getsatisfaction.com/apperyio/...

[Yurii Orishchuk]

Hi Stefan.

At first in your sign up page you need to make next modifications(assign your sustem user to User_info row):

1 add to your "Users" system collection new field with name "userInfoId" type string. http://prntscr.com/3q12g8/direct

2 On signUp click - you need to create item in "User_info" collection with empty or default values. This create service return "_id" store this id in "currentUserInfoId" LSV.

3 Open your signUp service. Navigate to request tab and add "userInfoId" parameter. http://prntscr.com/3q0tvi/direct

4 Open signUp datasource and click "Edit mapping". Add new mapping from LSV "currentUserInfoId" to "userInfoId" request parameter. http://prntscr.com/3q0w44/direct

5 Then on success even on create service invoke signUP service.

So after these steps you will get new empty ROW in your "User_info" collection and new row in system User collection with correct filled "userInfoId" field.

Please don't go ahead until you get this work.

After you have these new two rows in your DB you need to do following steps(to update photo):

1 Open your "Account" page.

2 Navigate to "Data" page.

3 Find datasource for "User_Info_update_service" and click "Edit Mapping".

4 Open "Request" tab and find "photo" request parameter. Click on "Add JS". And populate it with following code:

precode

return localStorage.getItem("fileDataUrl");

/code/pre

5 Find "_id" parameter. Click on "Add JS" button and populate it with following code:

precode

return localStorage.getItem("currentUserInfoId");

/code/pre

5 Open your JavaScript1 file and populate it with following code:

precode

var file;
function fileSelectHandler(e) {
var files = e.target.files || e.dataTransfer.files;
file = files[0];
previewFile();
}
function previewFile() {
var previewContainer = $('table[dsid=preview]');
var fileName = $('[name=fileName]');
var fileContentType = $('[name=fileContentType]');
// make the preview container visible once a file was selected
previewContainer.toggle();
// set the file name
fileName.text(file.name);
fileContentType.text(file.type);
var reader = new FileReader();
reader.onloadend = function(e) {
var fileDataUrl = e.target.result;
localStorage.setItem("fileDataUrl", fileDataUrl);

Code: Select all

     //Set current avatar to the image component 
     Apperyio("profile_pic").attr("src", fileDataUrl); 

     //It will invoke your "restservice4" dataSource of "User_Info_update_service" service. 
     restservice4.execute();         
 }; 
 //reader.readAsText(file); 
 //reader.readAsBinaryString(file); 
 //reader.readAsArrayBuffer(file); 
 reader.readAsDataURL(file); 

}

/code/pre

After these steps you will update your "photo" collumn in current user row.

Regards.

[Stefan Zier]

Hi Yurii. I have responded on the post about the "bio" because I have been unable to save the photo to the DB so I'm sure that the method used to save the "bio" to the DB can be used for the photo, however I am confused as to what action to take.

Thanks again!

[Yurii Orishchuk]

Hi Stefan.

Ok, i will look at that topic(about bio).

Regards.

[Matthew Huang]

I finally find this post!
Thanks again for providing such details to the question!
I hope I can see more post replies like this one which actually gives a full solution to a common question.

[Kateryna Grynko]

Hi Matthew,

Could you please tell us what you already have and what is still needed? What did you try and what is not working?

[Matthew Huang]

Dear Kateryna,

Using the code from this post, I can upload image to web app DB from desktop.
But when I try to upload image from phone to web app DB, only small image file can be uploaded successfully. Therefore, I need to resize the image before uploading.

To be more specific, referring to the following code, after I get "fileDataUrl"
( var fileDataUrl = e.target.result; ) ,

how do I resize it before saving it as local storage variable?

function previewFile() {
var previewContainer = $('table[dsid=preview]');
var fileName = $('[name=fileName]');
var fileContentType = $('[name=fileContentType]');
// make the preview container visible once a file was selected
previewContainer.toggle();
// set the file name
fileName.text(file.name);
fileContentType.text(file.type);
var reader = new FileReader();
reader.onloadend = function(e) {
var fileDataUrl = e.target.result;
localStorage.setItem("fileDataUrl", fileDataUrl);
//Set current avatar to the image component
Apperyio("profile_pic").attr("src", fileDataUrl);
//It will invoke your "restservice4" dataSource of "User_Info_update_service" service.
restservice4.execute();
};
//reader.readAsText(file);
//reader.readAsBinaryString(file);
//reader.readAsArrayBuffer(file);
reader.readAsDataURL(file);
}

[Yurii Orishchuk]

Hi Matthew,

Please give us your app public link and describe full steps to reproduce the problem you have.

Thanks & regards.