react-images-uploader-continued
v1.2.1
Published
React.js component for uploading images to the server.
Downloads
12
Maintainers
Readme
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 ismax
property 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,
}