Pintura works via onBeforeFileAdded, but can it replace uppy.use(ImageEditor) ?

[zagarskas]

TLDR: Allow us to swap 'ImageEditor' with 'Pintura' for both onBeforeFileAdded, adding new Dashboard 'edit' button

Pintura can be integrated quite well to hook into the onBeforeFileAdded: useEditorWithUppy() method as shown here, triggering Pintura to open and immediately prompting the user to edit (which is fantastic) https://pqina.nl/blog/editing-images-with-uppy-and-pintura/

However, in the event multiple files are needed (and IRL scenarios where errors are shown to primates who do not read instructions): if the user wants to preview, view or "edit" the image a second time they can not, they must delete it, and I see no way to easily add in Pintura.

Trying to leverage the Image Editor via uppy.use(ImageEditor) does not work https://github.com/transloadit/uppy/blob/main/website/src/docs/image-editor.md

I am not sure if this is a bug report or a feature request. The possibility exists that I am simply not integrating Pintura in "all ways possible" due to lack of documentation.

Suggestions: Allow the uppy.use(ImageEditor) feature to be replaced with Pintura in the following way:

uppy.use(ImageEditor, {
  target: Dashboard,
  alternateEditor: usePintura, // add this as an option
  alternateEditorOnBeforeFileAdded: 
            { } // Pintura Image Editor editor options on new file added
  alternateEditorWhenEditClicked: 
            { } // Pintura Image Editor editor options when the edit button clicked
})

Currently some workarounds I am considering including adding some way to trigger Pintura with a custom button, wholly outside of the Uppy system (via jQuery to detect a "click" on the 'uppy-Dashboard-Item-previewImg') - but this seems to be the wrong direction to head. Ergo this suggestion here.

Some other considerations: [metaFields: []] (https://uppy.io/docs/dashboard/#metaFields) currently trigger the "edit" button for Metadata - which makes sense.

But via Dashboard Options the following could be useful:

    uppy.use(Dashboard, {
        id: 'Dashboard',
        useCustomEditor: Pintura // custom plugin
        editButtonAction () => {
         // allow us to define a custom function here, perhaps Pintura opts: {}
        },
        addCustomButtons () => {
         // allow us to add custom buttons here
        },

Disambiguation between the following would then be needed

• "meta edit"
• "image edit"
• future: media edit, video edit, audio edit, PDF edit... ect...

Also important to note: The only reason I want Pintura added is to leverage the "redact" and the "drawing" features. If the Uppy ImageEditor had the ability to "redact" (even just a black box to be placed over images) this would come in handy. I also see the Pintura editor as superior to the Uppy ImageEditor, and given enough time if the Uppy ImageEditor has the same features, well, then of course I would abandon Pintura. In that case the Uppy ImageEditor needs to be able to hook into onBeforeFileAdded

On the other hand, wiring the edit system to allow plugins to replace uppy.use(ImageEditor) creates the opportunity for others to build Video editors, audio editors and PDF editors... freeing up Uppy devs to focus on Core rather than trying to build elaborate image/video/audio/pdf/document editors...

[arturi]

Hi,

Thanks for the feedback! I mostly got everything, but wanted to clarify this part:

Trying to leverage the Image Editor via uppy.use(ImageEditor) does not work https://github.com/transloadit/uppy/blob/main/website/src/docs/image-editor.md

Do you mean it doesn’t work for your use case, cause you want the "redact" and the "drawing" features, or were you not able to make Image Editor work at all?

[zagarskas]

To clarify: uppy.use(ImageEditor) works fine, I was able to get it working in the default examples provided.

however, I needed the following:

• "redaction" (either by blur or blackbox)
• the ability to trigger the image editor during onBeforeFileAdded (prompting/forcing user to edit)

I feel it important to note the following desired functionality (possible with Pintura): "when single/multiple files are uploaded trigger the image editor and force/prompt the user to crop/edit each image and click PinturaDone before its added into the Uppy/Tus upload queue".

As such, if it is possible to trigger uppy.use(ImageEditor) during onBeforeFileAdded that would be great. I can provide a complete example if disambiguation is needed.

Core concept: https://pqina.nl/pintura/docs/v8/installation/uppy/

Consider how this snippet here forces Pintura to edit the image "in browser" via imageWriter prior to any assembly which causes Pintura popup on "each" upload

  const uppy = new Uppy.Core({

  onBeforeFileAdded: usePinturaEditorWithUppy(
            // Method used to create Pintura Image Editor
            openEditor,

            // Pintura Image Editor editor options
            {
                imageReader: createDefaultImageReader(),
                imageWriter: createDefaultImageWriter({
                    quality: 0.70,
                    mimeType: 'image/jpeg',
                    canvasMemoryLimit: 1000 * 1000, 
                    targetSize: {
                        width: 1000,  
                        height: 1000,
                        fit: 'force', 
                        upscale: true,
                    },
                }),
                                   ...

Ergo, something like this would be great:

  const uppy = new Uppy.Core({

  onBeforeFileAdded: useUppyNativeEditor(

[arturi]

I wonder if this option autoOpenFileEditor satisfies your use case?

[arturi]

@zagarskas?

[schimini]

@arturi sorry to jump into this conversation, i'm trying to do exactly that (trigger the image-editor as soon as the image is added) but nothing happens. That option - autoOpenFileEditor doesn't work for me.

[schimini]

Also idk if it helps but the following approach isn't working either:

 this.uppy.on('file-added', (file) => {
     const dashboard = this.uppy.getPlugin<
              { openFileEditor: (file: UppyFile) => void } & Dashboard>('Dashboard')!;
     console.log(dashboard);
     dashboard.openFileEditor(file);
});