1.1.6-b • Published 1 year ago
react-image-upload-interface v1.1.6-b
Image Uploader
- A simple image uploading interface for React
Installation
npm i react-image-upload-interface
import { ImageUploader } from 'react-image-upload-interface'
Usage
<ImageUploader
Width='80vh'
Height='60vh'
submitButtonStyle={submitButtonStyle}
handleFileSubmit={handleFileSubmit}
/>
Required Props
- 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
Contributions
- Authored by Stephen Rivas
- To contribute to this repo:
- fork, clone and submit a feature branch as a pull request
1.1.6-b
1 year ago
1.1.5-b
1 year ago
1.1.4-b
1 year ago
1.1.3-b
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago