Jquery Mobile Upload File Button Displays Twice

A strategy for handling multiple file uploads using JavaScript

It's a lot simpler than you might expect!

Icons fabricated by Madebyoliver CC 3.0 BY

Problem Definition

So, you lot need to become files from your user's browser to your server. Not just one file though. A whole agglomeration. A batch even. And each file needs to be able to have its own meta data sent with it, i.e. Title, Caption, Copyright, Tags, etc. And asking your user to transport them one at a time is not an option.

Y'all too desire to be able to keep that slick single page application aesthetic you've piece of work so gosh darn hard at. And then you demand to be able to send your payload without forcing the user to reload the page.

Piece of cake-peezy, lemon-squeezy!

The building blocks

Our shopping list

• 1 x Form
• 1 x File input
• i ten Submit button
• ~41 x Lines of JavaScript

The [mutiple] attribute

The starting time thing nosotros need to make certain to do is ready the mutiple attribute to the file input. This will indicate to the browser that the input field is immune to select more than 1 file at a fourth dimension.

Watching for changes and grabbing all them files

Side by side up, we need to lookout the file input for any changes. When we detect a change we then enshroud the file pointers in an array to be used when the class is submitted.

Observe how the fileList assortment is reset inside the change handler. This is in instance the user selects files more than one time.

Intercepting the form submit outcome

So far, so expert. Now nosotros are going to claw into the form's submit outcome to trigger our uploads.

Starting time we take hold of a reference to the form DOM element, hither chosen "file-catcher" , and so nosotros attach an event listener for the form's "submit" result. Thereafter nosotros prevent the course from actually submitting using the result'due south preventDefault() method. Finally nosotros iterate over the cached fileList array and send each file to the sendFile method (run into below).

FormData and Ajax

Ok, nosotros've cached the files later on the user has selected them. We've intercepted, and prevented, the course submission and piped the files through to the sendFile method. All we have to do now is actually write the sendFile method to accept the files and send them off to the server.

This unproblematic method does two things.

1. Creates a formData instance and sets the file as a value on information technology
2. Creates a new XMLHttpRequest ( Ajax ), opens a connection to the server, and sends the formData instance

And that's it! We've sent multiple files, in parallel, to our server.

Serial chunk vs. Parallel streams

Now it should exist noted that it isn't necessary to unpack the files from the file input and ship them off separately. You could skip the assortment iteration and multiple requests in favor of simply sending the entire drove of files in a single request quite easily.

I, notwithstanding, chose not to exercise that. One of the reasons was that our server was already setup to accept single file uploads (with metadata like Title, Caption, etc.) and to save our backend developer having the adjust the server lawmaking to accept multiple files, it made sense to update the UI codebase to ship each file individually.

Another reason was to fold the upload time over on itself, by leveraging the browser'south power to handle multiple server connections simultaneously. Thereby allowing the files to stream in parallel.

And lastly, fault tolerance. Past splitting the files into separate requests, this strategy allows for a file upload to fail in isolation. In other words, if the connection fails for the request, or the file is invalidated past the server, or whatever other reason, that file upload will fail past itself and should non necessarily bear upon any of the other uploads.

Side by side steps

This walkthrough of this strategy is intentionally simplistic in guild to focus on the core mechanics and structures that make it piece of work. Information technology is in no mode a fully fledged solution and would not be appropriate to use it equally is in a production environment.

What is missing here are things similar:

• Form validation on submit to ensure that files have actually been selected
• Request response handling to notify the user when a file is successfully upload, or if it fails
• Initiate file uploads immediately after the user selects them. Past doing this you could reduce the perceived upload fourth dimension as the user spends fourth dimension filling out whatsoever file related class fields.

The full example

Here's a JSFiddle that showcases this strategy equally a whole. When running it I would advise you take your browser tools open on the network tab, and inspect the request payload. Y'all will see the file information in in that location!

mallardthental.blogspot.com

Source: https://medium.com/typecode/a-strategy-for-handling-multiple-file-uploads-using-javascript-eb00a77e15f

Bagikan Artikel ini