Join live – Get insights, tips, + Q&A from Sanity developers on our latest releases

Bulk uploading images into Sanity using the Media plugin and drag-and-drop feature.

18 replies
Last updated: Oct 1, 2021
Is it possible to bulk upload images into Sanity?
Oct 1, 2021, 5:54 PM
One option is to install the Media plugin , where you can either drag-and-drop or batch upload.
If you configure an array that takes
type: 'image'
in your schema, you can also drag and drop images directly onto the
+ Add item
button. The images will be uploaded as well as added to the array.
Oct 1, 2021, 8:30 PM
Oct 1, 2021, 9:28 PM
Thanks Chris. That also reminded me of this snippet .
Oct 1, 2021, 9:31 PM
It's better, though, if possible, to "attach" them right away, otherwise we're stuck, because unless you named them in some way that identifies them, you're out of luck if you want to bulk associate them, so that's why I wrote this code.
Oct 1, 2021, 9:32 PM
user H
Oct 1, 2021, 9:32 PM
user H
Oct 1, 2021, 9:32 PM
user L
question for ya with that link you shared (thanks, btw). Our images also live at an external URL (example.com/photo/blah/blah ) would this still work?
Oct 1, 2021, 9:34 PM
user L
question for ya with that link you shared (thanks, btw). Our images also live at an external URL (example.com/photo/blah/blah ) would this still work?
Oct 1, 2021, 9:34 PM
That's more complicated. You'll just get the original file name when you upload, but you'll need to reference that when you call the image.
Oct 1, 2021, 9:36 PM
hmm i don’t think i’m following? Sorry for being a hard head
Oct 1, 2021, 9:38 PM
When you say "will this still work?", do you mean you want to reference them by the original URL?
Oct 1, 2021, 9:39 PM
Yea sorry. So we have an application system that our users will fill out and add their profile image to.From there we ping sanity and create an new document (applicant) and we want to upload the image from their application
into sanity as an image object.
when reading the code file you shared, it leads me to believe the images referenced are local to the script (either in code or on the users machine). our images will be remote. Wasn’t sure if anything major would have to change
Oct 1, 2021, 9:41 PM
Well, they'll come in through the HTTP request, so yes.
Oct 1, 2021, 9:42 PM
It was just to give you an idea, conceptually. Here, the image is uploaded. $asset contains the id that you can then use to attach the image to a document through _type: 'image' and then setting _ref and asset

$asset = $this->client->uploadAssetFromFile('image', $tempFile);

        try {
            $this->client->patch($this->useDocumentId($documentId))
                ->set([$fieldName =>
                        ['_type' => $imageType, 'asset' =>
                            ['_ref' => $asset['_id']]
                        ]
                    ]
                )
                ->commit();
Oct 1, 2021, 9:44 PM
ahh okay thankyou
Oct 1, 2021, 9:53 PM
i can get going with this! appreciate your time 🙂
Oct 1, 2021, 9:53 PM
Are you working in JavaScript?
Oct 1, 2021, 9:53 PM
Because it was just to give you the concept.
Oct 1, 2021, 9:54 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?