Images Upload with Preview React Component 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 upload Images files.
“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 install the required dependencies.
This is just the front-end code. 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 send the files back to your server and upload them somewhere, for example.
What is the Language/Framework Used for development?
– Next.js framework.
– Drag and drop one or multiple Image(s).
– 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 5GB 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).
– Errors handling.
– User Friendly.
– Fully Responsive.