The Anatomy of a Great Drag And Drop File Upload

Drag and drop file upload is a common feature for uploading files to a website. Of course, you can always upload files or images using traditional methods, but sometimes using a drag and drop file upload is more convenient.

The appeal of drag and drop file upload features is obvious. Every user needs to regularly upload files to different websites. Whether they are uploading job applications to a company website or adding images or videos to their social media, users expect a user-friendly file upload feature to add their content.

As convenient as a drag and drop file upload can be, however, they are not without problems. Here, we will take a look at some common drag and drop file upload problems and how to solve them. If you have been wondering how to make your drag and drop file uploads user-friendly or which drag and drop upload functions you should add to your forms, then this post is for you.

We will also answer questions like “Should I develop a drag and drop file upload function myself or is there a ready-made solution?” 

Let’s start with a look at the anatomy of the drag and drop file upload process. Then, let’s discuss some must-have drag and drop file upload features. We will also describe traditional approaches and problems to implementing file uploads on your website. Finally, we will show you how to solve them using the “Filestack” File Uploader.

What are File Upload Features?

File uploads are how websites accept and manage user-generated files.  These files include, among other types,  documents and PDFs as well as images and videos. If you regularly add content like product photos on eBay, user avatars on Facebook, CVs or portfolios on job sites, or homework assignments on Skillshare, Coursera in addition to videos on YouTube, then you are using a file uploader.

Users usually upload files from their device storage. Because of this, you need to add a variety of upload sources to make drag and drop file uploading convenient. The most typical sources are local drive, cloud storage, webcam, social media, remote URL, and other services like Flicker, Evernote, and Huddle.

Generally speaking, a user can upload a file or image in two ways — by clicking on a button or by the drag-and-drop file upload feature.

What are drag and drop file uploads?

Drag and drop file uploads happen using a graphical user interface. Adding drag and drop upload functionality to your web page allows your users to drag and also drop files on your webpage or web applications.

Uploading images by dragging and dropping can include dragging images from your OS to a browser or from a browser to another browser.

When you drag any image file over a specified drag area the container’s border changes to solid, and the text “Drag and Drop to upload file” changes to “Release to upload file.” After that, a preview of that image or file appears.

 Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of JavaScript, but they have many problems. 

Why do you need a drag and drop file upload feature?

There are several reasons you want drag and drop file uploads on your site. Firstly, the drag and drop file upload feature looks better than traditional upload methods.

Next, drag and drop file uploads improve your site’s user experience because they are easy to use.

What makes a reliable drag and drop file uploader?

A reliable drag and drop file uploader needs to be fast, secure, compliant, and also user-friendly. 

What are the biggest problems with drag and drop file upload?

1. In everyday use, usually, one in ten uploads fails. The underlying cause is that most networks are optimized to accelerate downloads, not uploads, especially on mobile. Consequently, unreliable uploads are a big problem in Drag and Drop file upload.
2. Another problem is that most mobile browsers don’t support the API. Therefore, you can’t rely entirely on drag and drop if you have a mobile user base.
3. When on desktop, switching and resizing windows to drag files over may take more steps than using the regular select file dialog.
4. By accepting user-generated content, your website faces risks like accepting malware, hosting illegal files, or granting unauthorized server access.
5. Developing unique features rather than building generic solutions similar to most websites is time-consuming.
6. A robust and viable solution with customized scripts and load balancing may take even more time.
7. Scripts require constant maintenance and regular updates, which is difficult for individuals.
8. Even if you develop all those features by investing a huge chunk of money, it will also require CDN to ensure smooth upload and delivery.
9. For an individual, it is hard to reach the level of smoothness and security that a ready-made existing software can provide because you probably don’t have the required time and resources.
10. You can use any language, framework, or library for instance: Javascript, PHP, AJAX, React, Angular, Node, and so on, to develop a basic file upload script. But which one is best?

Why is a good file upload experience important?

Often neglected, a smooth file sharing process is key to improving user experience by enabling users to collaborate and communicate seamlessly.

Drag and Drop file upload functionality is becoming the norm. This is especially true now that users rely on the cloud more than ever.

Great companies are adopting these features to overcome the drag and drop file upload problem.

What are some drag and drop file upload security best practices?

1. Verify file types against a whitelist before allowing upload.
2. Use Domain Whitelists for uploaders
3. Scan all uploaded files with multiple anti-malware tools.
4. Establish security and data protection
5. Set a specific file size limit (Max & Min) to prevent smooth service blackout.
6. Upload files to external directories and store them outside the website root.
7. Set up SSL encryption to secure data passed between the web server and browser.
8. Ensure compliance.

The solution is FileStack, but why?

FileStack covers all the essential features for a reliable drag and drop file uploader. Here are some additional reasons FileStack can’t be beat:

1. FileStack has created a CDN for uploads. Heavy investment in worldwide presence & network technology facilitates rapid, reliable uploads.
2.  Intelligent IngestioTM automatically and continuously responds to changing network conditions by dynamically adjusting package sizes to guarantee upload success 99.999% of the time.
3.  The Filestack network can also execute complex file transformations on the web, as files are being uploaded as well as still in transit.
4.  Filestack upload gives you 100X more reliable mobile uploads. You get the same upload technology used by internet giants without the struggle of having to maintain it.
5.  Domain whitelists prevent File Picker from being embedded on unapproved websites. Whitelisting works by blocking requests that don’t contain an approved domain in the “Origin” header. It’s another way of securing your solution and your resources so others don’t attempt to piggyback on your account. At the same time, it isn’t entirely foolproof on its own. To truly protect an account against attacks or abuse, configure it to authenticate every request with security policies.
6.  Security and Data Protection are vital for us at Filestack. We ensure that our infrastructure is secured and that your data is kept safe. Because we deal with user-generated content most of the time, security and data protection is a shared responsibility. By default, your Filestack integration is public. It means there are no constraints where your files are uploaded and delivered from.

What makes the Filestack user interface quick and efficient?

Yes, it is. Here are some reasons why:

1. Attractive file upload features make your website more user-friendly.
2. The preview feature lets users preview the files before they upload them.
3. Users can select and upload several files at a time.
4. A responsive interface also makes file uploading convenient across all devices.
5. Large files are chunked for faster uploads regardless of file size.
6. Images can also be edited and previewed without leaving the browser.

How does Filestack work?

With Filestack, you can easily add Drag and Drop file upload support to your website. You only need three lines of code to make any element on your page draggable. Filestack Drag-and-Drop is a frontend to our JavaScript SDK library. Our library is available on Github JavaScript Drag and Drop.

Getting started: Step by step process, just follow the instructions

In order to get started with Filestack Drag and Drop, first you need the Filestack application and API key. Please read our  Quick Start guide which explains the basic vocabulary and features available in Filestack. The Filestack Drag and Drop is our open-source JavaScript SDK.

Next, to integrate Filestack Drag and Drop with your web application, include our UMD module in your code:

<script src="//static.filestackapi.com/filestack-drag-and-drop-js/{MAJOR_VERSION}.x.x/filestack-drag-and-drop.min.js"></script>

Then, add an element to your page:

<div class="drop-container">Drag and Drop</div>

After that, initialize Filestack Drag and Drop:

const filestackDnD = new filestackDnD.init('API_KEY', document.querySelector('.drop-container'));

That’s it! Now your page element handles the upload by dropping a file on it.

Example initialization with Filestack client:

const filestackClient = filestack.init('API_KEY');
const filestackDnD = new filestackDnD.init(filestackClient, document.querySelector('.drop-container'));

Example initialization with options(only image, max size 1024, max file: 2):

const config = {
  accept: ['image/*'], // default empty array - all files
  maxSize: 1024, // default 0 - no limit
  maxFiles: 2, // default 0 - no limit
  failOverMaxFiles: false, 
}

const filestackDnD = new filestackDnD.init('API_KEY', document.querySelector('.drop-container'), config);

Example initialization with sdkConfig:

const sdkConfig = {
  cname: 'cname_test',
  security: {
      policy : 'policy_test',
      signature: 'signature_test'
  }
}

const filestackDnD = new filestackDnD.init('API_KEY', document.querySelector('.drop-container'), null, null, testConfig);

What is SRI?

Sub-Resource Integrity (SRI) is a security feature that enables browsers to verify that files that fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by providing a cryptographic hash that a fetched file must match.

To obtain SRI hashes for Filestack-Drag-and-Drop library check the manifest.jason file on CDN:

https://static.filestackapi.com/filestack-drag-and-drop/{LIBRARY_VERSION}/manifest.json

<script src="//static.filestackapi.com/filestack-drag-and-drop/{LIBRARY_VERSION}/filestack-drag-and-drop.min.js" integrity="{FILE_HASH}" crossorigin="anonymous"></script>

 Where {LIBRARY_VERSION} is currently used library version and {FILE_HASH} is one of the hashes from integrity field in manifest.json file.

You can also check out the full documentation of the Filestack Javascript drag and drop file upload example.

Ready to get started building powerful drag and drop file upload apps with Javascript?

We hope you have all the information you need to handle drag and drop file uploaders on your website. We hope you also have the information you need to decide which file upload type best suits you. In addition, you should be familiar with all the options and can evaluate your needs and implement a smooth, fast, secure, and reliable drag and drop file uploader for your users.

If you think Filestack covers all the essential features, seems reliable and suitable for your website then what are you waiting for? Start today and see how easy “drag and drop file uploads” can be with Filestack!