Add Files page upload flow with manual folders and duplicate handling.

Users can create folders, upload files or folders, and choose replace or keep both on name conflicts instead of auto-grouping by transfer.

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

resources/js/app.js

@@ -515,6 +515,7 @@ Alpine.data('filesManager', (config = {}) => ({
     files: config.files || [],
     routes: config.routes || {},
     csrf: config.csrf || '',
+    currentFolderId: config.currentFolderId || null,
     moveModalOpen: false,
     toast: '',
     _toastTimer: null,
@@ -636,6 +637,129 @@ Alpine.data('filesManager', (config = {}) => ({
         this.selected.forEach((id) => params.append('files[]', id));
         window.location.href = `${this.routes.openInEmail}?${params.toString()}`;
     },
+
+    createMenuOpen: false,
+    folderModalOpen: false,
+    newFolderName: '',
+    uploading: false,
+    duplicateModalOpen: false,
+    duplicateFile: null,
+    pendingUploads: null,
+    pendingResolutions: {},
+    duplicateQueue: [],
+
+    triggerFileUpload() {
+        this.createMenuOpen = false;
+        this.$refs.fileUploadInput?.click();
+    },
+
+    triggerFolderUpload() {
+        this.createMenuOpen = false;
+        this.$refs.folderUploadInput?.click();
+    },
+
+    openFolderModal() {
+        this.createMenuOpen = false;
+        this.folderModalOpen = true;
+        this.newFolderName = '';
+        this.$nextTick(() => this.$refs.folderNameInput?.focus());
+    },
+
+    async handleUploadPick(event) {
+        const picked = Array.from(event.target.files || []);
+        event.target.value = '';
+        if (picked.length === 0) return;
+        await this.processUploadQueue(picked);
+    },
+
+    async processUploadQueue(files) {
+        this.uploading = true;
+        try {
+            const checkRes = await fetch(this.routes.uploadCheck, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': this.csrf,
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify({
+                    filenames: files.map((f) => f.name),
+                    folder: this.currentFolderId || null,
+                }),
+            });
+            const checkData = await checkRes.json();
+            this.pendingUploads = files;
+            this.pendingResolutions = {};
+            this.duplicateQueue = checkData.conflicts || [];
+
+            if (this.duplicateQueue.length > 0) {
+                this.showNextDuplicate();
+                return;
+            }
+
+            await this.submitUpload(files, {});
+        } catch (e) {
+            this.showToast('Upload failed. Please try again.');
+        } finally {
+            if (!this.duplicateModalOpen) {
+                this.uploading = false;
+            }
+        }
+    },
+
+    showNextDuplicate() {
+        if (this.duplicateQueue.length === 0) {
+            this.duplicateModalOpen = false;
+            this.submitUpload(this.pendingUploads, this.pendingResolutions).finally(() => {
+                this.uploading = false;
+                this.pendingUploads = null;
+                this.pendingResolutions = {};
+            });
+            return;
+        }
+
+        this.duplicateFile = this.duplicateQueue.shift();
+        this.duplicateModalOpen = true;
+    },
+
+    resolveDuplicate(action) {
+        if (!this.duplicateFile) return;
+        this.pendingResolutions[this.duplicateFile.filename] = action;
+        this.duplicateModalOpen = false;
+        this.duplicateFile = null;
+        this.showNextDuplicate();
+    },
+
+    async submitUpload(files, resolutions) {
+        const formData = new FormData();
+        files.forEach((file) => formData.append('files[]', file));
+        if (this.currentFolderId) {
+            formData.append('folder', this.currentFolderId);
+        }
+        Object.entries(resolutions).forEach(([name, action]) => {
+            formData.append(`resolutions[${name}]`, action);
+        });
+
+        const res = await fetch(this.routes.upload, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'X-CSRF-TOKEN': this.csrf,
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: formData,
+        });
+
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+            this.showToast(data.message || 'Upload failed.');
+            return;
+        }
+
+        this.showToast(data.message || 'Upload complete.');
+        window.location.reload();
+    },
 }));
 
 window.Alpine = Alpine;

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

@@ -1,43 +1,20 @@
 <x-user-layout>
     <x-slot name="title">Files</x-slot>
     @php
+        $iconBase = asset('images/ladill-icons');
         $fmtBytes = function (int $bytes) {
             if ($bytes >= 1073741824) return number_format($bytes / 1073741824, 2).' GB';
             if ($bytes >= 1048576) return number_format($bytes / 1048576, 1).' MB';
             return number_format($bytes / 1024, 0).' KB';
         };
-        $fileIcon = function (\App\Models\TransferFile $file): string {
-            $mime = (string) $file->mime_type;
-            $ext = strtolower(pathinfo($file->original_name, PATHINFO_EXTENSION));
-            if (str_starts_with($mime, 'image/') || in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'], true)) {
-                return 'image';
-            }
-            if (str_starts_with($mime, 'video/') || in_array($ext, ['mp4', 'mov', 'avi', 'mkv'], true)) {
-                return 'video';
-            }
-            if (str_starts_with($mime, 'audio/') || in_array($ext, ['mp3', 'wav', 'aac'], true)) {
-                return 'audio';
-            }
-            if (in_array($ext, ['zip', 'rar', '7z', 'tar', 'gz'], true)) {
-                return 'archive';
-            }
-            if (in_array($ext, ['pdf', 'doc', 'docx', 'txt', 'rtf'], true)) {
-                return 'document';
-            }
-
-            return 'file';
-        };
         $fileRows = $files->map(fn ($file) => [
             'id' => $file->id,
             'name' => $file->original_name,
             'size' => $file->humanSize(),
             'downloads' => $file->downloads_total,
             'modified' => $file->updated_at?->format('M j, Y') ?? '—',
-            'transferId' => $file->transfer_id,
-            'transferTitle' => $file->transfer->title,
             'shareUrl' => $file->transfer->qrCode?->publicUrl() ?? '',
             'downloadUrl' => route('transfer.files.download', $file),
-            'icon' => $fileIcon($file),
             'shared' => $file->transfer->recipient_email !== null || $file->downloads_total > 0,
         ])->values();
     @endphp
@@ -47,15 +24,21 @@
              'fileIds' => $fileRows->pluck('id')->all(),
              'files' => $fileRows->all(),
              'csrf' => csrf_token(),
+             'currentFolderId' => $folderTransfer?->id,
              'routes' => [
                  'bulkDownload' => route('transfer.files.bulk-download'),
                  'bulkDelete' => route('transfer.files.bulk-delete'),
                  'move' => route('transfer.files.move'),
                  'share' => route('transfer.files.share'),
                  'openInEmail' => route('transfer.files.open-in-email'),
-                 'reshareEmail' => route('transfer.files.reshare-email'),
+                 'uploadCheck' => route('transfer.files.upload.check'),
+                 'upload' => route('transfer.files.upload'),
+                 'createFolder' => route('transfer.files.folders.store'),
              ],
-             'moveTargets' => $moveTargets->map(fn ($t) => ['id' => $t->id, 'title' => $t->title])->values()->all(),
+             'moveTargets' => $moveTargets->map(fn ($t) => [
+                 'id' => $t->id,
+                 'title' => $t->is_root_storage ? 'My files (root)' : $t->title,
+             ])->values()->all(),
          ]))">
 
         {{-- Header --}}
@@ -64,18 +47,51 @@
                 <h1 class="text-xl font-semibold text-slate-900">Files</h1>
                 <p class="mt-1 text-sm text-slate-500">{{ $fmtBytes($storageBytes) }} stored (~GHS {{ number_format($storageGb * $pricePerGb, 2) }}/month)</p>
             </div>
+
+            {{-- Create or upload --}}
+            <div class="relative" @click.outside="createMenuOpen = false">
+                <button type="button"
+                        @click="createMenuOpen = !createMenuOpen"
+                        class="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-indigo-600 to-violet-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:from-indigo-700 hover:to-violet-700">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                    Create or upload
+                    <svg class="h-4 w-4 opacity-80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
+                </button>
+                <div x-show="createMenuOpen"
+                     x-cloak
+                     x-transition
+                     class="absolute right-0 z-30 mt-2 w-56 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
+                    <button type="button" @click="openFolderModal()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
+                        <img src="{{ $iconBase }}/folder.svg" alt="" class="h-5 w-5">
+                        <span>Folder</span>
+                    </button>
+                    <div class="my-1 border-t border-slate-100"></div>
+                    <button type="button" @click="triggerFileUpload()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
+                        <img src="{{ $iconBase }}/file.svg" alt="" class="h-5 w-5">
+                        <span>Files upload</span>
+                    </button>
+                    <button type="button" @click="triggerFolderUpload()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
+                        <span class="relative h-5 w-5">
+                            <img src="{{ $iconBase }}/folder.svg" alt="" class="h-5 w-5">
+                        </span>
+                        <span>Folder upload</span>
+                    </button>
+                </div>
+                <input type="file" x-ref="fileUploadInput" multiple class="hidden" @change="handleUploadPick($event)">
+                <input type="file" x-ref="folderUploadInput" multiple webkitdirectory class="hidden" @change="handleUploadPick($event)">
+            </div>
         </div>
 
         {{-- Breadcrumbs --}}
         <nav class="flex flex-wrap items-center gap-1 text-sm text-slate-500">
-            <a href="{{ route('transfer.files.index', request()->except('folder')) }}" class="font-medium text-indigo-600 hover:text-indigo-800">My files</a>
+            <a href="{{ route('transfer.files.index') }}" class="font-medium text-indigo-600 hover:text-indigo-800">My files</a>
             @if($folderTransfer)
                 <span>/</span>
                 <span class="font-medium text-slate-900">{{ $folderTransfer->title }}</span>
             @endif
         </nav>
 
-        {{-- Action toolbar --}}
+        {{-- 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">
@@ -119,31 +135,14 @@
                 </div>
             </div>
 
-            {{-- Folders row (when at root) --}}
-            @if(! $folderTransfer && $folders->isNotEmpty() && $search === '')
-                <div class="border-b border-slate-100 px-4 py-3">
-                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">Folders</p>
-                    <div class="flex flex-wrap gap-2">
-                        @foreach($folders as $folder)
-                            <a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}"
-                               class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700 transition hover:border-indigo-200 hover:bg-indigo-50/60">
-                                <svg class="h-5 w-5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z"/></svg>
-                                <span class="font-medium">{{ $folder->title }}</span>
-                                <span class="text-xs text-slate-400">{{ $folder->files_count }}</span>
-                            </a>
-                        @endforeach
-                    </div>
-                </div>
-            @endif
-
-            @if($files->isEmpty())
+            @if($files->isEmpty() && ($folderTransfer || $folders->isEmpty() || $search !== ''))
                 <div class="px-6 py-12 text-center text-sm text-slate-500">
                     @if($search !== '')
                         No files match your search.
                     @elseif($folderTransfer)
-                        This folder is empty.
+                        This folder is empty. Upload files or move items here.
                     @else
-                        No stored files yet.
+                        No files yet. Use Create or upload to add files.
                     @endif
                 </div>
             @else
@@ -157,14 +156,28 @@
                             <th class="hidden px-4 py-3 sm:table-cell">Modified</th>
                             <th class="px-4 py-3">Size</th>
                             <th class="hidden px-4 py-3 md:table-cell">Sharing</th>
-                            @unless($folderTransfer)
-                                <th class="hidden px-4 py-3 lg:table-cell">Folder</th>
-                            @endunless
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-slate-100">
+                        {{-- 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">
+                                            <img src="{{ $iconBase }}/folder.svg" alt="" class="h-8 w-8">
+                                            <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>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        @endif
+
                         @foreach($files as $file)
-                            @php $icon = $fileIcon($file); @endphp
                             <tr class="transition"
                                 :class="selected.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
                                 <td class="px-4 py-3">
@@ -172,45 +185,34 @@
                                 </td>
                                 <td class="px-4 py-3">
                                     <div class="flex items-center gap-3">
-                                        @include('transfer.files.partials.file-icon', ['icon' => $icon])
+                                        <img src="{{ $iconBase }}/file.svg" alt="" class="h-8 w-8 shrink-0">
                                         <div class="min-w-0">
                                             <p class="truncate font-medium text-slate-900">{{ $file->original_name }}</p>
-                                            <div class="mt-0.5 flex items-center gap-2 sm:hidden">
-                                                <span class="text-xs text-slate-500">{{ $file->humanSize() }}</span>
-                                            </div>
-                                        </div>
-                                        <div class="ml-auto flex items-center gap-1 opacity-0 transition group-hover:opacity-100 sm:opacity-100" x-show="selected.includes({{ $file->id }})">
-                                            <a href="{{ route('transfer.files.download', $file) }}" class="rounded p-1 text-slate-500 hover:bg-white hover:text-indigo-600" title="Download">
-                                                <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>
+                                        <a href="{{ route('transfer.files.download', $file) }}" class="ml-auto rounded p-1 text-slate-400 hover:text-indigo-600" title="Download">
+                                            <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">{{ $file->updated_at?->format('M j, Y') ?? '—' }}</td>
                                 <td class="px-4 py-3 text-slate-600">{{ $file->humanSize() }}</td>
                                 <td class="hidden px-4 py-3 md:table-cell">
                                     @if($file->transfer->recipient_email || $file->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>
+                                        <span class="inline-flex items-center gap-1 text-xs text-slate-600">Shared</span>
                                     @else
                                         <span class="text-xs text-slate-400">Private</span>
                                     @endif
                                 </td>
-                                @unless($folderTransfer)
-                                    <td class="hidden px-4 py-3 lg:table-cell">
-                                        <a href="{{ route('transfer.files.index', ['folder' => $file->transfer_id]) }}" class="text-indigo-600 hover:text-indigo-800">{{ $file->transfer->title }}</a>
-                                    </td>
-                                @endunless
                             </tr>
                         @endforeach
                     </tbody>
                 </table>
-                <div class="flex items-center justify-between border-t border-slate-100 px-4 py-3 text-xs text-slate-500">
-                    <span>{{ $files->total() }} file{{ $files->total() === 1 ? '' : 's' }}</span>
-                    <span>Showing {{ $files->firstItem() }}–{{ $files->lastItem() }}</span>
-                </div>
+                @if($files->isNotEmpty())
+                    <div class="flex items-center justify-between border-t border-slate-100 px-4 py-3 text-xs text-slate-500">
+                        <span>{{ $files->total() }} file{{ $files->total() === 1 ? '' : 's' }}</span>
+                        <span>Showing {{ $files->firstItem() }}–{{ $files->lastItem() }}</span>
+                    </div>
+                @endif
             @endif
         </div>
 
@@ -218,20 +220,54 @@
             <div>{{ $files->links() }}</div>
         @endif
 
+        {{-- Create folder modal --}}
+        <div x-show="folderModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @keydown.escape.window="folderModalOpen = false">
+            <div @click.outside="folderModalOpen = false" class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
+                <h3 class="text-lg font-semibold text-slate-900">New folder</h3>
+                <form method="post" action="{{ route('transfer.files.folders.store') }}" class="mt-4 space-y-4">
+                    @csrf
+                    @if($folderTransfer)
+                        <input type="hidden" name="folder" value="{{ $folderTransfer->id }}">
+                    @endif
+                    <input x-ref="folderNameInput" type="text" name="name" x-model="newFolderName" required maxlength="120" placeholder="Folder name"
+                           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">
+                    <div class="flex justify-end gap-2">
+                        <button type="button" @click="folderModalOpen = false" class="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">Cancel</button>
+                        <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Create</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        {{-- Duplicate file modal --}}
+        <div x-show="duplicateModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+            <div class="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl">
+                <p class="text-sm text-slate-700">
+                    A file with this name already exists so we couldn't upload
+                    <strong x-text="duplicateFile?.filename"></strong>.
+                </p>
+                <p class="mt-2 text-sm text-slate-500">Add it as a new version of the existing file, or keep them both.</p>
+                <div class="mt-5 flex gap-4">
+                    <button type="button" @click="resolveDuplicate('replace')" class="text-sm font-semibold text-indigo-600 hover:text-indigo-800">Replace</button>
+                    <button type="button" @click="resolveDuplicate('keep_both')" class="text-sm font-semibold text-indigo-600 hover:text-indigo-800">Keep both</button>
+                </div>
+            </div>
+        </div>
+
         {{-- Move modal --}}
         <div x-show="moveModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @keydown.escape.window="moveModalOpen = false">
             <div @click.outside="moveModalOpen = false" class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
                 <h3 class="text-lg font-semibold text-slate-900">Move to folder</h3>
-                <p class="mt-1 text-sm text-slate-500">Group selected files into another transfer folder.</p>
+                <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">
                         <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">
-                        <option value="">Choose a transfer folder…</option>
+                        <option value="">Choose a folder…</option>
                         @foreach($moveTargets as $target)
-                            <option value="{{ $target->id }}">{{ $target->title }}</option>
+                            <option value="{{ $target->id }}">{{ $target->is_root_storage ? 'My files (root)' : $target->title }}</option>
                         @endforeach
                     </select>
                     <div class="flex justify-end gap-2">
@@ -242,6 +278,11 @@
             </div>
         </div>
 
+        {{-- Upload overlay --}}
+        <div x-show="uploading" x-cloak class="fixed inset-0 z-40 flex items-center justify-center bg-black/20">
+            <div class="rounded-xl bg-white px-5 py-3 text-sm font-medium text-slate-700 shadow-lg">Uploading…</div>
+        </div>
+
         {{-- Toast --}}
         <div x-show="toast" x-cloak x-transition class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-xl bg-slate-900 px-4 py-2 text-sm text-white shadow-lg lg:bottom-8" x-text="toast"></div>
     </div>