Improve UX when uploading simultaneous files with CORS

Created on 11 November 2021, about 3 years ago
Updated 18 December 2023, 12 months ago

Problem/Motivation

If there is more than one file upload field on a form, and CORS is enabled, if you upload two files at the same time. There could be (minor) problems!

When the first file finishes it's upload, it will attempt to send the data to Drupal via Ajax. This is done without the binary of the file, as the file is in S3 so we don't want to send it to Drupal.
However, that Ajax request sends the entire form, which will include the other file being uploaded, and the binary of this has not yet been stripped out, so the entire file is sent to Drupal.

This means that:
a) The user must wait (unnecessarily) for the otherfile to upload to Drupal.
b) If the other file fails validation, then the first upload field will stay at 100% (i.e. it won't update with a preview of the file). At this point it has submitted to Drupal so will be saved with the form (so it's just a minor UX issue).
c) If the other file fails to upload due to some other issue (e.g. network issue) then the first upload will also fail.

Admittedly, this is quite an edge case (hence this issue is a minor), but it has been causing us some issues as our content editors are often uploading multiple files at the same time.

Steps to reproduce

1. On a Drupal site with CORS enabled, setup a content type with two file fields.
2. Create a new piece of content, on the first file field upload a file that will fail validation (e.g. too large).
3. On the second file field, upload a file that will pass validation.
4. Wait until the second (small file) has uploaded, notice it hangs on 100%, waiting for the second to upload.
5. Wait for the first (large) file to be uploaded, this will return a validation error. Notice that the second file is now stuck on 100% .

Proposed resolution

Either fix it so that the other file binary is not sent in the Ajax request.
Or disable all other file fields when one is being uploaded (preventing the user from uploading multiple files at the same time).

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Needs review

Version

2.1

Component

User interface

Created by

🇬🇧United Kingdom Leon Kessler

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024