tdi

test-dont-install-2

React.js component for uploading images to the server

Showing:

Popularity

Downloads/wk

0

GitHub Stars

170

Maintenance

Last Commit

2yrs ago

Contributors

9

Package

Dependencies

13

Size (min+gzip)

61.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial