Create a Ladill folder when uploading a local folder and place files inside it.

Folder upload now names and creates the destination folder from the picked directory, uploads all files into it, and redirects to the new folder view.

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

resources/js/app.js

@@ -647,6 +647,7 @@ Alpine.data('filesManager', (config = {}) => ({
     pendingUploads: null,
     pendingResolutions: {},
     duplicateQueue: [],
+    pendingUploadFolderName: null,
     uploadConfirmOpen: false,
     pendingConfirmFiles: null,
     uploadConfirmFolderName: '',
@@ -781,9 +782,10 @@ Alpine.data('filesManager', (config = {}) => ({
 
     confirmUpload() {
         const files = this.pendingConfirmFiles;
+        const uploadFolderName = this.uploadConfirmIsFolder ? this.uploadConfirmFolderName : null;
         this.cancelUploadConfirm();
         if (files?.length) {
-            this.processUploadQueue(files);
+            this.processUploadQueue(files, { uploadFolderName });
         }
     },
 
@@ -804,8 +806,10 @@ Alpine.data('filesManager', (config = {}) => ({
         return formatUploadBytes(bytes);
     },
 
-    async processUploadQueue(files) {
+    async processUploadQueue(files, options = {}) {
         this.uploading = true;
+        this.pendingUploadFolderName = options.uploadFolderName || null;
+
         try {
             const checkRes = await fetch(this.routes.uploadCheck, {
                 method: 'POST',
@@ -817,7 +821,8 @@ Alpine.data('filesManager', (config = {}) => ({
                 },
                 body: JSON.stringify({
                     filenames: files.map((f) => this.fileBasename(f)),
-                    folder: this.currentFolderId || null,
+                    folder: this.pendingUploadFolderName ? null : (this.currentFolderId || null),
+                    upload_folder_name: this.pendingUploadFolderName,
                 }),
             });
             const checkData = await checkRes.json();
@@ -847,6 +852,7 @@ Alpine.data('filesManager', (config = {}) => ({
                 this.uploading = false;
                 this.pendingUploads = null;
                 this.pendingResolutions = {};
+                this.pendingUploadFolderName = null;
             });
             return;
         }
@@ -869,9 +875,12 @@ Alpine.data('filesManager', (config = {}) => ({
             const name = this.fileBasename(file);
             formData.append('files[]', file, name);
         });
-        if (this.currentFolderId) {
+        if (this.currentFolderId && !this.pendingUploadFolderName) {
             formData.append('folder', this.currentFolderId);
         }
+        if (this.pendingUploadFolderName) {
+            formData.append('upload_folder_name', this.pendingUploadFolderName);
+        }
         Object.entries(resolutions).forEach(([name, action]) => {
             formData.append(`resolutions[${name}]`, action);
         });
@@ -893,6 +902,12 @@ Alpine.data('filesManager', (config = {}) => ({
         }
 
         this.showToast(data.message || 'Upload complete.');
+
+        if (data.folder_id && this.routes.filesIndex) {
+            window.location.href = `${this.routes.filesIndex}?folder=${data.folder_id}`;
+            return;
+        }
+
         window.location.reload();
     },
 }));

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

@@ -33,6 +33,7 @@
                  'openInEmail' => route('transfer.files.open-in-email'),
                  'uploadCheck' => route('transfer.files.upload.check'),
                  'upload' => route('transfer.files.upload'),
+                 'filesIndex' => route('transfer.files.index'),
                  'createFolder' => route('transfer.files.folders.store'),
              ],
              'moveTargets' => $moveTargets->map(fn ($t) => [
@@ -259,12 +260,12 @@
                 </h3>
                 <p class="mt-2 text-sm text-slate-600">
                     <span x-show="uploadConfirmIsFolder">
-                        <span x-text="pendingConfirmFiles?.length || 0"></span>
-                        files from
+                        A folder named
                         <span class="font-medium text-slate-800">'<span x-text="uploadConfirmFolderName"></span>'</span>
-                        will be uploaded individually to
-                        <span class="font-medium text-slate-800" x-text="currentFolderId ? 'this folder' : 'My files'"></span>.
-                        No new folder will be created.
+                        will be created with
+                        <span x-text="pendingConfirmFiles?.length || 0"></span>
+                        <span x-text="(pendingConfirmFiles?.length || 0) === 1 ? 'file' : 'files'"></span>
+                        inside it.
                     </span>
                     <span x-show="!uploadConfirmIsFolder">
                         Selected files will be added to