Improve file attachment uploads
Is your feature request related to a problem? Please describe.
Currently there are some usability and accessibility issues with the file attachment uploads:
- The errors with the attachment (such as missing title) are shown after the user submits the form. This causes the user having to re-select the file which seems to be a struggle.
- In case there are other errors with the file, such as wrong file extension, unallowed MIME type, etc., the same applies as above.
- The file select buttons are using the browser / system language instead of the language displayed on the site
Describe the solution you'd like
We would like to propose two changes to the file attachment upload functionality:
- When selecting the file(s), the selection would happen in a dialog window where the user has to enter valid details for the files in order to continue. In this dialog, the user would be presented also the guidance for the file (e.g. maximum file size, allowed file extensions, etc.).
- The file selection would happen through a dynamic upload control where the user can either click to select file(s) or drop them to a dedicated drop area on the page.
The first change would allow reducing errors such as "missing attachment title" when submitting e.g. a proposal to the site.
The second change would allow tackling the other file-related errors already before the user tries to submit their proposal (or some other record). Additional bonus would be also to provide a native language for the file selector input control.
Describe alternatives you've considered
We have implemented a similar functionality to the Helsinki Decidim platform but without the dynamic file uploads, so it is an alternative to implement it that way but it would leave out the benefits of the dynamic file uploads.
Another alternative approach would be to implement this without the modal but after a closer inspection, we believe the modal is useful to provide the file upload guidance as well as forcing the user to complete the required file details before proceeding further.
Access interactive prototype of this feature
Please note about the prototype that there are two separate paths for the image upload and the attachments upload. Restart the prototype once you have tested one of the paths.
Also, please see a related GitHub issue regarding adding native language for the file selection buttons which would be possible if the proposed changes were implemented:
For development details, we are thinking of using Dropzone.js for the file input controls which provides the necessary front-end APIs to handle file dropping as well as the dynamic upload to the server:
The dynamic file upload back-end should be possible to do now that we have ActiveStorage integrated to the Decidim core after Rails 6 upgrade.
Does this issue could impact on users private data?
We have initially discussed with OSP that they may be willing to fund the development efforts.
The development of this proposal has finished
- Reviewed by @product and accepted in the main project
- Funded by Open Source Politics
- Developed by Mainio Tech
- Available in release 0.27 via #8681
List of Endorsements
Report inappropriate content
Is this content inappropriate?