Multi photo enabled for new photos creation

app/Http/Controllers/PhotoController.php

@@ -74,6 +74,40 @@ public function store(Request $request)
         ]);
     }
 
+
+        /**
+     * Store a newly created resource in storage.
+     */
+    public function stores(Request $request)
+    {
+        $request->validate([
+            "files" => "required"
+        ]);
+
+        $redirect = $request->redirect ?? true;
+        $uuids = [];
+        foreach($request["files"] as $file) {
+            $file = (object)$file;
+            if(!Storage::disk("s3")->exists($file->path)) 
+                return redirect()->back()->withErrors(["path" => "Probleme with the file transfert"]);
+            $uuid = Str::uuid();
+            $path = "photos/" . $uuid . "-" . $file->name . "." . pathinfo($file->path, PATHINFO_EXTENSION);
+            Storage::disk("s3")->move($file->path, $path);
+            $photo = Photo::create([
+                "uuid" => $uuid,
+                "name" => $file->name,
+                "path" => $path,
+                "user_id" => Auth::user()->id
+            ]);
+            array_push($uuids, $photo->uuid);
+        }
+        if($redirect) {
+            return redirect()->back();
+        }
+        return response()->json([
+            "uuids" => $uuids
+        ]);
+    }
     /**
      * Update the specified resource in storage.
      */

resources/js/Pages/Photo/Partials/Panel.vue

@@ -37,9 +37,9 @@ uuids();
 </script>
 
 <template>
-    <div class="text-left text-black shadow-2xl rounded-lg bg-gray-50
+    <div class="text-left text-black shadow-3xl shadow-gray-900 rounded-lg bg-gray-100 overflow-y-auto
-    border border-gray-300" :class="{ 'w-[30rem]': !panelState.toggle, 'w-[60rem] h-[40rem]': panelState.toggle, }">
+    border border-gray-500" :class="{ 'w-[30rem] max-h-[calc(100vh/2)]': !panelState.toggle, 'w-[60rem] h-[40rem]': panelState.toggle, }">
-        <div v-if="imageState.url" class="max-h-72 overflow-hidden flex items-center">
+        <div v-if="imageState.url && !panelState.toggle" class="max-h-72 overflow-hidden flex items-center">
             <img  :src="imageState.url">
         </div>
         <div class="px-10 pb-5 pt-5">
@@ -59,7 +59,7 @@ uuids();
             v-show="!panelState.toggle"
             @file-added="imageAdded"
             @file-removed="imageRemoved"
-            @data="(uuid) => emits('data', [uuid])"
+            @data="(uuids) => emits('data', uuids)"
             @close="emits('close')"
             :redirect="false"
             /> 

resources/js/Pages/Photo/Partials/PanelCreate.vue

@@ -18,16 +18,18 @@ const props = defineProps({
 const dropzone = ref(null);
 
 const form = useForm({
-    name: "",
+    files: [],
-    path: "",
     redirect: props.redirect, 
 })
 
 const emits = defineEmits(["data", "close", "file-added", "file-removed"]);
 
 const imageAdded = (file) => {
-    form.path = file.key;
+    form.files.push({
-    if(form.name === "") form.name = File.Basename(file.key).split("_")[1];
+        name: File.Basename(file.key).split("_")[1],
+        original_name: File.Basename(file.key).split("_")[1] + "." + File.Extension(file.key),
+        path:file.key,
+    });
     emits('file-added', file)
 } 
 
@@ -39,24 +41,27 @@ const imageRemoved = (file) => {
 
 const submit = async () => {
     if(!props.redirect) {
-        let res = await axios.post("/photo", {
+        let res = await axios.post("/photos", {
-            name: form.name,
+            files: form.files,
-            path: form.path,
             redirect: false, 
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+            }
         })
-        const uuid = res.data.uuid;
+        const uuids = res.data.uuids;
-        console.log(uuid, res);
+        console.log(uuids, res);
-        emits("data", uuid);
+        emits("data", uuids);
     } else {
-        form.post("/photo", {
+        form.post("/photos", {
-        headers: {
+            headers: {
-            "Content-Type": "application/json",
+                "Content-Type": "application/json",
-            "X-CSRF-Token": document.querySelector('input[name=_token]').value,
+                "X-CSRF-Token": document.querySelector('input[name=_token]').value,
-        },
+            },
-    });
+            onSuccess: () => window.location.reload()
+        });
     }
-    form.path = "";
+    form.files = [];
-    form.name = "";
     dropzone.value.removeFiles();
     emits("close");
 }
@@ -71,13 +76,11 @@ const submit = async () => {
         @file-removed="imageRemoved" 
         :name="photos"
         :empty="'Téléversé une image'"
-        :multiple="false"
         :accept="'image/*'"
         :class="'mb-1'" 
         />
         <InputError :message="form.errors.path"/>
-        <p class="mt-3">Nom</p>
+        <TextInput v-for="file in form.files" :class="'mb-1 w-full'" v-model="file.name" required :placeholder="'Changer le nom de l\'image ' + file.original_name"/>
-        <TextInput :class="'mb-1 w-full'" v-model="form.name" required :placeholder="'Nom de la photo'"/>
         <InputError :message="form.errors.name"/>
         <div class="w-full flex justify-end mt-3">
             <button type="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Ajouter</button>

resources/js/Pages/Photo/Partials/PanelDisplay.vue

@@ -49,12 +49,13 @@ initLoad();
 <div class="flex pb-10 h-[35rem]">
     <div class="flex flex-col items-start justify-between w-32 border-r border-gray-200 pr-2">
         <div class="w-full">
-            <p class="my-1 py-1 px-2  text-gray-700 rounded shadow"
+            <p class="px-1 mb-4 py-1 border-b border-gray-200 text-gray-400 font-semibold">Les albums</p>
+            <p class="mb-4 py-1 px-2  text-gray-700 rounded shadow"
             @click="loadAlbum('')"
             :class="{ 'bg-gray-200': albumState.focusAlbum === '', 'bg-gray-100': albumState.focusAlbum !== ''}">Photothèque</p>
             <p v-for="album in albumState.albums" 
             @click="loadAlbum(album.uuid)"
-            class="my-1 py-1 px-2 bg-gray-100 text-gray-700 
+            class="mb-2 py-1 px-2 bg-gray-100 text-gray-700 
             overflow-hidden text-nowrap rounded shadow" 
             :class="{ 'bg-gray-200': albumState.focusAlbum === album.uuid, 'bg-gray-100': albumState.focusAlbum !== album.uuid}">{{ album.name }}</p>
             <p class="my-1 py-1 px-2 bg-gray-100 text-gray-700  rounded shadow">plus d'album</p>

routes/web.php

@@ -21,6 +21,7 @@
     Route::get('/photos', [PhotoController::class, 'index'])->name('photo.index');
     Route::get('/photos/page/{page}', [PhotoController::class, 'pages'])->name('photo.page');
     Route::post('/photo', [PhotoController::class, 'store'])->name('photo.store');
+    Route::post('/photos', [PhotoController::class, 'stores'])->name('photo.stores');
     Route::post('/photo/{id}', [PhotoController::class, 'update'])->name('photo.update');
     Route::delete('/photo/{id}', [PhotoController::class, 'destroy'])->name('photo.destroy');