Use the Width and Height props to specify the width and height of the component
To access an array of submitted files, it's important to pass in a handleFileSubmit callback function:
handleFileSubmit=(files)=>/* code to handle raw image files */
Optional Props
Use the uploadButtonStyle and submitButtonStyle props to style the respective buttons
The MaxResolution and MaxFileSize props specify the level of compression each image incurs. By default, images have a max height or width of 1920px and a max file size of 1mb
How It Works
This image upload interface accepts the uploading of .png, .jpg, and .jpeg files
Users can swap the position of the images by using drag-and-drop, and this order will be reflected upon submission
Users can delete images from the list
Uploading the same image name will not produce a second copy of that image to appear
Under The Hood
Swapping of image positions is handled using in-line styles, requiring only the two individual images to be re-rendered in constant time
Once uploaded, images are compressed to improve browser performance
A reference to the raw image file is retained in memory via a hashmap
Compression is handled asynchronously, and a loading spinner is provided for user feedback
Upon submission, the individual images in the DOM are references for their order and applied to the raw files in memory, requiring only a single linear runtime operation