sanity
sanity copied to clipboard
Support for batch uploading images / files to nested inline objects
Is your feature request related to a problem? Please describe.
Sanity supports and drag-and-drop functionality to arrays of type file
and image
. This works really well and exactly how you'd expect!
However, when requirements change and your array of images
suddenly needs to be an object
with other complementary fields, editors lose the ability to drag and drop multiple fields and then need to resort to laboriously creating individual inline objects then adding / uploading individual images / files.
It really slows things down, and a common request is the ability to retain support for batch upload of files to more complex nested objects.
Describe the solution you'd like
Sanity can't make any assumptions about how you structure your data, but it would be amazing if there was a way to customise how different MIME types are handled when you drag and drop a mixture of files to an array of type object
.
Just spit-balling, but perhaps this could be accomplished with an option on the array
type like resolveDropzoneMimeTypes
– an object literal which matches MIME types to object paths.
Consider the following document:
export default {
name: 'project',
title: 'Project',
type: 'document',
fields: [
// Items
{
title: 'Items',
name: 'items',
type: 'array',
options: {
resolveDropzoneMimeTypes: {
'application/pdf': 'itemImage.pressRelease',
'video/*': 'itemImage.video',
'image/gif': 'itemImage.nestedObject.image',
'image/*': 'itemImage.image',
},
},
of: [
// Image
{
title: 'Image',
name: 'itemImage',
type: 'object',
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
{
title: 'Image',
name: 'image',
type: 'image',
},
{
title: 'Press release',
name: 'pressRelease',
type: 'file',
},
{
title: 'Another nested object',
name: 'nestedObject',
type: 'object',
fields: [
{
title: 'Image (GIFs only!)',
name: 'image',
type: 'image',
options: {
accept: 'image/gif'
}
},
],
},
],
},
// Video
{
title: 'Video',
name: 'itemVideo',
type: 'object',
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
{
title: 'Video',
name: 'video',
type: 'file',
},
],
},
],
}
}
}
And given the following files to batch upload:
- foo.jpg
- bar.gif
- baz.pdf
- qux.mp4
- quux.docx
Ideally, an editor would be able able to drag all those files over the items
array and the following would occur (upon completion of each file upload):
-
foo.jpg
matchesimage/*
, and a new inline object of typeitemImage
is created, withfoo.jpg
is assigned toitemImage.image
-
bar.gif
matchesimage/gif
and a new inline object of typeitemImage
is created, along with the nested objectnestedObject
.bar.gif
is then assigned toitemImage.nestedObject.image
. -
baz.pdf
would be assigned to a new object atitemImage.pressRelease
-
qux.mp4
would be assigned to a new object atitemVideo.video
-
quux.docx
is ignored since it doesn't match any supplied MIME type, and no new object is created.
Similarly, the order of MIME types would be significant and generic catch-all paths could be defined for specific file types.
Describe alternatives you've considered Nothing yet! Hopefully this is already possible in Sanity and I've just made a big fuss over nothing.
Additional context
- Could be interesting if MIME type resolving could work in nested objects too.
- This could possibly work with the
accept
option on both nestedimage
andfile
types too. This resolver could look at the object path and check if it has a correspondingaccept
option too, then ignore the upload if it doesn't match. - I have no idea how this would work with custom (especially async) validation on nested fields using
validation
.
Be great to see if there are any other thoughts or possible approaches here!
Refs #1547