test-dont-install-2

    0.0.0 • Public • Published

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

    Install

    npm i test-dont-install-2

    DownloadsWeekly Downloads

    0

    Version

    0.0.0

    License

    MIT

    Unpacked Size

    652 kB

    Total Files

    80

    Last publish

    Collaborators

    • gyutaekim