Forum | Appery.io

I am uploading an image to the files collection

and after it is uploaded, I wish the page to refresh showing the uploaded image. I have the following js:

preconsole.log('data[0] = ',data[0]);
console.log('image filename = ',data[0].success.filename);
//set image on page
Apperyio('news_image').val(data[0].success.fileurl);
console.log('news_image = ',Apperyio('news_image').val());
//save filename to storage
Apperyio.storage.news.update("$['newsImageName']", data[0].success.filename); /pre

What i wish to know is The line:
codeApperyio('news_image').val(data[0].success.fileurl);/code

Is val the correct method for updating the image url and if so how can I refresh the page to show the changes?

Hello Terry,

Unfortunately, you need to specify url to the image instead of name
Here is a curl rule to generate url to your image file uploaded to DB.
curl -X GET \
https://api.appery.io/rest/1/db/files...\
[?][encoded="base64"][&][sessionToken=]\
[&][masterKey=]

But if you had your url generated, then you will not being able to set it right,cause once you triggered Success event for Create file service your data object has different structure:
data.filename

The output from my console shows that both the image name AND the image url are passed in the success event via the data object array:

predata[0] = Object {success: Object}success: Object
filename: "9c3e520b-8d03-4bf9-b3c5-d67d7566ba3a.ebay.png"
fileurl: "https://api.appery.io/rest/1/db/files/5422ac3ee4b0b7fdcc760e31/9c3e520b-8d03-4bf9-b3c5-d67d7566ba3a.ebay.png"
proto: Object
proto: Object

image filename = 9c3e520b-8d03-4bf9-b3c5-d67d7566ba3a.ebay.png
news_image = https://api.appery.io/rest/1/db/files/5422ac3ee4b0b7fdcc760e31/9c3e520b-8d03-4bf9-b3c5-d67d7566ba3a.ebay.png/pre

since I have the url, then surely all I need to do is assign it to my image component with something like:

pre//set image on page
Apperyio('news_image').val(data[0].success.fileurl);
console.log('news_image = ',Apperyio('news_image').val());/pre

which is what I have done, but the image is not being shown.

I am beginning to think that '.val()' is wrong after studying the source.

I suspect I need to access the .src property, so I tried this...

pre//success data
console.log('data[0] = ',data[0]);

//filename & url
console.log('image filename = ',data[0].success.filename);
console.log('image URL = ', data[0].success.fileurl);

//fileurl
$("img[name='news_image']").src = data[0].success.fileurl;
console.log('news_image = ', $("img[name='news_image']").src);/pre

Unfortunately, this doesn't work either

FYO: the source looks like this:

pre <!-- news_image -->
< id="CreateNewsItem_news_image"
dsid="news_image" name="news_image" />
/pre

fixed it. the solution is as follows:

pre&#47;&#47;fileurl
$("img[name='news_image']")&#46;attr('src', data[0]&#46;success&#46;fileurl);
console&#46;log('news_image = ', $("img[name='news_image']")&#46;attr('src'));
/pre

Great! Thank you for getting back.

Thanks for posting this. I need to set an image in my app based a url created by my app. Can you tell me the syntax to simply set the image resource to a URL (not hosted by appery)?