React Images Uploader
React.js component for uploading images to the server
Examples
Example for multiple images:
import React, { Component } from 'react';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';
export default class MyUploader extends Component {
render() {
return (
<ImagesUploader
url="http://localhost:9090/multiple"
optimisticPreviews
onLoadEnd={(err) => {
if (err) {
console.error(err);
}
}}
label="Upload multiple images"
/>
);
}
}
Example for one picture:
import React, { Component } from 'react';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';
export default class MyUploader extends Component {
render() {
return (
<ImagesUploader
url="http://localhost:9090/notmultiple"
optimisticPreviews
multiple={false}
onLoadEnd={(err) => {
if (err) {
console.error(err);
}
}}
label="Upload a picture"
/>
);
}
}
Example server (Node.js, Express)
you need to install cors-prefetch-middleware and images-upload-middleware from npm.
import express from 'express';
import corsPrefetch from 'cors-prefetch-middleware';
import imagesUpload from 'images-upload-middleware';
const app = express();
app.use('/static', express.static('./server/static'));
app.use(corsPrefetch);
app.post('/multiple', imagesUpload(
'./server/static/multipleFiles',
'http://localhost:9090/static/multipleFiles',
true
));
app.post('/notmultiple', imagesUpload(
'./server/static/files',
'http://localhost:9090/static/files'
));
app.listen(9090, () => {
console.log('Listen: 9090');
});
Other servers
Props
-
url: string- server url; -
classNamespace: string- namespace for all classNames (default: 'iu-'); -
inputId: string- id and name for hidden input type file. Used for htmlFor in label (default: 'filesInput'); -
label: string- label text; -
images: Array- an array of references to the already uploaded images; -
disabled: boolean; -
onLoadStart: function()- callback, which is called when the download starts; -
onLoadEnd: function(error: { message: string, ... }, response?: JSON)Error messages:
invalid response type- additional params: response, fileName (imagesUploader);server error- additional params: status (response status), fileName (imagesUploader);exceeded the number- if there ismaxproperty and files count > max;file type error- additional params: type (file type), fileName (imagesUploader);
-
deleteImage: function(key: number)- callback which is called when the image has been deleted from the list; -
clickImage: function(key: number)- callback which is called when the image preview is clicked; -
optimisticPreviews: boolean- enables optimistic previewsdefault: false; -
multiple: boolean- allows to upload a bunch of images !default: true!; -
image: string- this property works only when multiple: false! already loaded picture; -
notification: string- this property works only with multiple: false! notification text; -
max: number- the maximum number of pictures for a single upload; -
color: string- color for text and svgdefault: '#142434'; -
disabledColor: string- color for text and svg in disabled modedefault: '#bec3c7'; -
borderColor: string- border colordefault: '#a9bac8'; -
disabledBorderColor: string- border color in disabled modedefault: '#bec3c7'; -
notificationBgColor: string- background color for notificationdefault: 'rgba(0, 0, 0, 0.3)'; -
notificationColor: string- text and svg color for notificationdefault: '#fafafa'; -
deleteElement: string|element- element for removing images; -
plusElement: string|element- element for adding images;
classNames: {
container: string,
label: string,
deletePreview: string,
loadContainer: string,
dropzone: string,
pseudobutton: string,
pseudobuttonContent: string,
imgPreview: string,
fileInput: string,
emptyPreview: string,
filesInputContainer: string,
notification: string,
}
styles: {
container: Object,
label: Object,
deletePreview: Object,
loadContainer: Object,
dropzone: Object,
pseudobutton: Object,
pseudobuttonContent: Object,
imgPreview: Object,
fileInput: Object,
emptyPreview: Object,
filesInputContainer: Object,
notification: Object,
}