Skip to content
React.js component for uploading images to the server
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Fix error when "Click cancel after the file dialog showing up makes t… Jan 8, 2019
examples Fix error when "Click cancel after the file dialog showing up makes t… Jan 8, 2019
flow-typed/npm write basic functionality Dec 12, 2016
flow add flow Nov 26, 2016
hot-reload fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
lib Fix error when "Click cancel after the file dialog showing up makes t… Jan 8, 2019
server update and compile new version Jul 19, 2017
src Fix error when "Click cancel after the file dialog showing up makes t… Jan 8, 2019
.babelrc add flow Nov 26, 2016
.editorconfig add editorconfig, eslintrc and update hot react-hot-loader Nov 26, 2016
.eslintrc add editorconfig, eslintrc and update hot react-hot-loader Nov 26, 2016
.flowconfig add flow-typed and fix flow warning Dec 11, 2016
.gitignore update and compile new version Jul 19, 2017
.jshintrc add jshint settings May 19, 2016
.npmignore add hot-reload to .npmignore Dec 18, 2016
LICENSE add license May 19, 2016
README.md add onClick feature on image preview #14 Mar 15, 2018
font.css fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
font.css.json fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
gulpfile.js fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
package-lock.json fix react-progress-button import and 1.2.0-rc1 Mar 30, 2018
package.json fix react-progress-button import and 1.2.0-rc1 Mar 30, 2018
styles.css fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
styles.css.json lead-up Dec 12, 2016
webpack.config.js fix bugs, add all props, add accept to input, refactoring Dec 18, 2016
yarn.lock Fix error when "Click cancel after the file dialog showing up makes t… Jan 8, 2019

README.md

React Images Uploader

NPM

React.js component for uploading images to the server

Demo

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 is max 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 previews default: 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 svg default: '#142434';

  • disabledColor: string - color for text and svg in disabled mode default: '#bec3c7';

  • borderColor: string - border color default: '#a9bac8';

  • disabledBorderColor: string - border color in disabled mode default: '#bec3c7';

  • notificationBgColor: string - background color for notification default: 'rgba(0, 0, 0, 0.3)';

  • notificationColor: string - text and svg color for notification default: '#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,
}
You can’t perform that action at this time.