Can I Use Drag-And-Drop In JS File Upload?

File uploading is an essential feature of any web application. If we can allow users to upload files with the drag and drop feature, it can improve the user experience. The drag-and-drop feature allows anyone to quickly move files, text, and photographs into a document. Drag and drop file upload requires tapping while holding the object you wish to move, then scrolling and selecting its new location with the second finger. You can easily incorporate the drag and drop of files in your JS web application with JavaScript file upload API provided by Filestack. Filestack enables drag-and-drop JS file upload for every page component with a simple piece of code. 

In this article, we will discuss how to use Drag and Drop in JS file upload.

What is a drag-and-drop file upload?

Generally speaking, you can upload files with either a button click or drag and drop functionality. However, drag and drop only works with a Graphical User Interface (GUI). Drag-and-drop picture uploading can involve moving files from one browser to another or from one operating system to another. Various JavaScript libraries can implement this kind of drag-and-drop file upload functionality with just a few lines of code. However, they cause various issues. This is why you need to find a suitable API to implement this JavaScript functionality. 

Why is the drag-and-drop feature important?

A seamless file-sharing procedure, which is sometimes overlooked, is essential for enhancing the user experience. It allows users to collaborate and communicate without interruption. The ability to upload files via drag-and-drop is becoming more common. This is especially obvious nowadays, with users depending on the cloud more than ever. Great businesses use these functionalities as a solution to the drag-and-drop file upload issue.

What are the prerequisites for JS file upload?

Almost any drag-and-drop functionality has its own prerequisites. The following are the prerequisites of the Filestack drag-and-drop functionality:

• Filestack application
• API key

Follow this quick-start guide to learn more about getting the prerequisites up and running.

What does the UMD module do?

Additionally, you can utilize the UMD module to embed the Filestack drag-and-drop functionality into the application. You can use the following code to do that:

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

Afterwards is the initialization process. You can use the following code:

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

What is SRI?

Subresource Integrity (SRI) is a security feature. It enables browsers to confirm that the files they fetch are delivered without any unexpected modifications. Thus, a fetched file should match a provided cryptographic hash for this feature to work.

Firstly, look at the manifest.json file on CDN to get the SRI hashes for the Filestack-Drag-and-Drop library:

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

Here, {LIBRARY_VERSION} is the current library version. The {FILE_HASH} is one of the hashes from the integrity field in the manifest.json file.

What are the objects?

When it comes to Filestack DND (drag-and-drop) functionality, the following are the main components.

Constructor – constructor(apikey: string | Client, element?: HTMLElement, options?: OptionsInterface, sdkConfig?: ClientOptions)

Properties – Some of the properties available are:

1. elementsHelper – Manages Elements
2. eventEmitterHelper – Manages events
3. uploadsHelper – Manages uploading
4. filstackSdk – Client form filstackSDK

Methods

ElementHelper – Some of the methods in ElementHelper are:

1. setElement – Adding an item and the previous elements are overwritten
2. setElements – Adding items and the previous elements are overwritten
3. addElement – Add element to the list
4. addElements – Add elements to the list

UploadHelper – Accordingly, some of the methods in UploadHelper are:

• setUploadOptions
• setStoreUploadOptions
• setSecurity

What are the events?

You can use events to interactively communicate with the drag-and-drop functionality. Here, you should consider two things, which are mainly listening to events and also sending events. The following section describes how to implement both the listening event and sending the event.

Listening Event – filestackDnD.on( ‘eventName’ , (e) => {console.log(e)});

Some events that can be listened to are: 

• successReadFile – Emitted after selecting the file
• progress – Check the progress of the upload
• dragover – Event triggered when an object is dragged over an element added to Drag and Drop
• dragleave – Event triggered when the user moves the cursor outside a Drag and Drop supported item
• drop – Event triggered when the user drops a file over an item
• uploadfilefinished – Event triggered when the file uploader is successful
• error – Event triggered when there are some errors e.g. wrong file format, problems with uploading, etc.

Send Event – filestackDnD.emit(‘eventName’, { elementId: null, fileId: id });

You can also use pause (stops upload), resume (resumes upload), and cancel (aborts upload) when triggering the send event if you need to stop the event.

 

What is a simple example of JS file upload?

Implementing the file upload feature with Angular or JavaScript is also easy. The following is a simple example of the drop-and-drop functionality.

<!DOCTYPE html>

<html lang = “en” >

<head>

    <meta charset = “utf-8” />

    <meta http-equiv = “x-ua-compatible” content = “ie=edge” />

    <meta name = “viewport” content = “width = device-width, initial-scale = 1” />

    <title> JS File upload example </title>

    <link rel = “stylesheet” href =”style.css”>

</head>

 

<body>

    <div class = “container”>

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

    </div>

    <script src = “./../dist/browser/filstack-dnd.js”> </script>

    <script>

        window.onload = function() {

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

            

            client.on(‘progress’, (e) => {

                console.log( ‘progress’ , e)

            });

 

            client.on( ‘finish’ , (e) => {

                console.log( ‘finish’ , e)

            });

 

            client.on( ‘error’ , (e) => {

                console.log( ‘error’ , e)

            });

        };

    </script>

</body>

</html>

Go through the following documentation to find further examples.

 

What does Filestack offer?

Filestack also allows you to quickly add drag-and-drop file uploader capability to your website. All in all, you need just three lines of code to make any element on your page draggable with Filestack. The JavaScript SDK library has a UI called Filestack Drag and Drop. This library is accessible via JavaScript Drag-and-Drop on Github. If you want to know tips for drag-and-drop file uploads, read this article. 

Are You Ready to turbocharge your JS File Upload?

We hope you have the necessary knowledge to select the file upload option that best meets your needs. Additionally, you need to be aware of all your possibilities, be able to assess your requirements, and put in place a user-friendly, quick, secure, and dependable drag-and-drop file uploader.

Finally, what are you waiting for if you feel Filestack has all the necessary features, is trustworthy, and is appropriate for your website? Start now to experience the simplicity of Filestack’s drag-and-drop file upload!

Read More →