Create Drag Drop for Upload File in React using HTML Drag Drop API

3 min read

•

Jan 9, 2026

Hi there! Welcome to my blog, this is Alan.

Today, I’m gonna share with you how to make the Drag Drop Upload without using any library, just html drag drop api.

Let’s get started!

Press enter or click to view image in full size

2. Install sass , because we’re gonna use it for styling

1yarn add --dev sass

3. Open the pages/index.tsx and replace its content as below for a simple ui:

Press enter or click to view image in full size

If your UI is in dark mode, you can open _app.tsx and remove the line:

1// remove this line
2import "@/styles/globals.css"

4. Create pages/index.module.scss and add 2 classes that we have used in Home component:

Press enter or click to view image in full size

5. Make the upload input look better by adding the style below for .container class:

Press enter or click to view image in full size

Upload box

Now we can click on the bordered-area to select file.

6. Make the area droppable, add onDragOver and onDrop to <label>:

Press enter or click to view image in full size

Why do we have evt.preventDetault() here?

onDragOver: to prevent browser from opening file it supports, such as PDF, Image
onDrop: to prevent browser from automatically downloading file

Try dropping a file and see how it works:

Press enter or click to view image in full size

7. Add a new area to show file list:

Press enter or click to view image in full size

update onDrop of <label>:

Press enter or click to view image in full size

and style for file list area:

Let’s try dropping 2files:

Press enter or click to view image in full size

Awesome!

8. Final step, let’s add some drag-and-drop effects to make it better:

Add active class, 2 new events for the <label>, and update onDrop:

Press enter or click to view image in full size

Add style for the active class, inside .container class:

Press enter or click to view image in full size

Here we are:

Press enter or click to view image in full size

I have published the example source to the link below for your reference:

Good luck with your next project!

Thanks for reading!