How to display uploaded file in files_DB in app

[R2R]

This is a bit challenging for me, and I can't find a tutorial to help me accomplish this. I've created a file upload screen in my app and have successfully uploaded a file (an image) to my database's built-in collection "Files" (see screenshot below).

I'd like to display this image in the image asset component on another page in the app. I was trying the follow the same model as displaying chat messages in the app, but there is no list service option for the "Files" collection. Would I use the Read service instead? And Create service? Can someone walk me through the steps?

Thank you.

"Files" built-in collection with 1 image uploaded:

Available REST services for "Files" collection:

Where I'd like to display the image from the "Files" collection for the user that uploaded the image. The image would also need to be replaced/updated, not added, each time a different file is uploaded.

[Kateryna Grynko]

Hi,

You would need to specify a link to this file in Database, in image 'src' attribute as follows: http://devcenter.appery.io/documentat...

[R2R]

Hi Katya, this sounds like an easy solution to implement, but I have no idea where an how to add this image link.

Does it need to be added to the actual page in the app where I want the image to display, for example:

Page onShow Run Javascript (and include the GET link)?

What would the js look like and will the app automatically populate the parameters required in the link (e.g. databaseID, sessionToken, etc.)?

[R2R]

By the way, I don't want to download the file from the database. I just want to display the image in the image placeholder in the app's page. I hope this helps clarify what I'm trying to do.

[R2R]

I seem to be getting closer, but the image is still not displaying. The placeholder has changed though. I've added an event on the page that contains the imagePlaceholder.

Page onPageShow set HTML attribute
Component name: imagePlaceholder
Property name: src
Value: /[fileName]?sessionToken=[userSessionToken]&masterKey=[masterKey]]https://api.appery.io/rest/1/db/files...

Here's an image of the app page now:

[Evgene Karachevtsev]

Hello,

You need to specify the parameters [databaseID]/[fileName] explicitly. I.e. specify dbid and fileName from DB.

[R2R]

Hi Evgene,

I don't know what the file name is because I'm not the one uploading the image. Each user will upload an image and that image will be displayed next to their chat messages. I can add the databaseID, but each fileName will be unique based on what each user uploads. Somehow the imagePlaceholder needs to check against the owner of the image in the Files collection and display the uploaded image for that owner in the imagePlaceholder. Does this make more sense?

[Yurii Orishchuk]

Hi R2R,

As i told you before there is no way to get images from collection as list request.

But there is a brief plan for you:

1 User upload image. Upload service will return "fileName".

2 App get this "fileName" and store it to the "chat" collection item in "fileName" field.

3 To display images in chat list - you need to use "chat" collection "list/query" service.

4 Each "chat" collection item will have "fileName" field(that's stores exactly the same what user uploaded on create message usecase).

5 So you need to link each "fileName" response field to the image component inside chat item component.

6 To display this image correctly you need to use "Add JS" to this(from 5step) link and populate it with following code:

pre

//Note you need to replace "[databaseID]" with your db id.
return "https://api.appery.io/rest/1/db/files/[databaseID]/" + value;

/pre

Regards.

[R2R]

Hello Yurii,

This is how I imagined the solution to be, and I will need some help creating all the components/code. I'll attempt each step on my own and see how far I can get, but I'm sure I'll need your help along the way. Stay tuned...

Thanks,
Artur

[R2R]

Hello,

I'm working on the first two items in the process you outlined above. Here are my comments issues at each step. I'd like to create a tutorial of this, but I first need to make sure that this is working:

1 User upload image. Upload service will return "fileName".

The built-in Files collection in my DB stores each file that I upload. Since the fileUploadService does NOT allow Update or List services, I created a separate collection called LSVideoZone_ProfilePics_Collection and added a column "fileName". How do I store the value from the Files collection column "Original File Name" in the LSVideoZone_ProfilePics_Collection "fileName" column? (See the following image)

2 App get this "fileName" and store it to the "chat" collection item in "fileName" field.

On the same screen where I upload a file, I bind the file_input component to a local storage variable - varFileName. I added three services to the LSVideo_Zone_ProfilePics_Collection - they are svc_AddProfilePic, svc_UpdateProfilePic, and svc_ReadProfilePic. The svc_AddProfilePic works fine by adding the name of the file to the collection, but there are two issues here:

a) If the currentUserID matches what's in the collection, I want the fileName entry to be UPDATED not CREATED again.

b) I only want the filename in the fileName column, NOT the entire path (see image below.

Thank you and have a great weekend!