Multiple Image upload button in modal Bootstrap 4 form not working - images not uploading

[Mulciber]

Attempting to build a multiple image upload form based on this tutorial from @ben:

Started a tutorial on how to create an image gallery

Please have a look https://www.youtube.com/playlist?list=PLUjqTJN3byC9kK8YZkmGwjo9nrEipl2yb I will try to add an episode a day. Not a promise

Specifically this video: https://youtu.be/FGnd3GJVnUM

When I click the “Add Images” button, the modal opens just fine

It also lets me go through the steps of searching my computer, selecting the images and clicking open to begin the upload process. It even correctly identifies how many images I am ready to upload.

But when I click the “Add Images” button to submit, nothing happens.

I checked the local directory to see if they were uploaded but they’re not there.

So I went back to the Actions panel and noticed that there happen to be extra braces inside the parentheticals for the Load action.

If I simply delete those, will that solve my problem or make it worse?

Thank you all for your help.

EDIT: Screen shot should say “Extra braces” (not brackets).

[bpj]

There’s a really useful tool to help work out what’s going on that I would recommend:

1. If you have saved and uploaded the file, when using your browser, use the Dev Tools (usually right-click on an object on the page and choose ‘inspect’). There is usually an option for ‘Network’ which will show you what connections are being made to send/receive data from the page to the Server Connect actions. As events are fired, this list will show you what is going on - that way you can tell if the page is firing the form to submit or whether the data isn’t being sent at all:
   
   
   
   You can click on each entry for more info - when debugging is turned on, this is where you can see the info:
   
   

In your case:

1. Check the button is within the form or you have a dynamic event to submit the form
2. Check the network dev tool to see what is being sent and what response it gets. That way you can tell whether it is the page or the Server Connect action that is the problem.

[Mulciber]

You were right about the button not being inside the form.
So I fixed that.

Thank you for the advice on the network dev tool. I tried it out on the “Add Images” button and it told me

A server error occured, to see the error enable the DEBUG flag.

It also showed line 249 as being the culprit:

Here is what my code shows:

Are those brackets supposed to be next to the imageGalleryID and imageFile name?

EDIT : Added “imageGalleryID” to the last line of this comment.

[Teodor]

A server error occured, to see the error enable the DEBUG flag.

Please make sure to follow the exact steps from the following tutorial:

Debugging Server Connect Errors

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open the server connect settings: [image] And enable the Debug Mode: [image] Click Save: [image] In your browser, open the Developer tools. If you don’t know how to open them please refer to your browser’s documentation. Then open the Network tab(1) and select XHR(2): [image] Now with the develo…

This way you will see the exact error returned by your server.

[Mulciber]

Thank you @Teodor for the Debugging Server Connect Error tutorial. I will definitely turn this on.

And thank you @bpj for the tip on the Inspect/Network tool in the browser.

Much appreciated.

[Mulciber]

Here’s the place in the video where I apparently got the idea to put the brackets in.
It looks like some sort of array was being established. I’m not sure.

I have no idea whether or not this is what’s causing my issue.

[Teodor]

Please follow the tutorial I sent you. It will show you the exact error returned by the server, which will explain what’s wrong.

Also, please don’t try to manually edit the code if you don’t know what you are doing.

[Mulciber]

[patrick]

From the error I see that there is something wrong with one of the expressions in your Server Connect action file. In the stacktrace I see that it is probably the Image Processor, something with a path /galleries/{{$_.... Could you provide a screenshot with the properties of that action step, I think it would be the Save Image step. Then I could check if the expression is wrong or that it may be a bug.

[Mulciber]

[Teodor]

We need the screenshot of the server connect panel (not the app connect panel), which shows the save image step and its values.

[Mulciber]

My apologies.

[Teodor]

Not this server action. We need the one from the error - called Insert.

[Mulciber]

[Teodor]

Please show what we requested - screenshot of the properties of these two steps:

[Mulciber]

Fourth time’s the charm

[Teodor]

Can you copy and paste here the whole expression from your second screenshot? Please wrap in backticks: ``

[Mulciber]

/galleries/{{$_POST.imageGalleryID/thumbs}}

[Mulciber]

Apparently it is uploading them. Just not closing out the window and puttting them on the screen.

[Teodor]

This is a wrong expression …

/galleries/{{$_POST.imageGalleryID/thumbs}}

It must be:

/galleries/{{$_POST.imageGalleryID}}/thumbs