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.io – build remarkable experiences at scale

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