How can I have a user upload their own "Bio" and have that stored in the database?

[Stefan Zier]

Can someone please provide me with a step-by-step instruction on how to do this?

Any help would be appreciated!

Thank you!

[Stefan Zier]

I'd also like the user to be able to update the Bio from the app.

[Yurii Orishchuk]

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]'); 
 // 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); 
 }; 
 //reader.readAsText(file); 
 //reader.readAsBinaryString(file); 
 //reader.readAsArrayBuffer(file); 
 reader.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]

Thanks again for the help. I'm sorry I should have been more clear.

I would like the user to be able to do this:

1) click the "update" button above "Bio"

2) Have a pop-up window appear that allows the user to enter their new Bio information

3) User clicks the "Update Bio" button in the pop-up

4) Pop-up goes away, the users "Bio" section reflects what they typed in, and their "bio" information is stored to the database.

[Yurii Orishchuk]

Stefan.

You described in details this processing.

So i guess there is no problem to implement it.

Did you tried some so far?

Please try to start if you don't done it before and tell us if you have any problem/question. We will help.

Thanks and regards.

[Stefan Zier]

I have tried to do this multiple times but can not get the user entered data to replace the label under the "bio" label. Any ideas as to how I might do this and the store it into the database?

Thank you so much!

[Stefan Zier]

Hi Yurii, So I have created a pop-up window that stores the entered information to a variable called "bioentry"

I have also created a new column in the DB called "Bio"

Now that I have this, I then used the DB User_Info_Update_Service and assigned named it to "BioUpdate"

So where do I go from here? I cannot seem to find a way to assign the "bioentry" to the label while having it stored in the DB. Can you please help me with this? Thank you so much!

[Stefan Zier]

UPDATE:

I have had the "Update" button above the "Bio" label invoke restservice1

Then when restservice1 is successful it runs the following JS code..

I have also connected the "Bio" component to the "bioentry" label to display the user inputted text.

HOWEVER this does not work and the label shows "undefined" after the user submits text through the pop-up window

Any ideas why?

[Stefan Zier]

Hi Yurii,

I am still stuck here and would appreciate if you could help me because no matter what changes I make or service I use, I cannot seem to save the user entered data to the DB collection and have the label reflect what was entered into to the prompt.

Thank you again!

[Yurii Orishchuk]

Hi Stefan.

Please provide us your app public link.

And describe whole use case how you want it to work.

I will provide you instructions how to get it work after.

Thanks.