Fixing the Biggest Problem With Drag And Drop File Upload

In this article, we’ll tackle the biggest problems associated with drag and drop file uploads. We will also show you how to fix JavaScript Drag and Drop problems using practical examples to illustrate the process.

You can make almost any element on your page draggable using the drag and drop file upload (DnD) API. But, before we dive into the problems of Drag and Drop and how to fix them, let’s take a look` at the fundamentals of Drag and Drop.

What is Drag-and-Drop?

Drag and Drop is an interactive and user-friendly concept — it allows you to move an object by grabbing it and dragging it to a new location. 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.

What are the Drag and Drop (DnD) Events?

There are several Drag and Drop events. Here are some of the most common:

• ondrag: This event occurs in HTML5 when you drag an element or text selection.
• ondragstart: This calls the drag(event) function, which indicates which data to drag.
• ondragenter: It determines whether or not the drop target will accept the drop. You must cancel this event to accept the drop.
• ondragleave: This happens when the mouse leaves an element before reaching a valid drop target.
• ondragover: This specifies the dragged data’s drop location.
• ondrop: This specifies the location of the drop at the end of the drag operation.
• ondragend: This happens after the user has finished dragging an element.

Now, with the fundamentals of Drag and Drop as well as common DnD events covered, let’s discuss some common Drag and Drop problems and how to fix them.

What is the Biggest Problem Associated with Drag and Drop File Upload?

One problem with drag and drop is object data transfers.

Drag and Drop process takes using the data transfer property. If a problem occurs here, it prevents the dragged data from reaching the desired location. It is associated with the following properties:

1. dataTransfer.setData(format, data): This method specifies the data to drag.
2. dataTransfer.clearData(format): This function clears all data when called with no argument. When called with a format argument, it removes only that data.
3. dataTransfer.getData(format): This method returns data in the format specified. If there is no such data, it returns the empty string.
4. dataTransfer.types: This property returns an array containing all of the formats specified in the dragstart event.
5. dataTransfer.files: This method returns all of the files to be dropped.
6. dataTransfer.setDragImage(element, x, y): This function displays an existing image as the drag image rather than the default image alongside the cursor. Coordinates specify the drop location.
7. dataTransfer.addElement(element): This method adds the specified element as a drag feedback image.
8. dataTransfer.effectAllowed(value): This tells the browser that the user can only perform the listed type(s) of operations. The following values apply: none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized.
9. dataTransfer.dropEffect(value): This method controls the feedback given to the user during the dragenter and dragover events. When a user hovers over a target element, the browser’s cursor indicates the type of operation that will occur (e.g., a copy, a move, etc.). The effect can be one of the following: none, copy, link, or move.

How to fix Drag and Drop Problem?

There are a few steps you need to take in order to fix the problem of drag and drop file uploads. The steps address two major problems.  Firstly, there are problems with dragging and then there are problems with dropping file uploads. Here are the steps you can take to fix both these issues using Filestack.

Step 1: Make a File Draggable

To begin with, you need to make an element draggable by setting the draggable attribute to true:

img draggable = ”true”>

Then, define what happens when the user drags an element. you can do this using the ondragstart attribute that invokes the drag(event) function, which specifies the data to be dragged.

The dataTransfer.setData() method determines the data type and value of dragged data. The event listener ondragstart sets the allowed effects (copy, move, link, or some combination).

Step 2: Dropping the Object

The ondragover event specifies the location where the user can drop dragged data. By default, Data/elements cannot be dropped into other elements. To allow a drop, it must prevent the element’s default handling. This is accomplished by invoking the event.

methodpreventDefault()

Finally, there is the drop event, which allows the actual drop to take place.

How do you Drag and Drop Files in JavaScript using Filestack?

You can easily drag and drop file upload support to your website with Filestack Drag and Drop. Filestack is a user interface for our JavaScript SDK library and it only takes three lines of code to enable any element on your page to do this. Also, check out additional Javascript file upload examples in the SDK.

The first step is to simply include the following UMD module in your code to integrate Filestack-Drag-and-Drop with your web application:

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

Next, 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 files: 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);

Check out the full documentation for the Filestack drag and drop file upload.

Ready to get started building amazing drag and drop file upload applications using Filestack?

Sign up for free at filestack to upload, transform and deliver content easily!

Read More →