react-image-upload.js

onFormSubmit = e => {
    e.preventDefault();
    this.fileUpload(this.state.image);
  };

  onChange = e => {
    const files = e.target.files || e.dataTransfer.files;
    if (!files.length) return;
    this.createImage(files[files.length - 1]);
  };

  onDrop = pictureFiles => {
    if (!pictureFiles.length) return;
    this.createImage(pictureFiles[pictureFiles.length - 1]);
  };

  createImage = file => {
    const reader = new FileReader();
    reader.onload = e => {
      this.setState({
        image: e.target.result,
      });
    };
    reader.readAsDataURL(file);
  };

  fileUpload = image => {
    const url = `${API_URL}merchant/images`;
    const formData = {
      file: image,
      description: 'this is some description',
      make_thumbnail: this.state.makeThumbnail,
      make_cover: this.state.makeCover,
      type: 'all',
    };
    this.setState({ uploading: true });
    return post(url, formData, {
      onUploadProgress: progressEvent => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        this.setState({ percentCompleted });
      },
      headers: {
        id: this.props.auth.data.id,
        Authorization: this.props.auth.data.token,
      },
    }).then(response => {
      // console.log(response.status);
      if (response.status === 200) {
        this.props.uploadSuccess(response.data.data);
        if (this.state.makeThumbnail) {
          this.props.updateThumbnail(response.data.data.small_image_url);
        }
        this.setState({
          uploading: false,
          image: '',
          makeCover: false,
          makeThumbnail: false,
          description: '',
        });
        this.notify();
      } else {
        // console.log(response.data.mgs);
        this.notifyError(response.data.mgs);
      }

      // this.uploadRef.inputElement.value = null;
    });
  };

  notify = () => toast.info('Upload Successful !');

  notifyError = msg => toast.error(msg);