Handle multi uploads of Image & Files

[Rar9]

Feature Request for more productivity, would the the possibility of Multi Uploading for Image & Files.

[Rar9]

Please include Paste from Clipboard as well.

<button onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}>Copy</button>

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

[Rar9]

Also allow for json import for data migration

[Rar9]

A possible starting point

#1270

[zubricks]

We do agree that this is very important, but it comes with some significant UX challenges.

For example, if uploads have required fields, and you upload 10 files at a time, you would need to have 10 modal windows open to be able to fill out required fields for each file uploaded and still submit one at a time after having completed the required fields. Definitely going to address this at some point, but just wanted to comment here with some thinking.

If anyone has any inspiration for how other platforms handle this that would be great.

[vhorzinek]

As per this comment Craft could be a good inspiration:
#130 (comment)

[jcouturier]

My suggestion there would be to only allow bulk uploads within the Media section, rather than (for example) allowing bulk upload within a Page object.
Within a media section, those meta fields could be left as not required. Page objects where a media file can beinserted would be where that meta data is required, and could prompt the user to add meta data when each individual file is added, either via upload or when selected from existing media.

[jcouturier]

Adding to the above, Wagtail CMS handles this well (screenshot). When uploading multiple files, after upload all the newly files are presented in a list on the page where the user has the opportunity to update their meta data, but doing so is not required. It's fast, simple, and doesn't require multiple modal windows.

[chladog]

Similarly in WordPress it's handled with quite good UX. You select upload files from the grid of media files (or you can DnD new ones to the library), and the fields are settable on each file after a click (the blue highlighted one). The sidebar could be wider to allow more complex fields on a file though (which is possible by "expand details").

If there are any required fields then it could be marked differently (cross/circle/dash instead of a checkmark) and you wouldn't be able to proceed without going through each of them and setting the required fields (possibly with Next and Prev buttons somewhere which would highlight prev/next from the subset of selected)

[hades200082]

Since an upload field allows a single file, I usually wrap it in an array field. It would be nice if Payload recognised this pattern and offered the multiple upload option.

[dacgray]

Echoing above - collections with multiple upload enabled could only allow non-required fields.

Additionally - it would be fantastic to be able to upload folders with the path to images derived from the folder structure - and for this folder structure to be searchable from the dashboard.

Individually uploading images is a major blocker for integrating payload with a lot of our work flows.

EG - marketing creates newsletters with multiple locale specific images each week. We want to unify all content management into Payload, but we just can't ask them to manage their newsletter media this way:

Please please upgrade to roadmap prio 1 or 2 ^^

[tylandavis]

Design Update - Dec 6

Hey everyone, we've worked through the design for this feature and I wanted to provide an update to show our intent.

---

List View

Pretty much the same, with the addition of a Bulk Upload button located next to Create New

---

Bulk Upload Drawer

Selecting Bulk Upload opens a drawer where you can select or drag and drop multiple files.

---

Create View

• Files that were successfully selected should be added to the list of Files to Upload.
• Save Drafts and Publish All will attempt to save/publish all files
• Add Files button opens up Bulk Upload Drawer
• On mobile, Files to Upload list goes in a drawer, fixed in place above Save/Publish buttons.
• When open, drawer should leave 120px from top of screen,
and have a clickable overlay to collapse the list, similar to our main Drawer component.

---

Failed to Select

For files that aren’t able to be selected when dragging (wrong mimetype, etc), show a toast with error message

---

Add Files

Same drawer component. New files should be added to the top of the list.

---

Publish

When publishing all, iterate over each document to be created, showing a progress bar for each.
For files, with invalid fields, keep those in the list, and display errors. Successful uploads are
removed from the list.

---

Success/Error

Show toast for total successful, unsuccessful creations. Files with errors should show a pill with the number of errors next to file name.

---

Remove One

Select the X button next to a file to remove it from the bulk upload. Show a confirmation overlay.

---

Cancel All

Select the X button on the drawer to cancel all uploads. Show a confirmation overlay saying how many files will be canceled.

[anhonestboy]

Any news about the launch of this feature? :)

[tylandavis]

Right now, our main focus is on moving Payload to Next.js. This one is a big lift, and good progress has been made so far, but new features like this are waiting until the move is complete. There are going to be some changes to the way Payload works internally that could have an impact on how features like this would be built.

That being said, I believe this will be one of the first new features we start after the move is complete.

You can keep up with the discussion on the move to Next.js (#4202).

[mainey]

Hi, would this feature be available once payload 3.0 hits stable or later? iirc payload is currently waiting for next 15 and react 19 to become stable, which could take a while. In the meantime, would this be a good time to continue developing this feature?

This feature could really help people that need to upload multiple images or files in a single collection (it's really horrendous to upload them one by one).

[alsherif-khalaf]

looks great

[tylandavis]

@mainey We are starting to move towards new features now that we are mostly just waiting on stable Next and React. Upload-related features are being worked on right now.