Image Editor not working with React (NextJS)

Uppy
1

I’ve been struggling with making ImageEditor work with my React app.

I have added this to init Uppy:

  const uppy = useUppy(() => {
    return new Uppy({
      id: uniqueId + "-UppyUploader",
      restrictions: {
        maxFileSize: 10 * 1024 * 1024, // 10 MB
        allowedFileTypes: ['.jpg', '.jpeg', '.webp', '.png'],
      },
      autoProceed: false,
    })
      .use(ImageEditor, {
        id: uniqueId + "-ImageEditorPluginForUppy",
        quality: 0.8,
        cropperOptions: {
          viewMode: 1,
          background: false,
          autoCropArea: 1,
          responsive: true,
          croppedCanvasOptions: {},
        },
        actions: {
          cropSquare: true,
          cropWidescreen: true,
          cropWidescreenVertical: true,
          flip: true,
          granularRotate: true,
          revert: true,
          rotate: true,
          zoomIn: true,
          zoomOut: true
        }
      })
  })
  .use(ImageEditor, { id: "UppyImageEditor" })

And then this is my dashboard:

 <Dashboard
          key={uniqueId + "UppyDashboard"}
          id={uniqueId + "UppyDashboard"}
          plugins={["ImageEditor",]}
          height={300}
          hideUploadButton={true}
          uppy={uppy}
          metaFields={[
            { id: 'name', name: 'Name', placeholder: 'File name' },
          ]}
        />
      </>

However when i upload my image and click on edit I can only change the name.

image
image978×326 26.6 KB

Did anyone encounter something similar?

2

I solved this issue by adding

import DashboardPlugin from '@uppy/dashboard';
...

.use(DashboardPlugin, {
      id: 'Dashboard',
      showProgressDetails: true,
      note: "Images and video only, 2–3 files, up to 1 MB",
      height: 470,
      width: 1080,
      browserBackButtonClose: true
    })

to my Uppy iniitialization, and also this to useImageEditor:

.use(ImageEditor, {
  target: DashboardPlugin,
})

image
image990×313 27.6 KB

I don’t know if it’s done like this… But it works :smiley: I don’t know if I missed this in the docs, but if not, it would be nice to have this explained a bit more straightforward in the React section. :+1:

3

Last post was incorrect…

I don’t know how it worked before but after I refreshed it crashed… Which is probably because of NextJS server side rendering…

Upon some further testing I discovered that adding

.use(DashboardPlugin)

causes this:

image
image957×416 13 KB

So I’m still at the first problem…

4

The roller coaster continues… I solved it in the end.

The problem was with this from the code from the first post:

.use(ImageEditor, {
  id: "SomeID"   <-- this one
  quality: 0.8,
  cropperOptions: {
    viewMode: 1,
    background: false,
    autoCropArea: 1,
    responsive: true,
    croppedCanvasOptions: {},
  },
  actions: {
    cropSquare: true,
    cropWidescreen: true,
    cropWidescreenVertical: true,
    flip: true,
    granularRotate: true,
    revert: true,
    rotate: true,
    zoomIn: true,
    zoomOut: true
  }
})
.use(ImageEditor, { id: uniqueId + "UppyImageEditor" })

I specified the Id twice, in both .use.

I take back what I said about the docs, seems I wasn’t reading well enough :upside_down_face: