Support for batch uploading images / files to nested inline objects

[robinpyon]

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):

1. foo.jpg matches image/*, and a new inline object of type itemImage is created, with foo.jpg is assigned to itemImage.image
2. bar.gif matches image/gif and a new inline object of type itemImage is created, along with the nested object nestedObject. bar.gif is then assigned to itemImage.nestedObject.image.
3. baz.pdf would be assigned to a new object at itemImage.pressRelease
4. qux.mp4 would be assigned to a new object at itemVideo.video
5. 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 nested image and file types too. This resolver could look at the object path and check if it has a corresponding accept 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

[vicmeow]

Hi Robin, thanks for submitting this, great input!

[eaton]

Seconding the usefulness of this feature: We're building a "Presentation" content type where one document is basically 50 "slides," each with an image and (optionally) citation links and transcript text. Dragging all the images to create the slide array in bulk would be amazing.

[intelligence]

Working with production agencies that produce images and videos that often share the same layout structure I (and my clients) miss the feature for every project I build. It would be super to be able to drop video and image in the same array and somehow associate with the correct object.