Having trouble displaying image from file collection.

[Paul Ladley]

So far we have followed the tutorial http://devcenter.appery.io/tutorials/... and have successfully uploaded an image. Unfortunately we are struggling to display it in our app.

We have tried grabbing the fileurl from the Success event of the upload service (i.e. data.fileurl) but this doesn't seem to have a value. We had planned to store this value in local storage, then map this to a collection on the create service. We got this idea from https://getsatisfaction.com/apperyio/...

Ultimately, we will display an image mapped to the url field in the collection in a collapsible set using the list service.

Are we going about this the right way? What might we have done wrong?

[Maryna Brodina]

Hello!

Could you check if there are any errors in console?

[Paul Ladley]

We placed alerts and console logs to check the value of data.fileurl and data.filename in the Success event of the upload service but it returned undefined for both of them.

[Yurii Orishchuk]

Hi Paul.

I've tested the same code and it's ok.

Please verify if you have the same file create service settings. http://prntscr.com/3lfli2/direct

Here is a code to test it: http://prntscr.com/3lflwo/direct

precode

console.log("data.fileurl = " + data.fileurl);
console.log("data.filename = " + data.filename);

/code/pre

And here is a result http://prntscr.com/3lfm3w/direct

So if you can not figure out what is wrong in your app after all - please give us your public link. And tell us steps to test.

Regards.

[Paul Ladley]

Hi Yurii,

We are still having issues, I'm afraid.

We rebuilt the file upload code:

1. Using an Upload service (as described in the file upload tutorial) we can upload a file but the console.log shows data.fileurl = undefined in the success event.

2. We have tried doing it with a Create service instead of Upload as per your suggestion above and the Console reports: "This data source not be supported in the method of upload multiple files". This is not our console log error, it is generated from databaseUtils.js:27.

   Could you have a look at what is going wrong, please?

   http://appery.io/app/mobile-frame?src...

   Steps to recreate:

3. Log in (username: Ben, password: b)

4. Use the navbar and click Jobs

5. Click Choose Files, then press Upload.

   The Upload or Create services are called on an event on the Upload button - with one or the other service commented out.

   Cheers,

   Paul

[Yurii Orishchuk]

Hi Paul.

I've looked on your app and here is a solution for you:

1 Set "upload" service instead of "create".

2 For "success" event on your "upload" service use following JS code:

precode

alert("Your file was successfully uploaded");
console.log("data[0].success.fileurl = " + data[0].success.fileurl);
console.log("data[0].success.filename = " + data[0].success.filename);
localStorage.setItem("db_file_url", data[0].success.fileurl);

/code/pre

That's all.

Regards.

[Paul Ladley]

Hi Yurii,

Thanks a lot.

I should have realised it was something like that as data returned [Object][Object].

Out of interest, could you explain why it is data[0].success.fileurl as opposed to data.fileurl? Is it something specific to my code or is it more general difference in what Create and Upload services return?

Once again, thanks.

Paul

[Kateryna Grynko]

Hi Paul,

Object 'data' is an array of 'success' objects (with parameters 'filename', 'fileurl') or 'error' (with parameters 'code' and 'description'), so you should access them as Yurii advises.