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.
Click To Select Or Drag & Drop Images
Rotate One or Multiple Images
Organize Images with drag & drop
What is the Language/Library Used for development?
- JQuery UI
- 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.