JavaScript – Images Select & Drag and Drop with Preview

Images Browse & Drag and Drop with Preview is a JavaScript code ready to use in your project to preview Images before upload.

This project is built using JavaScript and JQuery (JavaScript Library). The script in this project can be used in any front-end project, all you have to do is just copy the HTML, CSS and the JavaScript code into your project and voila! You’re all set!

This project is just a UI for adding, sorting, deleting and rotating the images. Once the images get dropped, sorted or rotated, you will need to do something with them. You might want to use AJAX or an HTTP client like AXIOS to upload the files to your server, for example.

Rotation is applied only on images previews using CSS and it is not applied on the actual images.

The order of the images after sorting and the images rotation degree as well as the image name, size, type and the image file itself are saved in an array “images” so all selected images’ data can be found in one array.

What is the Language/Library Used for development?

• JavaScript.
• JQuery.
• JQuery UI
• Toastr.

Features:

• Drag and drop one or multiple Image(s).
• Click and select Image(s) in the traditional way.
• Display Files preview.
• Add and delete images.
• Sort Images.
• Rotate Images Previews (Rotation is applied only on images previews and it is not applied on the actual images).
• Cover the image file types generally supported by web browsers (APNG, AVIF, GIF, JPEG, PNG, SVG, WebP,…)
• File Type Validation.
• Image size restriction (It is set to 1GB per Image file size).
• File Size Validation
• Loading spinner.
• Errors handling.
• User Friendly.
• Fully Responsive.