Client side Image Upload To Cloudinary React Dropzone

react-cloudinary.js

  // get's called from react dropzone when file is dropped
  onImageDrop = (files) => {
    this.handleImageUpload(files[0]);
  }

  async handleImageUpload(file) {
    const data = new FormData();
    data.append('file', file);
    data.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
    const upload = await fetch(CLOUDINARY_UPLOAD_URL, {
      method: 'POST',
      body: data,
    });
    const image = await upload.json();
    // then do something with image
  }