Next Perpendicular Moonlanding


    1.0.0 • Public • Published

    React Images Uploader


    React.js component for uploading images to the server



    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 (
    				onLoadEnd={(err) => {
    					if (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 (
    				onLoadEnd={(err) => {
    					if (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);'/multiple', imagesUpload(
    ));'/notmultiple', imagesUpload(
    app.listen(9090, () => {
    	console.log('Listen: 9090');

    Other servers


    • 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,


    npm i test-dont-get-it

    DownloadsWeekly Downloads






    Unpacked Size

    634 kB

    Total Files


    Last publish


    • gyutaekim