Allow multiple assets/images to be selected from asset source for an array of `image`.

[ptimson]

trafficstars

Is your feature request related to a problem? Please describe. When using an array of images you currently have to select one at a time from an asset source and can't currently select multiple images that have been uploaded or ones from the sanity-plugin-media asset source. This is very frustrating when needing to select more than a couple of images for an image gallery etc.

{
      type: 'array',
      name: 'images',
      title: 'Images',
      of: [{ type: 'image', name: 'image' }],
}

I have done the work to enable multiple selections from sanity-plugin-media so when it calls the onSelect multiple items are populated in the array, and I can submit a PR for this functionality. However, this won't work currently with the ImageInput as it is hardcoded to use selectionType="single", and the handler (handleSelectAssetFromSource) calls handleSelectAssetFromSource which only handles the first item in the array.

<Component
  selectedAssets={[imageAsset]}
  assetType="image"
  accept={accept}
  selectionType="single"
  onClose={this.handleAssetSourceClosed}
  onSelect={this.handleSelectAssetFromSource}
/>

Describe the solution you'd like I don't have the perfect answer of how to handle this hence the reason for this issue and not a PR!

We need a way of when we have an image type inside an array to be able to have a selectionType of multiple and handle this in an appropriate way. We could pass selectionType="multiple" to options.

The difficulty comes once the images have been selected, how to display them in the Edit image box to do croppings etc. If the type is object this could get complicated so it may be best to restrict this functionality to an array of type image only.

This describes the complication: https://github.com/sanity-io/sanity/issues/1804#issue-587888235

If just a single object (not nested) with one image/asset within it we could just populate this into the array and then the user could go through and edit the rest of the information in each object. However, I think to avoid this complication I think it would be best to lock down to when the type is image only and not objects for MVP since you can add fields to the image type anyway and this is really intended for when selecting a few images for a gallery or similar.

Describe alternatives you've considered The only way of currently getting around this is by dragging the images on your computer into the array directly. However, you can't select them from the current uploaded images/media plugin (you can only do this one at a time).

Current workaround: https://github.com/sanity-io/sanity/issues/1547#issuecomment-1418259235

Additional context N/A

[alanvww]

This absolutely needs to be improved... The workarounds of using either the image array or the media library do not work well on mobile devices.

[adrienpicard]

Sadly this is something the Sanity team refuses to comment on. Please feel free to weigh in in this Feature Request thread here on Slack (2 years +)

[knynkwl]

Kinda bonkers this isn't a baked in feature tbh. Being able to select multiple images is a necessity for any CMS imo.

This, on top of not being able to multi-select documents to bulk delete, is making me wonder if this service is the right solution for my app.

[vfhwang]

Is there any update on this? I'm building a site for a client who isn't very tech-savvy so drag and drop isn't really an option.

Thanks

[xuzuodong]

Any updates on this?