File input improvement

[ilunglee]

Problem

The current file input uses Bootstrap's default file input. However, this has a couple of issues:

Texts translations are using system/browser settings

Ideally, we will make it consistent and use the I18n translations.

File previews

File uploads should provide previews for (images, pdf) to let users know what files are selected. Currently, it shows the file name when attaching one file, but it only shows the counts of attached files for multiple file upload fields.

Ideally, it will list the attached files and allow the user to remove/add files before submitting them, similar to the illustration below (Basecamp's file upload).

The previews should also list attached files if users are editing an existing record.

Drag and drop (not a priority)

It would be nice if we could implement drag and drop upload to improve usability. Maybe see if we can integrate with https://www.dropzonejs.com or if there is a more straightforward solution.

Direct upload (ActiveStorage only)

ActiveStorage provides excellent integration with direct uploads. The option is available for users who want to use it. See https://edgeguides.rubyonrails.org/active_storage_overview.html.

Proposed Solution

• Add previews for both single and multiple files upload
• Allow removing selected files before submitting
• Allow removing selected files after saving
• The feature will have to work with direct uploads— https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads