Using a custom input component to upload and transform images in Sanity.io.

Hi. I have two image fields. When the first is populated, I want to take its asset.url, create something in a canvas and add the dataUrl into the other image field. Is this a job for a plugin, or a custom input component, or is there some simpler way? Thanks.

what are you trying to do with the two fields? like do an image transformation in-browser and re-upload it to another field? or like provide a default value based on another field?

I’ll pass the asset url from the first field to three.js to wrap a 3D object as a texture, then push the resulting canvas.dataUrl into the other image field. Or that’s the plan anyway.

So the first one!

ah so you’ll be using three.js to create a 3D image? do you want to keep the original upload too?

Yeah I’ll need both. Hence the two fields.

As far as I can tell, a custom input component is just for a single field. But a plugin might allow me to have multiple fields and basically do all the work in React. The docs don’t make the distinction clear at all. I’m not sure about populating the 2nd field at the end though.

for your case, i think i would create an object type with two sub-fields

originalImage

transformedImage

(or similar) then I would create a custom input component for the whole object type (that way it’s like one custom input for two fields)
in this component, you’d have your own image input component. on a file drop, you can apply your transform and then on save button click, you can use the sanity client to upload the assets to sanity and write the asset IDs back to the document

brb. let me find some links

• uploading assets with the sanity client (i believe it accepts a blob too)•
creating a custom input component i think the way you want to do it is to upload the assets to sanity via the client, then use the resulting asset IDs to create a patch in the custom input

Good plan. Thanks User, I’ll give it a go.