Drag and Drop image files with instant preview using JavaScript and the Drag and Drop API

In this tutorial, I am going to show you how to drag and drop image files from your computer into the browser and get an instant preview using only vanilla JavaScript.

You are going to learn how to use the dragenter, the dragover , the dragleave, and the drop event listeners to drag the files into a designated drop-area and handle them.

Also you will learn how to use the dataTransfer object to access the files being dragged and the fileReader object to read the files and display a live preview of the dragged images.

Read the article on my website and get the source code.

Learn all about the Drag and Drop API on the MDN network.

If you feel like saying thanks, you can buy me a coffee ❤️

----------------------------------------------------------------------------------------
Photos by:
Francisco Requena:

lucas Favre

Evgeny Ndn

Madalina Z

Benjamin Voros

Thank you guys for your beautiful images.

[ali-pcnv]

It would be wonderful if use image upload from php and Ajax after drag and drop and view