vutoan266 / React Images Uploading
Licence: mit
The simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.
Stars: ✭ 80
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Images Uploading
Uploadcare Widget
Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
Stars: ✭ 183 (+128.75%)
Mutual labels: image, images, upload, uploader
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (+15%)
Mutual labels: image, upload, uploader
React Native Cached Image
CachedImage component for react-native
Stars: ✭ 890 (+1012.5%)
Mutual labels: image, images
Cometa
Super fast, on-demand and on-the-fly, image processing.
Stars: ✭ 8 (-90%)
Mutual labels: image, images
Upload Image To Smms By Automator
Drag your image to me, I will upload it to SM.MS automatically and backup info to iCloud. 只需拖拽图片即可轻松上传至 SM.MS 图床并且复制链接,所有图片和链接信息会被备份至 iCloud 方便后期检索。
Stars: ✭ 15 (-81.25%)
Mutual labels: image, upload
Laravel Imageup
Auto Image & file upload, resize and crop for Laravel eloquent model using Intervention image
Stars: ✭ 646 (+707.5%)
Mutual labels: image, upload
Chibisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 657 (+721.25%)
Mutual labels: upload, uploader
Flickrsync
A command line tool to synchronise, upload, download, pictures between the local file system and Flickr. Image hash signature of the picture is used to uniquely identify the image.
Stars: ✭ 14 (-82.5%)
Mutual labels: image, upload
Bulletproof
PHP secure Image uploader, with a nice API
Stars: ✭ 352 (+340%)
Mutual labels: image, upload
Uploadcare Php
PHP API client that handles uploads and further operations with files by wrapping Uploadcare Upload and REST APIs.
Stars: ✭ 77 (-3.75%)
Mutual labels: upload, uploader
Derpibooru Downloader
Downloads images from derpibooru.org using a variety of options
Stars: ✭ 45 (-43.75%)
Mutual labels: image, images
Droply Js
Droply JS, a new responsive and cross browser chunk uploader with DragDrop and File Preview capabilities (HTML5/CSS3)
Stars: ✭ 50 (-37.5%)
Mutual labels: upload, uploader
Oblique
With Oblique explore new styles of displaying images
Stars: ✭ 633 (+691.25%)
Mutual labels: image, images
Gphotos Uploader Cli
Command line tool to mass upload media folders to your google photos account(s) (Mac OS / Linux)
Stars: ✭ 502 (+527.5%)
Mutual labels: upload, uploader
Ueberzug
ueberzug is a command line util which allows to display images in combination with X11
Stars: ✭ 711 (+788.75%)
Mutual labels: image, images
Laravel Medialibrary
Associate files with Eloquent models
Stars: ✭ 4,743 (+5828.75%)
Mutual labels: images, upload
Laravel Simple Uploader
Simple file uploader for Laravel 5.
Stars: ✭ 59 (-26.25%)
Mutual labels: upload, uploader
Npm Gif
Replace NPM install's progress bar with a GIF!
Stars: ✭ 332 (+315%)
Mutual labels: image, images
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (+340%)
Mutual labels: image, upload
react-images-uploading
The simple images uploader applied Render Props
pattern. (You can read more about this pattern here).
This approach allows you to fully control UI component and behaviours.
Installation
npm
npm install --save react-images-uploading
yarn
yarn add react-images-uploading
Usage
You can check out the basic demo here:
- Javascript: https://codesandbox.io/s/react-images-uploading-demo-u0khz
- Typescript: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
- Server Side rendering (NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2
Basic
import React from 'react';
import ImageUploading from 'react-images-uploading';
export function App() {
const [images, setImages] = React.useState([]);
const maxNumber = 69;
const onChange = (imageList, addUpdateIndex) => {
// data for submit
console.log(imageList, addUpdateIndex);
setImages(imageList);
};
return (
<div className="App">
<ImageUploading
multiple
value={images}
onChange={onChange}
maxNumber={maxNumber}
dataURLKey="data_url"
>
{({
imageList,
onImageUpload,
onImageRemoveAll,
onImageUpdate,
onImageRemove,
isDragging,
dragProps,
}) => (
// write your building UI
<div className="upload__image-wrapper">
<button
style={isDragging ? { color: 'red' } : undefined}
onClick={onImageUpload}
{...dragProps}
>
Click or Drop here
</button>
<button onClick={onImageRemoveAll}>Remove all images</button>
{imageList.map((image, index) => (
<div key={index} className="image-item">
<img src={image['data_url']} alt="" width="100" />
<div className="image-item__btn-wrapper">
<button onClick={() => onImageUpdate(index)}>Update</button>
<button onClick={() => onImageRemove(index)}>Remove</button>
</div>
</div>
))}
</div>
)}
</ImageUploading>
</div>
);
}
Validation
...
{({ imageList, onImageUpload, onImageRemoveAll, errors }) => (
errors && <div>
{errors.maxNumber && <span>Number of selected images exceed maxNumber</span>}
{errors.acceptType && <span>Your selected file type is not allow</span>}
{errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
{errors.resolution && <span>Selected file is not match your desired resolution</span>}
</div>
)}
...
Drag and Drop
...
{({ imageList, dragProps, isDragging }) => (
<div {...dragProps}>
{isDragging ? "Drop here please" : "Upload space"}
{imageList.map((image, index) => (
<img key={index} src={image.data_url} />
))}
</div>
)}
...
Props
parameter | type | options | default | description |
---|---|---|---|---|
value | array | [] | List of images | |
onChange | function | (imageList, addUpdateIndex) => void | Called when add, update or delete action is called | |
dataURLKey | string | dataURL | Customized field name that base64 of selected image is assigned to | |
multiple | boolean | false | Set true for multiple chooses |
|
maxNumber | number | 1000 | Number of images user can select if mode = multiple
|
|
onError | function | (errors, files) => void | Called when it has errors | |
acceptType | array | ['jpg', 'gif', 'png'] | [] | The file extension(s) to upload |
maxFileSize | number | Max image size (Byte) and it is used in validation | ||
resolutionType | string | 'absolute' | 'less' | 'more' | 'ratio' | Using for image validation with provided width & height | |
resolutionWidth | number | > 0 | ||
resolutionHeight | number | > 0 |
Note
resolutionType
value | description |
---|---|
absolute | image's width === resolutionWidth && image's height === resolutionHeight |
ratio | (resolutionWidth / resolutionHeight) === (image width / image height) |
less | image's width < resolutionWidth && image's height < resolutionHeight |
more | image's width > resolutionWidth && image's height > resolutionHeight |
Exported options
parameter | type | description |
---|---|---|
imageList | array | List of images to render. |
onImageUpload | function | Called when an element is clicks and triggers to open a file dialog |
onImageRemoveAll | function | Called when removing all images |
onImageUpdate | (updateIndex: number) => void | Called when updating an image at updateIndex . |
onImageRemove | (deleteIndex: number | number[]) => void | Called when removing one or list image. |
errors | object | Exported object of validation |
dragProps | object | Native element props for drag and drop feature |
isDragging | boolean | "true" if an image is being dragged |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
vutoan266 💻 🤔 📖 🚧 ⚠️ 👀 |
David Nguyen 💻 🤔 📖 👀 |
DK 💻 🚇 🤔 👀 📖 |
Isaac Maseruka 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].