رفع الصور باستخدام React وLaravel بشكل سهل

تعتبر عملية رفع الصور في تطبيقات الويب من الميزات الأساسية التي يطلبها الكثير من المطورين، وخاصة عند العمل على مشروع يعتمد على React وLaravel. تواجه العديد من المطورين، خصوصًا أولئك الجدد في هذا المجال، تحديات مختلفة أثناء تنفيذ هذه العملية، فمثلاً قد تعمل الوظائف بشكل جيد عند استخدام Postman، لكن عندما يتعلق الأمر بتطبيق React، تظهر بعض الأخطاء.

كيفية تحميل الصورة باستخدام React وLaravel

هناك طريقة شائعة لرفع الصور باستخدام React وLaravel، حيث يتم استخدام مكتبة Axios للتواصل مع واجهة برمجة التطبيقات (API) الخاصة بلغة Laravel. بالإضافة إلى ذلك، من المهم التأكد من أن البيانات المرسلة إلى الخادم تتضمن كل المعلومات المطلوبة بالشكل الصحيح.

في هذا المثال، نقوم بإنشاء نموذج لتحميل صورة باستخدام React. سنبدأ بإعداد النموذج الخاص بنا، وبعدها سنقوم بإرسال البيانات إلى خادم Laravel.

import React, { useRef } from "react";
import axiosClient from "../../../axios-client";
function FormToAddFile() {
    const fileValue = useRef();
    const nameValue = useRef();
    const descriptionValue = useRef();
    const SaveFile = () => {
        const payload = {
            image: fileValue.current.files[0], // نقوم بتمرير ملف الصورة 
            name: nameValue.current.value,
            description: descriptionValue.current.value,
        };
        console.log("tosave", payload);
        axiosClient.post("/storefile", payload, {
            headers: { 'Content-Type': "multipart/form-data" },
        }).then(({ data }) => {
            console.log(data);
        }).catch((err) => {
            console.log(err);
        });
    };
    return (
        <form onSubmit={(e) => {
            e.preventDefault();
            SaveFile();
        }}>
            <input type="file" ref={fileValue} />
            <input type="text" placeholder="اسم المنتج" ref={nameValue} />
            <input type="text" placeholder="وصف المنتج" ref={descriptionValue} />
            <button type="submit">تحميل</button>
        </form>
    );
}

التأكد من إعدادات Laravel

عند العمل مع Laravel، من الضروري أن تحتوي الإعدادات على الطرق الصحيحة لاستقبال الملفات وطلب المعلومات. يتم استخدام كلاس FilesStoreRequest لمعالجة الطلب. يجب التأكد من أن الكود التالي موجود في الخادم:

public function storeFile(FilesStoreRequest $request) {
    try {
        $imageName = Str::random(32) . "." . $request->image->getClientOriginalExtension();
        // إنشاء ملف منتج جديد
        Product::create([
            'name' => $request->name,
            'image' => $imageName,
            'description' => $request->description,
        ]);
        // حفظ الصورة في مجلد التخزين
        Storage::disk('public')->put($imageName, file_get_contents($request->image));
        // إرجاع استجابة Json
        return response()->json([
            'message' => "تم إنشاء المنتج بنجاح."
        ], 200);
    } catch (\Exception $e) {
        // إرجاع استجابة Json في حال وجود خطأ
        return response()->json([
            'message' => "حدث خطأ ما!"
        ], 500);
    }
}

التأكد من بنية الطلبات

غالبًا ما تتسبب الأخطاء مثل "422 (المحتوى غير القابل للمعالجة)" في إحباط المطورين، حيث تشير هذه الرسالة إلى وجود مشكلة في البيانات المرسلة. عند إرسال البيانات من React، يجب التأكد من أن جميع الحقول المطلوبة، مثل الصورة واسم المنتج والوصف، قد تم تضمينها.

كيفية تجنب الأخطاء الشائعة

1. التأكد من أن الملف قد تم تحميله بشكل صحيح: يجب التأكد من أن الكود المنفذ في SaveFile يقوم بتمرير ملف الصورة بشكل صحيح، حيث نستخدم fileValue.current.files[0] لجلب الملف الأول من حقل رفع الملفات.

2. تحديد نوع المحتوى الصحيح: عند استدعاء API، يجب تحديد نوع المحتوى ليكون multipart/form-data، وذلك لتأكيد أن الخادم يعرف طريقة معالجة البيانات المرسلة إليه.

3. التأكد من إعدادات CORS: في حال كان React وLaravel يعملان على موانئ مختلفة، تأكد من إعدادات CORS في Laravel للسماح بالطرازات المطلوبة.

4. اختبار مع بيانات مختلفة: تأكد من تجربة رفع صور وبطاقات بيانات مختلفة لمعرفة ما إذا كانت المشكلة تتعلق بنوع البيانات.

بالختام، عملية رفع الصورة باستخدام React وLaravel يمكن أن تكون سهلة إذا تم اتباع الخطوات الصحيحة. تذكر دائمًا مراجعة الأخطاء والإعدادات اللازمة في كلا الجانبين (الواجهة الأمامية والخلفية) لضمان تجربة سلسة للمستخدمين. مع القليل من التجربة، ستتمكن من التعامل مع هذه العملية بفاعلية.