I am uploading an image to the files collection

Thu Mar 26, 2015 3:30 pm

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?

Thu Mar 26, 2015 9:52 pm

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

Fri Mar 27, 2015 9:35 am

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.

Fri Mar 27, 2015 10:30 am

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 
< id="CreateNewsItem_news_image"
dsid="news_image" name="news_image" />
/pre

Fri Mar 27, 2015 11:26 am

fixed it. the solution is as follows:

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

Fri Mar 27, 2015 12:34 pm

Great! Thank you for getting back.

Sat May 02, 2015 11:29 am

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)?