image upload

[mangga88d]

<script setup> const form = useForm({ id: null, title: null, price: null, quantity: null, description: null, product_images: [], published: null, category_id: null, brand_id: null, inStock: null, }); const productImages = ref([]); const dialogImageUrl = ref(""); const handleFileChange = (file) => { form.product_images=productImages.value.push(file); console.log(files); }; const handlePictureCardPreview = (file) => { dialogImageUrl.value = file.url; dialogVisible.value = true; }; const handleRemove = (file) => { console.log(file); }; //open add modal const openAddModal = () => { isAddProduct.value = true; dialogVisible.value = true; editMode.value = false; }; function addProduct() { form.post( route("admin.product.store"), { preserveState: false }, { onSuccess: (page) => { Swal.fire({ toast: true, icon: "success", position: "center", showConfirmButton: false, title: success, timer: 1000, }); }, } ); }`` <script>

Title

Price

Quantity

Select Category {{ category.name }}

Select Brand {{ brand.name }}

Description <textarea id="message" rows="4" v-model="form.description" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Leave a comment..." ></textarea>

      </div>
    </div>

    <div class="grid md:gap-6">
      <div class="relative z-0 w-full mb-6 group">
        <el-upload
          v-model:file-list="productImages"
          list-type="picture-card"
          multiple
          type="file"
          ref="file"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="handleFileChange"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </div>

public function store(Request $request) { $request->validate([ 'title' => 'required', 'price' => 'required', 'quantity' => 'required', 'description' => 'required', 'product_images' => 'required|image|mimes:jpeg,jpg,png,bmp,gif,svg|max:2048',

    ]);


    $products = Product::create([
        'title' => $request['title'],
        'price' => $request['price'],
        'quantity' => $request['quantity'],
        'description' => $request['description'],
        'category_id' => $request['category_id'],
        'brand_id' => $request['brand_id'],
    ]);
    if ($request->hasFile('product_images')) {
    $productImage = $request->file('product_images');
    foreach ($productImage as $productImages) {
        $imageName = time() . '.' . $productImages->getClientOriginalExtension();
        $productImages->store(('public'), $imageName);
        ProductImage::create([
            'product_id' => $products['id'],
            'product_images' => $imageName,
        ]);
    }

    return Redirect::route('admin.product.index', [])->with('success', 'Product created successfully.');
}
}