Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Step-by-step instruction would be much appreciated!

I have already reviewed the documentation and photo tutorial but it doesn't seem to work. I am also creating this app as a webapp and I don't think I can have the user take a photo since I'm doing it this way. That is why I want to give the user the opportunity to upload a photo and have that displayed in the image view on the page.

Thank you!

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

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

Hi Stefan.

Please follow these steps:

1 Add HTML component on the page. And populate it with following code: http://prntscr.com/3p4f65/direct

precode

<form enctype="multipart/form-data" method="post" name="fileinfo" style="visibility:hidden">
<fieldset>
<input type ="file" name ="fileselect" id="fileselect">
</fieldset>
</form>
<script type="text/javascript">
&#47;&#47; set event listener for call preview after select file
var fileselect = $('#fileselect');
fileselect&#46;bind("change", fileSelectHandler);
</script>

/code/pre

2 Add Button with text "Choose file".

3 Add JS event handler on "click" event to this button. Populate with following code:

precode

$('#fileselect')&#46;trigger('click');

/code/pre

4 Add new JS asset and populate it with following code: http://prntscr.com/3p4ji1/direct

precode

var file;

function fileSelectHandler(e) {
var files = e&#46;target&#46;files || e&#46;dataTransfer&#46;files;
file = files[0];
previewFile();
}

function previewFile() {

Code: Select all

 var previewContainer = $('table[dsid=preview]'); 
 var fileName = $('[name=fileName]'); 
 var fileContentType = $('[name=fileContentType]'); 
 &#47;&#47; make the preview container visible once a file was selected 
 previewContainer&#46;toggle(); 

 &#47;&#47; set the file name 
 fileName&#46;text(file&#46;name); 
 fileContentType&#46;text(file&#46;type); 

 var reader = new FileReader(); 
 reader&#46;onloadend = function(e) { 
     var fileDataUrl = e&#46;target&#46;result; 

     localStorage&#46;setItem("fileDataUrl", fileDataUrl); 
 }; 
 &#47;&#47;reader&#46;readAsText(file); 
 &#47;&#47;reader&#46;readAsBinaryString(file); 
 &#47;&#47;reader&#46;readAsArrayBuffer(file); 
 reader&#46;readAsDataURL(file); 

}

/code/pre

5 Then you can access file raw source with following code:

precode

&#47;&#47;Set file to image component
Apperyio("imgcomponentName")&#46;attr("src", localStorage&#46;getItem("fileDataUrl"));

&#47;&#47;Log out to console file content
console&#46;log(localStorage&#46;getItem("fileDataUrl"));

/code/pre

So you have file source in the "fileDataUrl" LSV. From this time you can store it in DB. Or assign to image component as shown in prep step.

That's all.

Regards.

Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Thank you so much. I was following until the last step. Where exactly do I put that code and how would I assign it to the image component and store that in the database?

Thanks again!

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

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

Stefan,

It depends on logic of your app.

To store this raw image into DB you need:

1 Create "photo" column in collection with type "string".

2 Create DB create/update service.

3 Add datasource for this service on the page.

4 Navigate to "edit mapping". Find "photo" request parameter and click "AddJS".

5 Populate editor with following code: http://prntscr.com/3p6k7u/direct

precode

return localStorage&#46;getItem("fileDataUrl");

/code/pre

These steps will save your photo to your DB collumn.

To restore photo into image component - just mapp it from "photo" response parameter to "asset" attribute of image component.

See details http://prntscr.com/3p6kci/direct

Regards

Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Great thank you! For some reason when I go to add the create or upload service to the page the "photo" response parameter is not there and the whole response tab is blank. I've tried to go through different services and add in the parameter myself but nothing seem to allow me to show the taken photo in the image component.

Any ideas? Thank you!

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

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

Hi Stefan.

Here are instructions to add "photo" column to existing collection.

1 Open DB collection you need.

2 Create new collumn in collection and call it "photo".

http://prntscr.com/3phcua/direct

http://prntscr.com/3phcxn/direct

3 Open app builder and create new DB servrice. http://prntscr.com/3phd8q/direct

4 Select your DB, and your collection, and check "update" service. http://prntscr.com/3phdni/direct

5 Add this "update" service to the page. http://prntscr.com/3phegy/direct

6 After you will get service with "photo" request parameter. http://prntscr.com/3pheu2/direct

Also if you have some problems please provide us screen shots of your services and other things that could help us to understand your problem.

Regards.

Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Great! I got through your previous steps no problem but I am still unable to find the photo component in the "Response" tab. I attached screenshots as well.

DB
Image

Request Tab of DB service
Image

Response Tab of DB service (connecting _updatedAt to Asset does not display image in image component)
Image

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

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

Stefan.

You look in response tab for wrong service. You need "list/read/query" instead of "create/update".

Thus please add "list/read/query" service in accordance what you need and then map it to the components(labels for the name and image for the "photo").

http://prntscr.com/3phop3/direct

Regards.

Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Ok I added the three services and connected the photo component to the image components asset. However, "photo" is no longer in the request tab and the photo that is taken on the device is not stored in the database under User Info. What ight I be missing here? Apologies for my confusion as I am still very new to Appery. Thank you!

Image

Stefan Zier
Posts: 0
Joined: Sun Jun 01, 2014 7:22 pm

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

Hi again Yurii,

I believe I have followed your steps correctly and have also used the right service. I am unsure why this is not being stored in the database and the image component is not reflecting the image taken by the user...

I have reviewed the documentation throughout this morning but didn't find what seems to solve my problem.

Any help you can provide?

Thank you so much!

Return to “Issues”