Dropzone auto submit

Is there an event to make a dropzone auto submit on file select?

I didn’t see any dynamic events on a file input that would work for this. My first thought was on value changed or updated but doesn’t appear to have those events available.

Screenshot 2024-03-12 at 10.24.29 AM

If you assign a dmx-on:change event (before change) on your dropzone, you will be able to trigger the submit BUT works only with click and select file… NOT working with drag & drop files…
dmx-on:change="form1.submit()"

If that helps…

2 Likes

I am in the same point. I dont think this is possible. Any help @Teodor?

That’s not currently supported, but how is it supposed to work?
Should it auto-submit when you drop a file in the dropzone and also when you select a file by clicking in the drozone area?
What if you drop/select multiple files at once, what should the behavior be?

When people drop files on the area, auto submit the form.

You didn’t really answer the details i asked.

Should it auto-submit when you drop a file in the dropzone and also when you select a file by clicking in the drozone area ?

Yes both cases apply. when you click search files and add or when you drop files on box. I think this like a data update behavior.

If this is the case, you submit the form with multiple files. If you only add one you submit the form with one file. Exactly as if you click on submit button. (Without having to click submit button).

Please test the following update: dmxDropzone.zip (7.4 KB)

It should now also trigger the change event on drop and also added the changed/updated events.

2 Likes

Hi Patrick,

Are these updates already implemented in the newest version of wappler (6.7.0) or do I need to use the zipfile above for these features?
Right now my dropzone does trigger the change event when selecting a file but not when dropping a file.

If I do need to install the zip file, do i just have to load in the js file?

Thanks

The update is already available with the latest Wappler.

The change event is not triggering on drop for me.
I created a new serverconnect-form and added the file upload, converted it to a Dropzone and added a change event. My code looks like this:

<form is="dmx-serverconnect-form" id="serverconnectform1" method="post">
    <input id="file1" name="file1" type="file" class="form-control" multiple="true" is="dmx-dropzone" dmx-on:change="toast.run({message: 'change event'})">
</form>

When adding a file on click it does trigger but not on drop.
Am i doing something wrong or is this a bug?