How to upload images to S3 and send back presigned URL instead?

[trancethehuman]

I'm trying to wrap my head around how to capture the image when dropping it into the editor in order to upload it to S3 first before sending a pre-signed URL back for display?

Something similar to this: https://github.com/editor-js/image

tools: {
    ...
    image: {
      class: ImageTool,
      config: {
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
        }
      }
    }
  }

[zbeyens]

Any async operation should be handled in a React component.

[12joan]

You can also trigger an upload promise from the onDrop handler of a Plate plugin, and then perform the insertion when it succeeds. That's what I do in my app.

[trancethehuman]

@zbeyens @12joan would this require building a custom plugin? Do you have an example code of how to do this?

[12joan]

@trancethehuman See the source code for Plate's cloud plugin as an example. The cloud plugin does the same thing you want, but is coupled to a specific backend. You might be able to use it as a starting point in building an S3-compatible image upload plugin.

plate/packages/cloud/src/cloud/createCloudPlugin.ts

Line 17 in 2ac29dc

onDrop: (editor) => (e) => onDropCloud(editor, e),

[trancethehuman]

@12joan thanks for sharing the example. It looks like what I need.

I already have the backend setup to upload and send back a presigned URL. Seems like I just need to modify the uploadFile function from your example to hit my endpoint instead of cloud.

How does the example take the URL after upload and display that at the right position in the doc? If you could just point that out in the example, that’d be great too.

[12joan]

Here are the relevant lines to perform the insertion. Note that the cloud plugin inserts a placeholder node before the upload starts, which contains a progress bar. If you only want to perform the insertion on success, your code will be a lot simpler; you can just call insertNodes with the path from findEventRange.

plate/packages/cloud/src/cloud/handlers.ts

Lines 16 to 26 in 2ac29dc

	e.preventDefault();
	e.stopPropagation();
	/**
	* When we drop a file, the selection won't move automatically to the drop
	* location. Find the location from the event and upload the files at that
	* location.
	*/
	const at = findEventRange(editor, e);
	if (!at) return false;
	select(editor, at);

plate/packages/cloud/src/cloud/uploadFiles.ts

Lines 74 to 84 in 2ac29dc

	onSuccess(e) {
	const fileEvent = createFileEvent(id, e.clientFile);
	const { url } = e.hostedFile;
	if (fileEvent.type === 'image') {
	editor.cloud.imageFileHandlers?.onSuccess?.({ ...fileEvent, url });
	} else {
	editor.cloud.genericFileHandlers?.onSuccess?.({ ...fileEvent, url });
	}
	},
	});
	};

plate/packages/cloud/src/image/withCloudImage.ts

Lines 52 to 103 in 2ac29dc

	editor.cloud.imageFileHandlers = {
	onStart(e) {
	const { width, height } = resizeIn(
	{ width: e.width, height: e.height },
	{ width: maxInitialWidth, height: maxInitialHeight }
	);
	const node: TCloudImageElement = {
	type: 'cloud_image',
	url: e.id,
	bytes: e.file.size,
	width,
	height,
	maxWidth: e.width,
	maxHeight: e.height,
	children: [{ text: '' }],
	};
	insertNode<Value>(editor, node);
	editor.cloud.uploadStore.set.upload(e.id, {
	status: 'progress',
	url: e.url,
	sentBytes: 0,
	totalBytes: e.file.size,
	finishPromise,
	});
	},
	onProgress(e) {
	editor.cloud.uploadStore.set.upload(e.id, {
	status: 'progress',
	url: e.url,
	sentBytes: e.sentBytes,
	totalBytes: e.totalBytes,
	finishPromise,
	});
	},
	onError(e) {
	const upload: UploadError = {
	status: 'error',
	url: e.url,
	message: e.message,
	};
	editor.cloud.uploadStore.set.upload(e.id, upload);
	deferredFinish.resolve(upload);
	},
	onSuccess(e) {
	const upload: UploadSuccess = {
	status: 'success',
	url: e.url,
	};
	editor.cloud.uploadStore.set.upload(e.id, upload);
	deferredFinish.resolve(upload);
	},
	};

[ArshCypherZ]

found exact solution yet? i have the same problem with my text to image api

[trancethehuman]

Was able to do this but struggle with replicating Plate Cloud's ability to insert a placeholder while the image is uploading.

Wondering if @12joan has any pointers?

[12joan]

The way I have my app set up, files have a static ID that is acquired from the server before the upload starts, and which can be used after the upload to retrieve the file.

Here's the full workflow:

1. Acquire a file ID and presigned upload URL from the server
2. Insert an ELEMENT_ATTACHMENT node with the file ID
3. Initiate the upload, storing the upload progress and state in memory, associated with the file ID
4. The attachment component checks if there's an in-progress upload matching its file ID
   • If so, it shows a progress bar
   • Otherwise, it uses its file ID to fetch a presigned download URL from the server
5. When the upload finishes, there is no need to update the ELEMENT_ATTACHMENT node since its file ID is still valid

Some additional considerations:

• Make sure to filter out any ELEMENT_ATTACHMENT nodes whose uploads are still in progress when saving the editor value, just in case the upload fails
• Cancel the upload if the ELEMENT_ATTACHMENT node is removed from the editor while the upload is in progress