Asynchronous file upload?

Question

JavaScript

The user has the opportunity to fill out the form and attach several photos of significant size.

Does it make sense to keep the user waiting for the photo to load, or does it make sense to save the form and download the files in the background?

How are things like this done in Node.js?

Answer 1

It depends more on the interface, if the user is on the page only to download files, then it makes sense to keep a modal with progress or the like until the end of the download.
If he definitely does not leave the site (chat, admin panel, etc.), then you can display the progress in the background and in a prominent place.
Example of progress tracking on the front (axios)

const upload = async (files) => {
  const config = {
    onUploadProgress: (progressEvent) => {
      const percentUploaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(percentUploaded);
    }
  }

  const data = new FormData();
  data.append('file', files[0]);

  await axios.put('/api/url', data, config);
}

If without a lib, then here is an example of progress on XmlHttpRequest
On the back in the node, some kind of multer is usually hung on this route.

Answer 2

Does it make sense to keep the user waiting for the photo to load, or does it make sense to save the form and download the files in the background?

What are you going to keep? It all depends on the criticality of the data, if the user submits the form and closes the page without waiting for the files to load, you will have crap in terms of data connectivity - the form data is there, but there are no pictures.