Use Drag Drop to Upload File Javascrip

• 14 min read
• JavaScript, Browsers

Quick summary ↬ In this article, we'll be using "vanilla" ES2015+ JavaScript (no frameworks or libraries) to complete this project, and it is assumed you lot have a working knowledge of JavaScript in the browser. This example should exist compatible with every evergreen browser plus IE x and xi.

It's a known fact that file choice inputs are difficult to style the style developers want to, then many but hide it and create a button that opens the file selection dialog instead. Present, though, we have an even fancier way of handling file selection: drag and drop.

Technically, this was already possible because most (if non all) implementations of the file choice input immune you to drag files over it to select them, but this requires you to actually show the file element. So, let's actually use the APIs given to us by the browser to implement a drag-and-drop file selector and uploader.

In this commodity, we'll exist using "vanilla" ES2015+ JavaScript (no frameworks or libraries) to complete this project, and information technology is causeless that you have a working knowledge of JavaScript in the browser. This example — aside from the ES2015+ syntax, which can easily changed to ES5 syntax or transpiled by Babel — should be compatible with every evergreen browser plus IE 10 and 11.

Hither'due south a quick look at what yous'll be making:

A demonstration of a web page in which y'all tin can upload images via drag and drop, preview the images being uploaded immediately, and meet the progress of the upload in a progress bar.

Drag-and-Drop Events

The first thing we demand to hash out is the events related to drag-and-drop because they are the driving force behind this characteristic. In all, there are 8 events the browser fires related to elevate and drop: drag, dragend, dragenter, dragexit, dragleave, dragover, dragstart, and drop. We won't be going over all of them because drag, dragend, dragexit, and dragstart are all fired on the element that is being dragged, and in our case, nosotros'll exist dragging files in from our file organization rather than DOM elements, so these events will never pop up.

If yous're curious almost them, you tin read some documentation about these events on MDN.

More after spring! Go on reading below ↓

As you might await, you can annals event handlers for these events in the same way yous register event handlers for most browser events: via addEventListener.

            let dropArea = document.getElementById('drop-area')    dropArea.addEventListener('dragenter', handlerFunction, false)   dropArea.addEventListener('dragleave', handlerFunction, false)   dropArea.addEventListener('dragover', handlerFunction, false)   dropArea.addEventListener('drop', handlerFunction, false)                      

Hither'due south a little table describing what these events exercise, using dropArea from the code sample in guild to make the language clearer:

Event	When Is It Fired?
dragenter	The dragged particular is dragged over dropArea, making it the target for the drib event if the user drops it there.
dragleave	The dragged item is dragged off of dropArea and onto some other element, making it the target for the drop event instead.
dragover	Every few hundred milliseconds, while the dragged item is over dropArea and is moving.
drib	The user releases their mouse button, dropping the dragged item onto dropArea.

Annotation that the dragged item is dragged over a child of dropArea, dragleave will fire on dropArea and dragenter will fire on that kid element because it is the new target. The drop outcome will propagate upwards to dropArea (unless propagation is stopped by a different event listener before it gets there), so it'll nevertheless burn on dropArea despite information technology not being the target for the event.

Likewise note that in order to create custom drag-and-driblet interactions, you'll need to telephone call result.preventDefault() in each of the listeners for these events. If you don't, the browser will end upward opening the file y'all dropped instead of sending it forth to the drib event handler.

Setting Upward Our Form

Before we start adding drag-and-drop functionality, we'll need a basic form with a standard file input. Technically this isn't necessary, but it's a good idea to provide it as an alternative in instance the user has a browser without support for the elevate-and-driblet API.

            <div id="drop-area">   <form class="my-form">     <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>     <input type="file" id="fileElem" multiple take="epitome/*" onchange="handleFiles(this.files)">     <label form="button" for="fileElem">Select some files</label>   </form> </div>                      

Pretty simple construction. You may notice an onchange handler on the input. We'll take a await at that later. It would too exist a proficient idea to add an action to the form and a submit button to help out those people who don't have JavaScript enabled. So y'all can use JavaScript to get rid of them for a cleaner form. In any example, you lot will demand a server-side script to accept the upload, whether it's something adult in-house, or you're using a service like Cloudinary to do information technology for you. Other than those notes, there's nothing special hither, so permit's throw some styles in:

          #driblet-area {   edge: 2px dashed #ccc;   border-radius: 20px;   width: 480px;   font-family: sans-serif;   margin: 100px auto;   padding: 20px; } #drop-area.highlight {   border-color: majestic; } p {   margin-top: 0; } .my-form {   margin-bottom: 10px; } #gallery {   margin-superlative: 10px; } #gallery img {   width: 150px;   margin-lesser: 10px;   margin-right: 10px;   vertical-align: centre; } .button {   display: inline-block;   padding: 10px;   groundwork: #ccc;   cursor: pointer;   border-radius: 5px;   border: 1px solid #ccc; } .button:hover {   background: #ddd; } #fileElem {   display: none; }                  

Many of these styles aren't coming into play yet, but that'southward OK. The highlights, for now, are that the file input is subconscious, but its characterization is styled to expect like a button, so people will realize they can click it to bring upwards the file selection dialog. Nosotros're also following a convention by outlining the drop surface area with dashed lines.

Adding The Drag-and-Drop Functionality

At present we go to the meat of the state of affairs: elevate and drop. Let'south throw a script in at the lesser of the page, or in a divide file, still you lot experience similar doing it. The first thing nosotros demand in the script is a reference to the drop area so we tin attach some events to it:

            let dropArea = document.getElementById('drop-expanse')                      

Now let's add some events. We'll kickoff off with adding handlers to all the events to prevent default behaviors and stop the events from bubbling up any higher than necessary:

            ;['dragenter', 'dragover', 'dragleave', 'drib'].forEach(eventName => {   dropArea.addEventListener(eventName, preventDefaults, false) })  role preventDefaults (e) {   e.preventDefault()   e.stopPropagation() }                      

Now let's add together an indicator to allow the user know that they have indeed dragged the item over the correct area by using CSS to modify the colour of the border color of the drop area. The styles should already exist there under the #drib-expanse.highlight selector, so let's employ JS to add and remove that highlight class when necessary.

            ;['dragenter', 'dragover'].forEach(eventName => {   dropArea.addEventListener(eventName, highlight, faux) })  ;['dragleave', 'drop'].forEach(eventName => {   dropArea.addEventListener(eventName, unhighlight, fake) })  function highlight(e) {   dropArea.classList.add('highlight') }  function unhighlight(east) {   dropArea.classList.remove('highlight') }                      

We had to utilize both dragenter and dragover for the highlighting because of what I mentioned earlier. If you start off hovering directly over dropArea and then hover over 1 of its children, then dragleave will be fired and the highlight will exist removed. The dragover event is fired after the dragenter and dragleave events, and so the highlight will be added back onto dropArea before we run into it existence removed.

We also remove the highlight when the dragged item leaves the designated area or when you drop the item.

Now all we demand to practice is figure out what to exercise when some files are dropped:

            dropArea.addEventListener('drop', handleDrop, simulated)  part handleDrop(due east) {   let dt = e.dataTransfer   allow files = dt.files    handleFiles(files) }                      

This doesn't bring us anywhere about completion, only it does two important things:

1. Demonstrates how to become the data for the files that were dropped.
2. Gets us to the aforementioned identify that the file input was at with its onchange handler: waiting for handleFiles.

Proceed in mind that files is not an assortment, but a FileList. Then, when we implement handleFiles, we'll demand to catechumen it to an array in order to iterate over it more hands:

            function handleFiles(files) {   ([...files]).forEach(uploadFile) }                      

That was anticlimactic. Let's get into uploadFile for the real compact stuff.

            part uploadFile(file) {   let url = 'YOUR URL HERE'   let formData = new FormData()    formData.append('file', file)    fetch(url, {     method: 'POST',     body: formData   })   .so(() => { /* Washed. Inform the user */ })   .catch(() => { /* Error. Inform the user */ }) }                      

Hither we use FormData, a congenital-in browser API for creating form data to send to the server. We then utilize the fetch API to actually send the image to the server. Make sure you change the URL to work with your back-end or service, and formData.append whatever additional form data you may demand to requite the server all the information it needs. Alternatively, if y'all desire to support Internet Explorer, you may want to use XMLHttpRequest, which means uploadFile would look like this instead:

            function uploadFile(file) {   var url = 'YOUR URL Hither'   var xhr = new XMLHttpRequest()   var formData = new FormData()   xhr.open('Post', url, true)    xhr.addEventListener('readystatechange', part(east) {     if (xhr.readyState == 4 && xhr.status == 200) {       // Done. Inform the user     }     else if (xhr.readyState == iv && xhr.condition != 200) {       // Mistake. Inform the user     }   })    formData.append('file', file)   xhr.send(formData) }                      

Depending on how your server is prepare upward, yous may desire to check for different ranges of status numbers rather than only 200, but for our purposes, this will work.

Additional Features

That is all of the base functionality, but oft we desire more functionality. Specifically, in this tutorial, we'll be calculation a preview pane that displays all the chosen images to the user, and so we'll add a progress bar that lets the user see the progress of the uploads. So, let's go started with previewing images.

Image Preview

There are a couple of ways you lot could do this: you could wait until later on the epitome has been uploaded and ask the server to transport the URL of the image, only that means you lot demand to await and images can be pretty big sometimes. The alternative — which nosotros'll exist exploring today — is to use the FileReader API on the file data we received from the driblet event. This is asynchronous, and you could alternatively use FileReaderSync, just we could be trying to read several large files in a row, so this could block the thread for quite a while and really ruin the experience. Then let's create a previewFile part and run across how information technology works:

            function previewFile(file) {   allow reader = new FileReader()   reader.readAsDataURL(file)   reader.onloadend = function() {     let img = document.createElement('img')     img.src = reader.result     document.getElementById('gallery').appendChild(img)   } }                      

Here nosotros create a new FileReader and telephone call readAsDataURL on information technology with the File object. As mentioned, this is asynchronous, and then nosotros demand to add an onloadend event handler in order to go the result of the read. We then use the base 64 data URL as the src for a new image chemical element and add it to the gallery element. At that place are only two things that need to be done to brand this piece of work at present: add the gallery element, and brand sure previewFile is actually called.

First, add together the following HTML right after the stop of the course tag:

Naught special; information technology's just a div. The styles are already specified for it and the images in information technology, and so there'due south nothing left to do there. Now let'southward change the handleFiles function to the following:

            function handleFiles(files) {   files = [...files]   files.forEach(uploadFile)   files.forEach(previewFile) }                      

At that place are a few ways you could have washed this, such equally limerick, or a single callback to forEach that ran uploadFile and previewFile in it, just this works likewise. And with that, when yous drop or select some images, they should show up nearly instantly below the form. The interesting affair about this is that — in sure applications — yous may not actually desire to upload images, but instead store the data URLs of them in localStorage or some other customer-side cache to be accessed past the app later. I can't personally call back of any expert apply cases for this, but I'g willing to bet there are some.

Tracking Progress

If something might take a while, a progress bar can assist a user realize progress is actually beingness made and give an indication of how long it volition take to be completed. Calculation a progress indicator is pretty like shooting fish in a barrel thank you to the HTML5 progress tag. Let's start by calculation that to the HTML code this time.

            <progress id="progress-bar" max=100 value=0></progress>                      

Yous can plop that in right subsequently the label or between the form and gallery div, whichever y'all fancy more. For that matter, you can identify information technology wherever you lot want within the torso tags. No styles were added for this example, so information technology will show the browser's default implementation, which is serviceable. At present permit'due south work on adding the JavaScript. We'll first look at the implementation using fetch and then we'll show a version for XMLHttpRequest. To kickoff, we'll need a couple of new variables at the top of the script :

            let filesDone = 0 let filesToDo = 0 allow progressBar = document.getElementById('progress-bar')                      

When using fetch we're only able to determine when an upload is finished, so the only data nosotros rail is how many files are selected to upload (every bit filesToDo) and the number of files that have finished uploading (as filesDone). We're also keeping a reference to the #progress-bar chemical element and so we can update it chop-chop. Now let's create a couple of functions for managing the progress:

            office initializeProgress(numfiles) {   progressBar.value = 0   filesDone = 0   filesToDo = numfiles }  function progressDone() {   filesDone++   progressBar.value = filesDone / filesToDo * 100 }                      

When we first uploading, initializeProgress will exist called to reset the progress bar. Then, with each completed upload, we'll call progressDone to increase the number of completed uploads and update the progress bar to show the current progress. So let'south telephone call these functions by updating a couple of onetime functions:

            function handleFiles(files) {   files = [...files]   initializeProgress(files.length) // <- Add together this line   files.forEach(uploadFile)   files.forEach(previewFile) }  office uploadFile(file) {   permit url = 'YOUR URL Hither'   let formData = new FormData()    formData.append('file', file)    fetch(url, {     method: 'Postal service',     trunk: formData   })   .then(progressDone) // <- Add `progressDone` call here   .take hold of(() => { /* Error. Inform the user */ }) }                      

And that's information technology. Now let'south take a expect at the XMLHttpRequest implementation. Nosotros could just make a quick update to uploadFile, only XMLHttpRequest really gives us more than functionality than fetch, namely we're able to add together an issue listener for upload progress on each request, which volition periodically give us information most how much of the asking is finished. Considering of this, we demand to track the percentage completion of each request instead of just how many are done. And then, permit's outset with replacing the declarations for filesDone and filesToDo with the following:

          allow uploadProgress = []                  

Then we demand to update our functions as well. Nosotros'll rename progressDone to updateProgress and change them to exist the post-obit:

            function initializeProgress(numFiles) {   progressBar.value = 0   uploadProgress = []    for(allow i = numFiles; i > 0; i--) {     uploadProgress.push button(0)   } }  function updateProgress(fileNumber, percent) {   uploadProgress[fileNumber] = per centum   let full = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length   progressBar.value = total }                      

Now initializeProgress initializes an array with a length equal to numFiles that is filled with zeroes, denoting that each file is 0% complete. In updateProgress we observe out which image is having their progress updated and change the value at that index to the provided pct. We and so calculate the total progress per centum by taking an average of all the percentages and update the progress bar to reflect the calculated total. We withal call initializeProgress in handleFiles the same as we did in the fetch case, so at present all nosotros demand to update is uploadFile to phone call updateProgress.

            function uploadFile(file, i) { // <- Add `i` parameter   var url = 'YOUR URL Here'   var xhr = new XMLHttpRequest()   var formData = new FormData()   xhr.open('Mail', url, truthful)    // Add following upshot listener   xhr.upload.addEventListener("progress", function(east) {     updateProgress(i, (eastward.loaded * 100.0 / due east.full) || 100)   })    xhr.addEventListener('readystatechange', role(e) {     if (xhr.readyState == iv && xhr.condition == 200) {       // Done. Inform the user     }     else if (xhr.readyState == 4 && xhr.status != 200) {       // Fault. Inform the user     }   })    formData.append('file', file)   xhr.send(formData) }                      

The get-go affair to note is that we added an i parameter. This is the index of the file in the listing of files. We don't need to update handleFiles to pass this parameter in considering it is using forEach, which already gives the index of the element as the second parameter to callbacks. We also added the progress event listener to xhr.upload so we tin can phone call updateProgress with the progress. The issue object (referred to as due east in the code) has ii pertinent pieces of information on it: loaded which contains the number of bytes that have been uploaded so far and full which contains the number of bytes the file is in total.

The || 100 piece is in there because sometimes if there is an error, e.loaded and e.total will be zippo, which means the adding will come out as NaN, so the 100 is used instead to report that the file is washed. Y'all could too use 0. In either case, the mistake will show up in the readystatechange handler so that y'all can inform the user about them. This is merely to prevent exceptions from existence thrown for trying to do math with NaN.

Conclusion

That's the concluding piece. You now have a web page where y'all can upload images via drag and drib, preview the images existence uploaded immediately, and run into the progress of the upload in a progress bar. You can see the final version (with XMLHttpRequest) in action on CodePen, but be aware that the service I upload the files to has limits, so if a lot of people examination information technology out, information technology may break for a time.

(rb, ra, il)

nelsonoursend1939.blogspot.com

Source: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/