Add Drag and Drop Uploads

[jhubb-io]

It would be great to implement drag and drop uploads as standard to improve the useability of the forms.

[engram-design]

https://uppy.io/examples/dragdrop/ Seems like a feature-rich example, investigate payload size

[engram-design]

I've spent a few days on this, and not really liking the direction we're heading in terms of adding a whole lot of complexity to the submission process. There are some notable hurdles to deal with, namely around server-side validation, the form lifecycle and dealing with HTML5 file input limitations.

Notable solutions were Uppy and FilePond

Firstly, We are unable to populate or modify an <input type="file"> field. What this means in practice is that we can't use a control on the page to support drag-and-drop, and then add these items to the file input. Ideally, these files would be added to the input field, and when the form is submitted these would be sent to the server.

So, in order to get the required functionality, we need to look at some third-party solutions. The above libraries get around this by needing their own server endpoints to upload the files immediately, or by hijacking the submit of the form. While this is workable, it provides a lot of pain when we need to deal with uploading files as a separate process just for drag-and-drop uploads. It also poses some tricky form validation issues.

Consider this: a user fills in a form, uploads 4 images and submits the form. Only, we've set a maximum of 2 images allowed for that field. This will trigger a server-side validation error, and return to the form (if we've got "Page Reload" set in the form settings). The file upload field will now be empty, but the files have already been uploaded through the libraries server functions, that take place before the form submits. There's no way for a user to modify these uploaded files, short of adding them again, essentially overwriting them.

I'm aware client-side validation could (and does already) handle this, but we can't rely on that, as it's an opt-in setting.

This is also not mentioned being able to manage uploads. Once the form is submitted, the files are uploaded, and the user can't do anything to delete them, except replace them. Ideally, it'd be great to have a "manager" to manage uploaded files. It's currently a strange pattern to be able to show what files were uploaded to the form, but being unable to modify them at all.

As such, I'm going to close this until there is significant demand to implement this. There's nothing stopping you from implementing this yourself, and to your specific needs.

[engram-design]

Going to resurrect this feature request! Options are:

• Uppy
• FilePond
• Dropzone.js

[umkasanki]

Will be very useful to have this feature!

[prescottcarr]

Adding FilePond support would be amazing!

[JulieVelghe]

Is there any news on this feature request? This would be very handy to have.

[shoored]

Something like FilePond or Dropzone would be amazing! Getting this question from clients more and more.

[engram-design]

Looking into options in the next few months, maybe even a configurable provider (although not sure if that makes sense from a client perspective). The front-runner for me is Filepond due to its UI/UX being very slick.

[shoored]

Yeah Filepond looks really nice. Great that you're looking into it!
In the meantime, I guess I can hook into the front-end templates and integrate something like this myself? 🤔

[engram-design]

You sort of can, but the reason for the lack of feature is there's some work to do to get it to work. Essentially, you need to have a mechanism to upload the files separately to the submission, as they get uploaded as soon as they're selected, as opposed to now when they are uploaded submitting the form. It's totally doable (see this PR #2059 using Uppy).

[shoored]

Ah okay, makes sense. Thanks!