Uploading multiple images in Sanity.io using drag and drop

6 replies
Last updated: Jul 23, 2020
Is there a way to model so that I can upload multiple images at once?
AI Update

Yes, you can definitely model multiple images by using an array field with the image type. This allows content editors to upload and manage multiple images in a single field.

Here's how to set it up in your schema:

{
  name: 'gallery',
  title: 'Image Gallery',
  type: 'array',
  of: [
    {
      type: 'image',
      options: {
        hotspot: true
      },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative text',
        },
        {
          name: 'caption',
          type: 'string',
          title: 'Caption',
        }
      ]
    }
  ]
}

This creates an orderable array where editors can:

  • Upload multiple images by clicking "Add item"
  • Reorder images via drag-and-drop
  • Add custom metadata to each image (like alt text and captions)
  • Enable hotspot and crop functionality for each image

The array automatically assigns a unique _key to each image, which helps track items across changes. You can also take advantage of Sanity's copy/paste functionality to duplicate entire arrays or individual images between documents.

If you need to store additional metadata like color palette or EXIF data, you can add the metadata option to extract that information automatically:

{
  type: 'image',
  options: {
    hotspot: true,
    metadata: ['blurhash', 'lqip', 'palette', 'exif']
  }
}

This approach gives you a flexible, structured way to manage multiple images while maintaining all the benefits of Sanity's asset management system.

If you make an array of images, you can drag'n'drop multiple images onto it.
{
  name: 'gallery',
  type: 'array',
  of: [
    { type: 'image' }
  ],
  options: {
    layout: 'grid'
  }
}

Better UX for batch-uploading is on the roadmap šŸ™‚
If you make an array of images, you can drag'n'drop multiple images onto it.
{
  name: 'gallery',
  type: 'array',
  of: [
    { type: 'image' }
  ],
  options: {
    layout: 'grid'
  }
}

Thanks
Knut MelvƦr
. I couldn’t figure out where to drag’n drop. Finally got it, thanks!
can’t wait to see the UX improvements šŸ˜‰
me too šŸ™‚

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?