Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

How to Enable Multi-Select for Image Upload

10 replies
Last updated: Dec 18, 2020
Hello guys , i am new to sanity and i have a 2 little problems .. first one is i did this schema to upload multiple images but i can't figure out how to get their url.. this is the schema for multi images upload
{
      
name: 'ProjectImages',
      
title: 'Project Images',
      
type: 'array',
      
of: [{ type: 'image' }]
     
},
and this is how i tried to get the url in my react frontend

ProjectImages{
        
asset->{
       
_id,
       
url
      
}
     
}

my second problem is how to enable multi-select for image upload because i keep uploading image by image
please help me i will appreciate it so much
Dec 13, 2020, 1:27 PM
Add 
[]
 to traverse the array:
ProjectImages[]{
        asset->{
       _id,
       url
      }
     }
You can also use the 
@sanity/image-url
 package to generate URLs from the 
_id
 / 
_ref
, that is without having to join in the asset document. https://www.sanity.io/docs/image-url
Dec 13, 2020, 2:58 PM
If you have an array of images, you can drag and drop multiple files onto it. We should probably improve the UX so that you can also get a file selector that allows multiple files though.
Dec 13, 2020, 2:59 PM
Thank you so much !!
Dec 13, 2020, 3:34 PM
user Y
Is there a way to add a caption field to individual images in this sort of set up?If I add a 
string
type object to my array containing the images nothing shows up in the studio.Thank you!
Dec 17, 2020, 4:56 PM
user H
Send the schema where you have added the string.
Dec 17, 2020, 5:54 PM
user C

{

name: 'imageButtons',

type: 'object',

title: 'Image Buttons',

fields: [

{

name: 'title',

type: 'string',

title: 'Title'

},

{

type: 'array',

name: 'image',

title: 'Gallery Image',

of: [

{ type: 'image', options: { hotspot: true } },

{

name: 'caption',

type: 'string',

title: 'Caption',

options: {

isHighlighted: true _// <-- make this field easily accessible_

}

}

],

options: {

layout: 'grid'

}

}

]

}
Dec 17, 2020, 5:55 PM
You have to add the caption for the image in the fields array.
You can find an example here
https://www.sanity.io/docs/image-type
Dec 17, 2020, 5:59 PM
user C
Thank you Harshal. I initially tried that but then I only get a single caption field for the entire array of multiple images.What I'm trying to do is attach a unique caption to each image within my array - do you know if this is doable?
Thanks again!
Dec 17, 2020, 6:21 PM
{
  
'name': 'imageButtons',
  
'type': 'object',
  
'title': 'Image Buttons',
  
'fields': [
    
{
      
name: 'title',
      
type: 'string',
      
title: 'Title'
    
},
    
{
      
type: 'array',
      
name: 'image',
      
title: 'Gallery Image',
      
of: [
        
{ type: 'image', options: { hotspot: true },
        
fields: [{
          
name: 'caption',
          
type: 'string',
          
title: 'Caption',
          
options: {
            
isHighlighted: true // <-- make this field easily accessible
          
}
        
}]},
              
],
      
options: {
        
layout: 'grid'
      
}
    
}
  
]

}
Dec 18, 2020, 10:21 AM
works perfect, thank you!!
Dec 18, 2020, 1:00 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.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Rendering nested block contentJan 18, 2021
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Next.js and Vercel - Error! No Output Directory named "dist" foundAug 8, 2022
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022
Error in custom validation rule for schema in Slack threadAug 18, 2023
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar