Images Browse & Drag and Drop with Preview - React Component - Next.js

Images Browse & Drag and Drop with Preview is a light and simple react component ready to use in your react projects or any projects that are built using react frameworks like Next.js to preview selected and dragged & dropped images.

“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation”.

This project is built using Nextjs which is a react framework. The components built in this project can be used in any react project, all you have to do is just copy the components in your project as well as the CSS and the JavaScript helper code and install the required dependencies.

Click To Select Or Drag & Drop Images

Rotate and Delete One or Multiple Images

This is just the UI for selecting the files. Once the files get dropped, you will need to do something with them. You might want to use a HTTP client like axios or fetch to upload the files to your server, for example.

What is the Language/Framework Used for development?

• JavaScript.
• Next.js framework.

Features:

• Click and select Image(s) in the traditional way.
• 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
• Display Files preview.
• Add and delete images.
• Rotate Images Previews (Rotation is applied only on images previews and it is not applied on the actual images).
• Loading spinner.
• Errors handling.
• User Friendly.
• Fully Responsive.

Code maintenance

Source code is regularly maintained. After each update, it’s better to use the last published version of the project to guaranty code and features quality and optimization.