Skip to content

feat(web): add selection and batch actions to media library#2957

Merged
ComputelessComputer merged 11 commits intomainfrom
devin/1768032794-media-selection-batch
Jan 11, 2026
Merged

feat(web): add selection and batch actions to media library#2957
ComputelessComputer merged 11 commits intomainfrom
devin/1768032794-media-selection-batch

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Jan 10, 2026

Summary

This PR adds multi-select capabilities and batch operations to the media library admin UI. It builds on PR #3's core grid and upload functionality.

New features:

  • Selection toolbar showing count of selected items with Select All / Deselect All toggle
  • Batch download: downloads selected files sequentially to user's device
  • Batch move: opens a folder picker dialog to move selected files to a different folder
  • Cancel button to clear selection

The selection toolbar appears when any files are selected, replacing the inline delete button from PR #3 with a more comprehensive action bar.

Updates since last revision

  • Added HTTP response status check in batch download handler to properly detect and report download failures instead of silently downloading error responses (e.g., 404 HTML pages)

Review & Testing Checklist for Human

  • Test batch download with multiple files: Select 3+ images and click Download. Verify all files download correctly. Note: files download sequentially, not as a zip.
  • Test batch download error handling: Try downloading a file that no longer exists or returns an error - verify the error message appears correctly.
  • Test batch move operation: Select files, click Move, choose a destination folder, verify files are moved and no longer appear in original location.
  • Test move dialog folder tree: Verify the folder dropdown shows nested folders with proper indentation (up to 2 levels deep).
  • Verify CORS: Batch download fetches from GitHub raw URLs - verify this works in production environment.

Recommended test plan:

  1. Deploy PRs i editor #1, editor is working #2, migration to radix primitive #3 first (this PR depends on them)
  2. Log in as admin at /admin/media
  3. Upload a few test images
  4. Test selection: click files to select, use Select All, use Cancel
  5. Test Download with 2-3 files selected
  6. Create a subfolder, then test Move to relocate files into it
  7. Verify moved files appear in new location

Notes

This is PR #4 in a stacked PR series implementing issue #2948.

Known limitations:

  • Downloads are sequential (no zip archive option)
  • No per-file progress indicator during batch operations
  • Folder tree limited to 2 levels deep for performance
  • No confirmation dialog before move (unlike delete)

Requested by: @ComputelessComputer
Devin session: https://app.devin.ai/sessions/5c615647f58c421dabccc0cdd5b4270c

devin-ai-integration bot and others added 5 commits January 10, 2026 07:40
- Remove Decap CMS files (config.yml, index.html, media-library.js, etc.)
- Remove netlify-identity-redirect.js and its reference in __root.tsx
- Move mdx-format-core.js to scripts/ folder (still used by format-mdx.js)
- Add admin authentication with email whitelist
- Add admin layout route with auth guard
- Add admin dashboard and media library placeholder pages
- Update handbook documentation to reflect new admin system

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
The _admin prefix creates a pathless layout route which conflicts with
_view's index.tsx since both resolve to '/'. Renaming to 'admin' creates
routes at /admin/* which don't conflict.

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add github-media.ts with utilities for listing, uploading, deleting,
  moving files and creating folders via GitHub API
- Add /api/admin/media/list endpoint for listing media files
- Add /api/admin/media/upload endpoint for uploading files
- Add /api/admin/media/delete endpoint for batch deleting files
- Add /api/admin/media/move endpoint for moving/renaming files
- Add /api/admin/media/create-folder endpoint for creating folders
- All endpoints protected with admin authentication check

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add responsive file grid with folder and image thumbnails
- Add drag-and-drop file upload functionality
- Add breadcrumb navigation for folder hierarchy
- Add file selection with batch delete support
- Add create folder functionality
- Add copy-to-clipboard for file paths
- Show file sizes and loading states

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add select all / deselect all functionality
- Add batch download for selected files
- Add batch move with folder picker dialog
- Add selection toolbar with count display
- Improve selection UI with cancel button

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

…handler

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Base automatically changed from devin/1768031860-media-library-ui to main January 11, 2026 15:49
ComputelessComputer and others added 2 commits January 12, 2026 00:49
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for hyprnote-storybook canceled.

Name Link
🔨 Latest commit dfbbadc
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote-storybook/deploys/6963c9d543cdf500088c9732

@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for hyprnote failed.

Name Link
🔨 Latest commit 296fcc1
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6963c68168903b0008b4d3ed

@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for howto-fix-macos-audio-selection canceled.

Name Link
🔨 Latest commit dfbbadc
🔍 Latest deploy log https://app.netlify.com/projects/howto-fix-macos-audio-selection/deploys/6963c9d57600e700087ee793

@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for hyprnote ready!

Name Link
🔨 Latest commit dfbbadc
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6963c9d44824510008b622cd
😎 Deploy Preview https://deploy-preview-2957--hyprnote.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…revocation

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
@ComputelessComputer ComputelessComputer merged commit 8a74d68 into main Jan 11, 2026
19 checks passed
@ComputelessComputer ComputelessComputer deleted the devin/1768032794-media-selection-batch branch January 11, 2026 16:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant