Original size plus crop upload

Uppy
1

I have a need to allow users to crop an image but I would like to also send the original image with it, Is this possible and if so how?

Much appreciated.

2

I was able to make this happen by taking a copy of the original file in the file-editor:start event, removing it in the file-editor:cancel event, and flagging it as ready in the file-editor:complete event.

Then in the upload-success event process a manual fetch to send the original to the server.

3

Hello @achartier can you provide more details on your uppy setup ? what do you mean by “I would like to also send the original image with it” are you using uppy’s listening for specific uppy events and sending the result to backend is that what you meant ? , please provide more context , we’ll be happy to help you out.

4

I am allowing use of the editor in the dashboard. Once the image is edited and saved it is the edited image the Uppy uploads. I wanted to also keep the original non-edited version. As in my second post I was able to do so as described.

5

Hello @argotechnica right now the Image Editor’s save() overwrites the file in place, so their is no native way to preserve the original hence you’ll have to snapshot this by yourself. couple of points regarding your approach

  1. Snapshot the original on file-added rather than file-editor:start because file-editor:start fires every time the editor opens, so on a second edit your snapshot would capture the already cropped image instead of the true original.

  2. Instead of a manual fetch() on upload-success, consider re-adding the original via uppy.addFile() on file-editor:complete with a meta flag like for e.g. { isOriginal: true }. That way the original is uploaded through your normal uploader you get progress, retries and resumability for free, and the server just reads the meta to tell the two apart.

6

Excellent points thank you. It didn’t occur to me what would happen if they tried to edit twice.