Not able to use Image Editor in react Dashboard

Hi All,

Greatly appreciate any help - I cannot get the Image Editor to show.

I’m using the DashboardModal react component. Also tried the Dashboard react component.

I’m able to successfully upload the file. The webcam module works. I just cannot edit/crop the image before upload. I don’t see the edit icon next to the thumbnail.

import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import Uppy from '@uppy/core';
import Webcam from '@uppy/webcam';
import XHRUpload from '@uppy/xhr-upload';
import ImageEditor from '@uppy/image-editor';
import { DashboardModal } from '@uppy/react';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';
import '@uppy/webcam/dist/style.css';
import '@uppy/image-editor/dist/style.css';
import { apiBaseUrl } from '../../constants';
import { getAccessToken } from '../../authService';

const Uploader = ({ id }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const uppy = useMemo(() => {
    return new Uppy({
      id,
      allowMulipleUploads: false,
      logger: Uppy.debugLogger,
      restrictions: {
        maxFileSize: 15 * 1024 * 1024,
        maxNumberOfFiles: 1,
        allowedFileTypes: ['.jpg', '.jpeg', 'gif', '.png'],
      },
    })
      .use(XHRUpload, {
        id: 'XHRUploader',
        endpoint: `${apiBaseUrl}/media`,
        formData: true,
        fieldName: 'file',
        headers: {
          authorization: `Bearer ${getAccessToken()}`,
        },
        limit: 1,
        getResponseData(responseText) {
          console.log(responseText);
          return {
            fileName: responseText,
          };
        },
      })
      .use(ImageEditor, {
        id: 'ImageEditor',
        quality: 0.8,
        cropperOptions: {
          viewMode: 1,
          background: false,
          autoCropArea: 1,
          responsive: true,
        },
      })
      .use(Webcam, {
        id: 'Webcam',
        modes: ['picture'],
      })
      .on('upload-success', (file, response) => {
        console.log('response.status', response.status);
        console.log('response.body', response.body);
      });
  }, [id]);

  useEffect(() => {
    return () => uppy.close();
  }, [uppy]);

  const handleClose = () => {
    setIsModalOpen(false);
  };

  const handleOpen = () => {
    setIsModalOpen(true);
  };

  return (
    <div>
      <button onClick={handleOpen}>Upload some music</button>
      <DashboardModal
        uppy={uppy}
        closeModalOnClickOutside
        open={isModalOpen}
        onRequestClose={handleClose}
        plugins={['Webcam', 'ImageEditor']}
      />
    </div>
  );
};

Uploader.propTypes = {
  id: PropTypes.string,
};

export default Uploader;

Thanks, Nim

[getup8]

Just to add, I think it’d be nice to actually have a setting that auto-directs users to the image editor upon file selection. This may be a small use case, but in the case of just uploading a single, say, user profile photo that you want to be a square, it would be a nice user experience.

[hunterbecton]

I figured it out! After searching the Dashboard docs you have to pass in the metaFields in order to enable the edit button. My component now looks like this:

return (
        <div>
            <button onClick={handleOpen}>Upload profile</button>
            <DashboardModal
                uppy={uppy}
                closeModalOnClickOutside
                open={isModalOpen}
                onRequestClose={handleClose}
                plugins={['Instagram', 'ImageEditor']}
                metaFields={[
                    { id: 'name', name: 'Name', placeholder: 'File name' },
                ]}
            />
        </div>
    )