Drag and Drop File Upload: Ahead of the Curve Strategies

One of the goals of most web developers is to make web surfing more enjoyable. One method to improve your user experience is allowing users to upload files with HTML drag and drop file upload. Simply put the easier you make it for a user to upload content, the more likely they are to do so.

There are a lot of popular websites, like Github and Facebook, that allow you to upload files by using a (usually) JavaScript drag and drop file upload. You can also review a drag and drop file upload example or two. But in this article, I will let you know how to make file upload through drag and drop.

What is Drag and Drop File Upload?

Drag and drop is simply a process for moving files such as images, videos, and audio on your computer from one place to another. You use your mouse to select the files you want, then drop them where you want them to be. Firstly, you click on an element, hold the mouse button down, and drag it to another location. Then, to drop it, you just release the mouse button. While it is a long-established feature on many user interfaces, Drag and Drop is much easier to code in HTML5, where you can drag any element. To learn more about HTML drag and drop file upload, click here.

What are the Benefits of Drag and Drop File Upload?

Uploading files has never been more accessible than now, thanks to new technology and this new, easy-to-use tool. In addition, it makes the user experience (UX) better by letting the user drag and drop files to a server.

We’ll show you how to beat your peers at drag and drop file uploading with our tips and tricks. Before we can move on, there are many things we need to know about the drag and drop file upload feature.

Related: The Anatomy of a Great Drag and Drop File Upload

What are the 5 Steps to a Successful Drag and Drop File Upload?

Detection of features

Depending completely on browsers that support drag and drop features is dangerous so you have to put a fall-back solution in place. That solution is marker detection. The drag and drop file upload feature depends on different JavaScript APIs, so you need to assess these APIs. When using feature detection you can use the Modernizer library. The code is:

var div = document.createElement (‘div’) ; return (‘draggable’ in div) || (‘ondragstart’ in div && ‘ondrop’ in div)

Then check the interface of the FormData, which can form a programmatic object of the files selected so they can get sent by ajax to the server.

return ‘FormData’ in window;

You also need the DataTransfer object to check if the FileReader API is available when the document loads. This is because browsers compatible with FileReaders are compatible with DataTransfer also.

‘FileReader’ in window

Then, you combine the code below into a self-invoking function,

 

var isAdvancedUpload = function() { var div = document.createElement(‘div’); return ((‘draggable’ in div) || (‘ondragstart’ in div && ‘ondrop’ in div)) && ‘FormData’ in window && ‘FileReader’ in window; }() ;

You can detect the features supported.

if  (isAdvancedUpload)  { // … }

With the active detection of features, you can now let the users know if they can drag and drop their files into the form or not.

Addition and Removal of Classes

Here you are mainly going to add classes to the form and remove them in a different state. Here is the code:

 

if (isAdvancedUpload) { var droppedFiles = false; $form.on(‘drag dragstart  dragend dragover dragenter dragleave drop’, function(e) { e.preventDefault () ; e.stopPropagation () ; }) .on(‘dragover dragenter’, function () { $form.addclass (‘is-dragover’) : }) .on(‘dragleave dragend drop’ , function () { $form.removeClass(‘is-dragover’) ; }) .on(‘drop’, function (e) { droppedFiles = e.originalEvent.dataTransfer.files; }); }

 

Both the e.preventDefault ( ) and e.stopPropagation ( ) help avoid any redundant actions for the events assigned across the browsers, while the e.originalEvent.dataTransfer.files help to return the dropped files.

Selection of Files in a Common Manner

There are times when a user may not be able to drag and drop the files they want to upload. For example, when a user is using a PC with a small or damaged screen. In this case, you can use the file input and labeling to allow users to choose a more suitable method. 

Successful Display of Files Selected

When you develop the drag and drop file upload feature for your website, the user should know when he has selected the files, and if there is a success in the selection, you can check the code below for the display.

 

var $input       = $form.find (‘input[type= “file”] ’ ), $label        = $form.find (‘label’) , showFiles = function (files)  { $label.text (files.length > 1 ? ($input.attr ( ‘data-multiple-caption’) || ‘’ ).replace ( ‘ {count} ‘ , files.length ) : files [ 0 ].name) ; } ; //… .on(‘drop’, function (e) { droppedFiles = e.originalEvent.dataTransfer.files; <em>// the files that were dropped</em> showFiles ( droppedFiles ) ; } ) ; //… $input.on (‘change’, function ( e ) { ShowFiles (e.target.files) ; });

 

Make some Adjustment to the Markup

The adjustment you make to your markup will also improve your drag and drop file upload feature. You can use this code  to adjust your markup:

<form class=”box” method= “post” action=”” enctype=”multipart/form-data”> <em><?php if ($upload success = = = null) : ?></em> <div class=”box input”> </div> <em>    <?php endif ; ?></em> <!-- … --> <div class=”box success”<em><?php if( $upload success = = = true ) :  ?> </em>style=”display: block;”<em><?php endif; ?></em>>Done!</div> <div class=”box error”<em><?php if( $upload success = = = false ) :  ?> </em>style=”display: block;”<em><?php endif; ?></em>>Error! <span><em><?=$upload error?></em></span>.</div> </form>

 

Why you need Filestack for Drag and Drop File Upload?

Are you confident with what you’ve learned thus far? Is your drag and drop file upload functionality ready to benefit from these tricks? Explore more on filestack for straightforward drag and drop file upload.

Filestack provides a robust collection of technology tools and API that works to improve your file upload, transformation, and delivery experience. It is one of the best developer services for fast and seamless file uploads, URL ingestion, and iOS/Android device integration. Lastly, it prevents you from encountering the biggest problem with drag and drop file upload.

You can move to filestack to sign up for free and get a better platform to start your building.

FAQs about Drag and Drop File Upload

What is the best way to upload documents?

If you’re looking for the best way to upload documents for your application, the answer should require another article. But at a glance, you’ll want to have fast, reliable, secure, and convenient uploads. This means giving your users a responsive, modern file picker with multiple ways of uploading one or multiple files of any type. The faster and more successful at uploads it is, the closer it is to being the best file upload experience. Adding a drag and drop feature surely makes your chances better, too. Luckily, Filestack has all these qualities.

What is the fastest way to upload a file?

It depends on the user. Some might find drag and drop faster, while others might prefer copy paste, manual browsing, or social media or link uploads. Some might even like uploading directly from their device cameras. If you want to implement multiple ways of file uploads to satisfy as many users as possible, try Filestack’s multiple and custom source uploads.