Show picture on click event

[Donovan_Hardwick]

Good Day,

I have very limited knowledge on saving and retrieving images so I am struggling with this so I hope you can assist me. I am struggling to achieve the following steps…

What I want to do:

1. The user will click on the “file uploader button” component to save images to his own profile.
2. The images will then be shown in a repeating table after file is saved.
3. When the image is clicked on it should be show in a second (enlarged) image component.

Kindly see a example of this…

Kind Regards

[mark-piller]

Hello,

Which part are you struggling with? There are multiple tasks here and it would help to break it down into smaller tasks and focus on them one by one.

Mark

[Donovan_Hardwick]

Good Day @mark-piller

My apologies for the delayed reply. So yes I need help with the whole lot. The photos will be linked to vehicle’s invoice profile, the user will be able to create or update a new invoice. I have added some basic steps below that I would like to do.

Create Invoice

1. Add picture from file.
2. Save picture to backendless files.
3. Link picture to invoice.
4. Display photos in repeating table with photo component.
5. Display photo in full screen photo component when the photo in the repeating table is clicked.

If the delete button is clicked then the photo must be deleted from the file.

Update Invoice

1. Retrieve pictures linked to current invoice.
2. Display photos in repeating table with photo component.

I would like guidance on if I should create a file in backedless for each invoice created with photos, if yes what would the logic be for this? If no then how will i group or link photos for each invoice.

Kind Regards
Donovan

[Nikita_Fedorishchev]

Hello, @Donovan_Hardwick.

First of all, I would like to know, have you read our course on YouTube?
We also have documentation.
These resources will answer most of your questions.

YouTube Backendless
Docs Backendless

Best Regards, Nikita.

[mark-piller]

Let’s break it down:

Create Invoice

1. Add picture from file.

Use the File Uploader Button:

2. Save picture to backendless files.

The component shows above does it automatically:

3. Link picture to invoice.

When a picture is uploaded, the following event handler is called. In that event handler you add the logic to link the uploaded file with an invoice.

4. Display photos in repeating table with photo component.

What is photo component?
Perhaps this documentation might be helpful: Repeaters - Backendless UI Builder Developer Guide

5. Display photo in full screen photo component when the photo in the repeating table is clicked.
   For this you need to have a separate block that has CSS that renders it full screen. The block will have image component stretched 100%. When the picture is clicked, you make the block visible and assign the picture URL to the image component inside of the block.

If the delete button is clicked then the photo must be deleted from the file.
Here is the block that deletes a file:

Hope this helps.

Mark

[Donovan_Hardwick]

Thank you @mark-piller

I have added the following details to the File Uploader button.

When trying to upload a file I receive the following error:

But my images/jobcards file is empty and remains empty ofter the error accrues.

When trying to upload a completely different image I get the following errors:

The second fault is related to resetting the file uploader on the “upload failure” logic, it is strange to me because when the first upload failed the button reset as expected but when uploading the second image the fault appears.

With regards to the expanding of the image and deleting I have done the following logic, unfortunately I am unable to test to see if the logic works…

Expand image - I have added a second image component (Full width) outside the repeating table and then use the following logic to set “fullViewPhoto” into Source URL Logic of the second image component.

Delete image/file - I am using the following logic to delete the file when the delete button is clicked.

Kind Regards
Donovan

[mark-piller]

Let’s focus on one problem at a time starting with the image upload.

Could you create a page that contains just file uploader button and see if we can get it working?

[Donovan_Hardwick]

@mark-piller

Application ID: 56447795-182A-D679-FF9E-05029343F800
Page: testPage

Email: demo@demo.com
Password: 12345

[Donovan_Hardwick]

Hi @mark-piller

Any feedback on this?

Kind Regards
Donovan

[mark-piller]

Hi Donovan,

When I launch testPage in the preview mode, I get infinite spinner and nothing happens:

Please provide more detailed steps to reproduce the issue.

Regards,
Mark

[Donovan_Hardwick]

Hi @mark-piller

I have disabled the pre-loader.

Kind Regards
Donovan

[mark-piller]

There is an error on the page when it loads. The error prevents some initialization logic to run, you need to look into it:

I made a copy of testPage and called it testPageMark. I fixed the logic in my page in two places:

1. OnUploadSuccess - added a check to make sure the data model list exists - this is what you already do in the page initialization, but since it doesn’t run (for the reason described above), I added a workaround which you will need to remove:
   

   

2. Added Source Logic for the image in the repeater - the data binding you had in there is wrong:
   

   

Here’s the result of running the page and uploading images:

Regards,
Mark