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.

[tylandavis]

@SalahAdDin this is one of the features we are working on now!

[TechSynthesis]

Any updates on how this is progressing

[Salman-165324]

Any update on this?

[tylandavis]

Still in progress, coming along well. As soon as it's in a good spot we were definitely share updates in this discussion 👍🏽

[mhjmaas]

I've been having a look at the bulk upload feature in the latest beta and it looks awesome. A great addition to this feature would be to have a bulk edit of a certain field in the bulk upload. For example I would like to add 10 images using the bulk upload and mark them all as being part of "family trip 2024" instead of currently having to add this one by one. currently a workaround is to bulk upload them. Then select them all and bulk edit them from the list view.

[JarrodMFlesch]

Bulk Upload landed in v3.0.0-beta.89

Related PR

Improvements like the suggestions above will likely be worked towards!

[mhjmaas]

Awesome stuff. Thanks for the effort!

[geminigeek]

Hi, looks gr8 , will it be backported for v2 ?