Having a progress bar indicator of how the upload is progressing and how much time remains before the upload is complete on your website will help your visitors know where they’re headed, especially when dealing with slow internet or large files.
This Item provides a light and simple react component ready to use in your react projects to upload images to server with progress bar to display the upload progress.
The upload progress information is implemented using the popular package Axios and it is used to calculate the percentage, upload speed and remaining time.
In this project the images are uploaded to Next.js backend via Next.js API routes and formidable is used to parse the form data. You can use the provided API endpoint to upload files to the backend or you can use your custom server to upload the files.
Rotation is applied only on images previews and it is not applied on the actual images, the rotation degree value is sent in the post request with each file to the server, you can use it to implement your own logic to rotate the image, for example.