validating the form, and keeping dropzone image

app/Http/Controllers/PostController.php

@@ -24,4 +24,13 @@ class PostController extends Controller implements HasMiddleware
     {
         return view("posts.create");
     }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            "title" => "required|max:255",
+            "description" => "required",
+            "image" => "required"
+        ]);
+    }
 }

resources/js/app.js

@@ -8,10 +8,33 @@ const dropzone = new Dropzone("#dropzone", {
     addRemoveLinks: true,
     maxFiles: 1,
     uploadMultiple: false,
-});
 
-dropzone.on("sending", function (file, xhr, formData) {});
+    init: function () {
+        if (document.querySelector('[name="image"]').value.trim()) {
+            const publishedImage = {};
+            publishedImage.size = 1234;
+            publishedImage.name =
+                document.querySelector('[name="image"]').value;
+
+            this.options.addedfile.call(this, publishedImage);
+            this.options.thumbnail.call(
+                this,
+                publishedImage,
+                `/uploads/${publishedImage.name}`
+            );
+
+            publishedImage.previewElement.classList.add(
+                "dz-success",
+                "dz-complete"
+            );
+        }
+    },
+});
 
 dropzone.on("success", function (file, response) {
-    console.log(response);
+    document.querySelector('[name="image"]').value = response.image;
+});
+
+dropzone.on("removedfile", function (file) {
+    document.querySelector('[name="image"]').value = "";
 });

resources/views/posts/create.blade.php

@@ -18,7 +18,7 @@
         </div>
 
         <div class="md:w-1/2 p-10 bg-white rounded-lg shadow-xl mt-10 md:mt-0">
-            <form action="#" method="POST">
+            <form action="{{ route('posts.store') }}" method="POST">
                 @csrf
 
                 <div class="mb-5">
@@ -37,9 +37,7 @@
                 <div class="mb-5">
                     <label for="description" class="mb-2 block uppercase text-gray-500 font-bold">Description</label>
                     <textarea id="description" name="description" placeholder="Post's Description"
-                        class="border p-3 w-full rounded-lg @error('description')border-red-500 @enderror">
-                        {{ old('description') }}
-                    </textarea>
+                        class="border p-3 w-full rounded-lg @error('description')border-red-500 @enderror">{{ old('description') }}</textarea>
 
                     @error('description')
                         <p class="bg-red-500 text-white my-2 rounded-lg text-sm p-2 text-center">
@@ -48,6 +46,16 @@
                     @enderror
                 </div>
 
+                <div class="mb-5">
+                    <input type="hidden" name="image" value="{{ old('image') }}">
+
+                    @error('image')
+                        <p class="bg-red-500 text-white my-2 rounded-lg text-sm p-2 text-center">
+                            {{ $message }}
+                        </p>
+                    @enderror
+                </div>
+
                 <input type="submit" value="Create Post"
                     class="bg-sky-600 hover:bg-sky-700 transition-colors cursor-pointer uppercase font-bold w-full p-3 text-white rounded-lg">
             </form>

routes/web.php

@@ -21,5 +21,6 @@ Route::post("/logout", [LogoutController::class, "store"])->name("logout");
 
 Route::get("/{user:username}", [PostController::class, "index"])->name("posts.index");
 Route::get("/posts/create", [PostController::class, "create"])->name("posts.create");
+Route::post("/posts", [PostController::class, "store"])->name("posts.store");
 
 Route::post("/images", [ImageController::class, "store"])->name("images.store");