Efficiently view/manipulate local images in memory before uploading?

UI Builder
1

Hi,

I have this scenario which I am working on.

User wants to select an image from the local desktop computer or phone to be attached to a record (profile pic, team logo etc). Basic sample screen is below.

image
image802×832 110 KB

Currently I am using:

  1. Image Component - display the image
  2. Icon component - clicking “X” allows the user to revert to a “default image”
  3. File Uploader Button component - “Select file”, displays the client file open dialog box
  4. Text box - “Some text to store in the database alongside the image”
  5. Save Button - after the user is happy with the local image selected save the image URL and text to the database
  6. Delete Button - not relevant for this topic but removes the record from the database

The FileUploader Button and the Image component all work on URL’s which I have pointed to Backendless file storage. But it means all file open/view requests need the image/file to be stored in file storage to then view them in the app. This means (I think) that to display a users selected files/images in a UI Builder app you have to:

  1. Upload the files to a temporary location in Backendless storage until the user selects the right image.
  2. Remove the temporary file(s) if the user decides to not save the current image in the Database record.
  3. When the user eventually clicks “Save” then link the uploaded file URL to the saved record in the database.

It works. But I don’t think its efficient and the round trip to upload the file and then display it in the image viewer takes 2-3 seconds which is a bit slow.

If there is a more efficient way to already do what I have described above without JS components I would really like to know.

Few suggestions?

  1. Can we just have a UI Component that displays the “client file open dialog box” and returns the file/files selected? Or modify the FileUploader Button with an option to just return the selected file(s) and not continue to the upload. In this case it might be better to call the “FileUploader Button” “OpenFiles Button”.
  2. Can the image viewer component be modified to also display in memory file/image objects not just URLs?
  3. Maybe the best flexibility is to have all the “File Uploader Button” functionality split into a number of Codeless blocks which will enable the developer to put together a sequence of no code blocks and UI components that support the file operations (select/view/upload) that best meet the application use case.

Again thank you for a great product and your excellent support.

Glenn

2

Hello @Glenn_D

I found a way to get the file without uploading it to the database. But I did not find how to display it.
Now it is impossible to do this without using custom code. I think this is a valid case and we in the team should discuss this case. I’ve created an internal ticket BKNDLSS-30283 to discuss it. Thx

Regards

1 Like
3

Hi @Glenn_D,

We’ve just updated cloud servers with a fix for the issue you described above. To the “File Uploader Button” added:

  • Added trait - Process Upload in Logic, which allows you not to send files directly to the server, but to do it using an action.
  • Added Action “Upload Selected Files” for manually sending selected files to the server.
  • Added Handler to manage selected files with context - “on Select Files. To display files (Previews) in the Image component, we have a built-in method “Read file as” which converts File to base64, this is the Source URL for the Image component.

Regards,
Bohdan