react upload image from computer and display code example

Example 1: react image upload

/* Answer to: "react image upload" */

/*
  "react-images-upload" is a simple component for upload and
  validate (client side) images with preview built with React.js.
  This package use "react-flip-move [1]" for animate the file preview
  images.
  
  Download it here:
  https://www.npmjs.com/package/react-images-upload
  
  or if you need help or don't want to use packages,
  you can watch this video:
  https://www.youtube.com/watch?v=XeiOnkEI7XI

  [1] Link to "react-flip-move", mentioned in the 
  "react-images-upload" summary:
  https://github.com/joshwcomeau/react-flip-move
*/

Example 2: react image upload component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import ImageUploader from 'react-images-upload';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { pictures: [] };
        this.onDrop = this.onDrop.bind(this);
    }

    onDrop(pictureFiles, pictureDataURLs) {
        this.setState({
            pictures: pictureFiles
        });
    }

    render() {
        return (
            <ImageUploader
                withIcon={true}
                buttonText='Choose images'
                onChange={this.onDrop}
                imgExtension={['.jpg', '.gif', '.png', '.gif']}
                maxFileSize={5242880}
            />
        );
    }
}