Load Multiple Images

InputMultiImage

import React, { ChangeEvent } from 'react';
import cx from 'classnames';
import uuid from 'uuid';

import photoIcon from 'Common/assets/photo.svg';
import './index.css';

export interface IProps {
  setImgUrl(img: {
    id: string;
    src: string;
  });
  setDefaultAvatar();
}

export default class InputMultiFile extends React.Component<IProps> {

  cacheImg: HTMLImageElement;
  fileInput: React.RefObject<HTMLInputElement>;

  constructor(props) {
    super(props);
    this.fileInput = React.createRef();
  }

  handleButton = (e) => {
    e.preventDefault();
    if (this.fileInput.current) {
      this.fileInput.current.click();
    }
  }

  getFileFromInput(file: File): Promise<string> {
    return new Promise( (resolve, reject) => {
        const reader = new FileReader();
        reader.onerror = reject;
        reader.onload = () => { resolve(reader.result as string); };
        reader.readAsDataURL(file); // here the file can be read in different way Text, DataUrl, ArrayBuffer
    });
  }

  manageUploadedFile(binary: string, file: File, imageId: string) {
    this.props.setImgUrl({
      id: imageId,
      src: binary
    });
  }

  clearFile = (input: HTMLInputElement) => {
    input.value = '';
  }

  handleInput = (event: ChangeEvent<HTMLInputElement>) => {
    event.persist();
    if (event.target.files) {

      if (!event.target.files.length) {
        return this.props.setDefaultAvatar();
      }
      
      Array.from(event.target.files).forEach(file => {
        const imageId = uuid();
        this.props.setImgUrl({id: imageId, src: ''});
        this.getFileFromInput(file)
            .then((binary) => {
                this.manageUploadedFile(binary, file, imageId);
                this.clearFile(event.target);
            }).catch((reason) => {
                console.log(`Error during upload ${reason}`);
                event.target.value = ''; // to allow upload of same file if error occurs
            });
      });

    }
  }

  public render() {
    const avatarHintContainerId = uuid() + '-hint';
    return (
      <div className={cx("InputMultiFile")}>
        <input multiple={true} onChange={this.handleInput} ref={this.fileInput} type="file" style={{ display: 'none' }} />
        <button onClick={this.handleButton} className="InputMultiFile-avatar-button" aria-describedby={avatarHintContainerId}>
          <img src={photoIcon} className="InputMultiFile-avatar-button-icon" aria-hidden="true" />
          Upload Photos
        </button>

        <div className="InputMultiFile-avatar-button-info" id={avatarHintContainerId}>JPG or PNG. Max. file size 5MB</div>
      </div>
    );
  }
}