This site uses cookies. By continuing to browse the site, you agree to our use of cookies. Find out more about cookies.
Skip to main content
Metadecidim's official logo
  • English Triar la llengua Elegir el idioma Choose language
    • Català
    • Castellano
Sign Up Sign In
  • Home
  • Processes
  • Assemblies
  • Initiatives
  • Consultations
  • Conferences
  • Help

Propose new functionalities for Decidim software

#DecidimRoadmap Designing Decidim together

Phase 1 of 1
Open 2019-01-01 - 2030-12-31
Process phases Submit a proposal
  • The process
  • Debates
  • Propose new features
  • News
chevron-left Back to list

Improve file attachment uploads

Avatar: Antti Hukkanen Antti Hukkanen
16/09/2021 16:30  
Accepted / In progress

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:

  1. 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.).
  2. 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.

Additional context
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:
https://github.com/decidim/decidim/issues/6204

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:
https://www.dropzone.dev/js/

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?
No

Funded by
We have initially discussed with OSP that they may be willing to fund the development efforts.

This proposal has been accepted and is under development

List of Endorsements

Avatar: Platoniq Platoniq verified-badge
Avatar: Decidim Product Decidim Product verified-badge
Avatar: Virgile Deville Virgile Deville
Avatar: Pauline Bessoles Pauline Bessoles verified-badge
Avatar: Pau Parals Pau Parals verified-badge
Avatar: Ariadna Vila Ariadna Vila
Avatar: Alexandru Emil Lupu Alexandru Emil Lupu
and 4 more people (see more) (see less)
Endorsements count7
Improve file attachment uploads Comments 2

Reference: MDC-PROP-2021-09-16760
Version number 2 (of 2) see other versions
Check fingerprint

Fingerprint

The piece of text below is a shortened, hashed representation of this content. It's useful to ensure the content hasn't been tampered with, as a single modification would result in a totally different value.

Value: 282699e2848f2b6c110faa212d0b17a02d0fd72df517a5b78267ae41917bfc68

Source: {"body":{"en":"<p><strong>Is your feature request related to a problem? Please describe.</strong><br>Currently there are some usability and accessibility issues with the file attachment uploads:</p><ul><li>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.</li><li>In case there are other errors with the file, such as wrong file extension, unallowed MIME type, etc., the same applies as above.</li><li>The file select buttons are using the browser / system language instead of the language displayed on the site</li></ul><p><strong>Describe the solution you'd like</strong><br>We would like to propose two changes to the file attachment upload functionality:</p><ol><li>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.).</li><li>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.</li></ol><p>The first change would allow reducing errors such as \"missing attachment title\" when submitting e.g. a proposal to the site.</p><p>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.</p><p><strong>Describe alternatives you've considered</strong><br>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.</p><p>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.</p><p><strong>Additional context</strong><br><a href=\"https://www.figma.com/proto/u79bBVQW1EDjJlp09R9Li8/Decidim-File-Uploads?node-id=1%3A2&amp;scaling=min-zoom&amp;page-id=0%3A1&amp;starting-point-node-id=1%3A2\" target=\"_blank\">Access interactive prototype of this feature</a></p><p>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.</p><p>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:<br><a href=\"https://github.com/decidim/decidim/issues/6204\" target=\"_blank\">https://github.com/decidim/decidim/issues/6204</a></p><p>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:<br><a href=\"https://www.dropzone.dev/js/\" target=\"_blank\">https://www.dropzone.dev/js/</a></p><p>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.</p><p><strong>Does this issue could impact on users private data?</strong><br>No</p><p><strong>Funded by</strong><br>We have initially discussed with OSP that they may be willing to fund the development efforts.</p>"},"title":{"en":"Improve file attachment uploads"}}

This fingerprint is calculated using a SHA256 hashing algorithm. In order to replicate it yourself, you can use an MD5 calculator online and copy-paste the source data.

Share:

link-intact Share link

Share link:

Please paste this code in your page:

<script src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16760/embed.js"></script>
<noscript><iframe src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16760/embed.html" frameborder="0" scrolling="vertical"></iframe></noscript>

Related images

ui-proto.png

Report inappropriate content

Is this content inappropriate?

Reason

2 comments

Order by:
  • Older
    • Best rated
    • Recent
    • Older
    • Most discussed
Avatar: Decidim Product Decidim Product verified-badge
22/09/2021 12:20
  • Get link Get link

@ahu thank you very much for this proposal, which definitely improves a lot the file upload management!
The only detail we would change is to make the progress bar a little thinner so that it can't be mistaken for a button.

Avatar: Virgile Deville Virgile Deville
22/09/2021 14:38
  • Get link Get link

🥳

Add your comment

Sign in with your account or sign up to add your comment.

Loading comments ...

  • Terms and conditions of use
  • About the community
  • Download Open Data files
  • Metadecidim at Twitter Twitter
  • Metadecidim at Instagram Instagram
  • Metadecidim at YouTube YouTube
  • Metadecidim at GitHub GitHub
Creative Commons License Website made with free software.
Decidim Logo

Confirm

OK Cancel

Please sign in

decidim Sign in with Decidim
Or

Sign up

Forgot your password?