Make folders selectable and downloadable with item count and sharing status.

Folder rows match the file table layout, support zip download, and participate in bulk selection, share, and copy-link actions.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/js/app.js

@@ -510,9 +510,12 @@ Alpine.data('transferCreateForm', (config = {}) => ({
 }));
 
 Alpine.data('filesManager', (config = {}) => ({
-    selected: [],
+    selectedFileIds: [],
+    selectedFolderIds: [],
     fileIds: config.fileIds || [],
     files: config.files || [],
+    folderIds: config.folderIds || [],
+    folders: config.folders || [],
     routes: config.routes || {},
     csrf: config.csrf || '',
     currentFolderId: config.currentFolderId || null,
@@ -520,20 +523,38 @@ Alpine.data('filesManager', (config = {}) => ({
     toast: '',
     _toastTimer: null,
 
+    get selectedCount() {
+        return this.selectedFileIds.length + this.selectedFolderIds.length;
+    },
+
     get allSelected() {
-        return this.fileIds.length > 0 && this.selected.length === this.fileIds.length;
+        const total = this.fileIds.length + this.folderIds.length;
+        return total > 0
+            && this.selectedFileIds.length === this.fileIds.length
+            && this.selectedFolderIds.length === this.folderIds.length;
     },
 
     toggleAll(event) {
-        this.selected = event.target.checked ? [...this.fileIds] : [];
+        if (event.target.checked) {
+            this.selectedFileIds = [...this.fileIds];
+            this.selectedFolderIds = [...this.folderIds];
+        } else {
+            this.selectedFileIds = [];
+            this.selectedFolderIds = [];
+        }
     },
 
     clearSelection() {
-        this.selected = [];
+        this.selectedFileIds = [];
+        this.selectedFolderIds = [];
     },
 
-    selectedFiles() {
-        return this.files.filter((file) => this.selected.includes(file.id));
+    selectedFileRows() {
+        return this.files.filter((file) => this.selectedFileIds.includes(file.id));
+    },
+
+    selectedFolderRows() {
+        return this.folders.filter((folder) => this.selectedFolderIds.includes(folder.id));
     },
 
     showToast(message) {
@@ -554,7 +575,7 @@ Alpine.data('filesManager', (config = {}) => ({
         csrf.value = this.csrf;
         form.appendChild(csrf);
 
-        this.selected.forEach((id) => {
+        this.selectedFileIds.forEach((id) => {
             const input = document.createElement('input');
             input.type = 'hidden';
             input.name = 'files[]';
@@ -562,6 +583,14 @@ Alpine.data('filesManager', (config = {}) => ({
             form.appendChild(input);
         });
 
+        this.selectedFolderIds.forEach((id) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = 'folders[]';
+            input.value = id;
+            form.appendChild(input);
+        });
+
         Object.entries(extra).forEach(([key, value]) => {
             const input = document.createElement('input');
             input.type = 'hidden';
@@ -575,27 +604,41 @@ Alpine.data('filesManager', (config = {}) => ({
     },
 
     downloadSelected() {
-        if (this.selected.length === 0) return;
-        if (this.selected.length === 1) {
-            const file = this.selectedFiles()[0];
+        if (this.selectedCount === 0) return;
+
+        if (this.selectedFileIds.length === 1 && this.selectedFolderIds.length === 0) {
+            const file = this.selectedFileRows()[0];
             if (file?.downloadUrl) {
                 window.location.href = file.downloadUrl;
             }
             return;
         }
+
+        if (this.selectedFolderIds.length === 1 && this.selectedFileIds.length === 0) {
+            const folder = this.selectedFolderRows()[0];
+            if (folder?.downloadUrl) {
+                window.location.href = folder.downloadUrl;
+            }
+            return;
+        }
+
         this.submitAction(this.routes.bulkDownload);
     },
 
     async deleteSelected() {
-        if (this.selected.length === 0) return;
-        if (! confirm(`Delete ${this.selected.length} file${this.selected.length === 1 ? '' : 's'}? This cannot be undone.`)) {
+        if (this.selectedFileIds.length === 0) return;
+        if (this.selectedFolderIds.length > 0) {
+            this.showToast('Delete files individually. Folder delete is not supported yet.');
+            return;
+        }
+        if (! confirm(`Delete ${this.selectedFileIds.length} file${this.selectedFileIds.length === 1 ? '' : 's'}? This cannot be undone.`)) {
             return;
         }
         this.submitAction(this.routes.bulkDelete);
     },
 
     async shareSelected() {
-        if (this.selected.length === 0) return;
+        if (this.selectedCount === 0) return;
         try {
             const res = await fetch(this.routes.share, {
                 method: 'POST',
@@ -605,12 +648,17 @@ Alpine.data('filesManager', (config = {}) => ({
                     'X-CSRF-TOKEN': this.csrf,
                     'X-Requested-With': 'XMLHttpRequest',
                 },
-                body: JSON.stringify({ files: this.selected }),
+                body: JSON.stringify({
+                    files: this.selectedFileIds,
+                    folders: this.selectedFolderIds,
+                }),
             });
             const data = await res.json();
             if (data.links?.length) {
                 await navigator.clipboard.writeText(data.links.join('\n'));
                 this.showToast(data.message || 'Share links copied.');
+            } else {
+                this.showToast(data.message || 'No share links available.');
             }
         } catch (e) {
             this.showToast('Could not copy share links.');
@@ -618,23 +666,31 @@ Alpine.data('filesManager', (config = {}) => ({
     },
 
     async copyLinks() {
-        const links = [...new Set(this.selectedFiles().map((f) => f.shareUrl).filter(Boolean))];
-        if (links.length === 0) {
+        const links = [
+            ...this.selectedFileRows().map((f) => f.shareUrl),
+            ...this.selectedFolderRows().map((f) => f.shareUrl),
+        ].filter(Boolean);
+        const uniqueLinks = [...new Set(links)];
+        if (uniqueLinks.length === 0) {
             this.showToast('No share links available.');
             return;
         }
         try {
-            await navigator.clipboard.writeText(links.join('\n'));
-            this.showToast(links.length === 1 ? 'Link copied.' : `${links.length} links copied.`);
+            await navigator.clipboard.writeText(uniqueLinks.join('\n'));
+            this.showToast(uniqueLinks.length === 1 ? 'Link copied.' : `${uniqueLinks.length} links copied.`);
         } catch (e) {
             this.showToast('Could not copy links.');
         }
     },
 
     openInEmail() {
-        if (this.selected.length === 0) return;
+        if (this.selectedFileIds.length === 0) return;
+        if (this.selectedFolderIds.length > 0) {
+            this.showToast('Open in email works with files only.');
+            return;
+        }
         const params = new URLSearchParams();
-        this.selected.forEach((id) => params.append('files[]', id));
+        this.selectedFileIds.forEach((id) => params.append('files[]', id));
         window.location.href = `${this.routes.openInEmail}?${params.toString()}`;
     },
 

resources/views/transfer/files/index.blade.php

@@ -17,12 +17,24 @@
             'downloadUrl' => route('transfer.files.download', $file),
             'shared' => $file->transfer->recipient_email !== null || $file->downloads_total > 0,
         ])->values();
+        $folderRows = $folders->map(fn ($folder) => [
+            'id' => $folder->id,
+            'name' => $folder->title,
+            'itemCount' => (int) $folder->files_count,
+            'modified' => $folder->updated_at?->format('M j, Y') ?? '—',
+            'shareUrl' => $folder->qrCode?->publicUrl() ?? '',
+            'downloadUrl' => route('transfer.files.folders.download', $folder),
+            'openUrl' => route('transfer.files.index', ['folder' => $folder->id]),
+            'shared' => $folder->recipient_email !== null || $folder->downloads_total > 0,
+        ])->values();
     @endphp
 
     <div class="space-y-4"
          x-data="filesManager(@js([
              'fileIds' => $fileRows->pluck('id')->all(),
              'files' => $fileRows->all(),
+             'folderIds' => $folderTransfer || $search !== '' ? [] : $folderRows->pluck('id')->all(),
+             'folders' => $folderTransfer || $search !== '' ? [] : $folderRows->all(),
              'csrf' => csrf_token(),
              'currentFolderId' => $folderTransfer?->id,
              'routes' => [
@@ -95,7 +107,7 @@
         {{-- Action toolbar + file list --}}
         <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
             <div class="flex flex-wrap items-center gap-2 border-b border-slate-100 px-4 py-2.5">
-                <template x-if="selected.length === 0">
+                <template x-if="selectedCount === 0">
                     <div class="flex flex-wrap items-center gap-2 text-sm">
                         <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Download</button>
                         <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Share</button>
@@ -105,7 +117,7 @@
                         <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Open in email</button>
                     </div>
                 </template>
-                <template x-if="selected.length > 0">
+                <template x-if="selectedCount > 0">
                     <div class="flex flex-wrap items-center gap-2 text-sm">
                         <button type="button" @click="downloadSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Download</button>
                         <button type="button" @click="shareSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Share</button>
@@ -113,7 +125,7 @@
                         <button type="button" @click="deleteSelected()" class="rounded-lg px-3 py-1.5 font-medium text-red-700 hover:bg-red-50">Delete</button>
                         <button type="button" @click="moveModalOpen = true" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Move to</button>
                         <button type="button" @click="openInEmail()" class="rounded-lg bg-indigo-600 px-3 py-1.5 font-medium text-white hover:bg-indigo-700">Open in email</button>
-                        <span class="ml-2 text-xs text-slate-500" x-text="`${selected.length} selected`"></span>
+                        <span class="ml-2 text-xs text-slate-500" x-text="`${selectedCount} selected`"></span>
                         <button type="button" @click="clearSelection()" class="text-xs text-slate-400 hover:text-slate-600">Clear</button>
                     </div>
                 </template>
@@ -163,16 +175,33 @@
                         {{-- User-created folders (root only) --}}
                         @if(! $folderTransfer && $search === '')
                             @foreach($folders as $folder)
-                                <tr class="hover:bg-slate-50/80">
-                                    <td class="px-4 py-3"></td>
-                                    <td class="px-4 py-3" colspan="4">
-                                        <a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}" class="flex items-center gap-3">
-                                            @include('transfer.files.partials.folder-list-icon', ['size' => 'xs'])
-                                            <div>
-                                                <p class="font-medium text-slate-900">{{ $folder->title }}</p>
-                                                <p class="text-xs text-slate-500">{{ $folder->files_count }} item{{ $folder->files_count === 1 ? '' : 's' }}</p>
-                                            </div>
-                                        </a>
+                                <tr class="transition"
+                                    :class="selectedFolderIds.includes({{ $folder->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
+                                    <td class="px-4 py-3">
+                                        <input type="checkbox" value="{{ $folder->id }}" x-model.number="selectedFolderIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                                    </td>
+                                    <td class="px-4 py-3">
+                                        <div class="flex items-center gap-3">
+                                            <a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}" class="flex min-w-0 flex-1 items-center gap-3">
+                                                @include('transfer.files.partials.folder-list-icon', ['size' => 'xs'])
+                                                <p class="truncate font-medium text-slate-900">{{ $folder->title }}</p>
+                                            </a>
+                                            <a href="{{ route('transfer.files.folders.download', $folder) }}" class="ml-auto rounded p-1 text-slate-400 hover:text-indigo-600" title="Download folder">
+                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 7.5 12 3m0 0L7.5 7.5M12 3v13.5"/></svg>
+                                            </a>
+                                        </div>
+                                    </td>
+                                    <td class="hidden px-4 py-3 text-slate-600 sm:table-cell">{{ $folder->updated_at?->format('M j, Y') ?? '—' }}</td>
+                                    <td class="px-4 py-3 text-slate-600">{{ $folder->files_count }} item{{ $folder->files_count === 1 ? '' : 's' }}</td>
+                                    <td class="hidden px-4 py-3 md:table-cell">
+                                        @if($folder->recipient_email || $folder->downloads_total > 0)
+                                            <span class="inline-flex items-center gap-1 text-xs text-slate-600">
+                                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
+                                                Shared
+                                            </span>
+                                        @else
+                                            <span class="text-xs text-slate-400">Private</span>
+                                        @endif
                                     </td>
                                 </tr>
                             @endforeach
@@ -180,9 +209,9 @@
 
                         @foreach($files as $file)
                             <tr class="transition"
-                                :class="selected.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
+                                :class="selectedFileIds.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
                                 <td class="px-4 py-3">
-                                    <input type="checkbox" value="{{ $file->id }}" x-model.number="selected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                                    <input type="checkbox" value="{{ $file->id }}" x-model.number="selectedFileIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                 </td>
                                 <td class="px-4 py-3">
                                     <div class="flex items-center gap-3">
@@ -326,7 +355,7 @@
                 <p class="mt-1 text-sm text-slate-500">Group selected files into a folder you created.</p>
                 <form method="post" action="{{ route('transfer.files.move') }}" class="mt-4 space-y-4">
                     @csrf
-                    <template x-for="id in selected" :key="id">
+                    <template x-for="id in selectedFileIds" :key="id">
                         <input type="hidden" name="files[]" :value="id">
                     </template>
                     <select name="destination" required class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">