حفظ الصور او الملفات و و ضعها في formData و نقالها للباك اند Laravel

نعم، استخدام FormData هو الطريقة الأفضل والمعتمدة لإرسال ملفات وصور من الواجهة الأمامية إلى الخادم.

أيضا السؤال غير واضح قليلا . هل عند تحديد ملف يتم رفعه مباشرة أم تقوم برفع الملف بمجرد الحذف ؟ 

هذا الأمر يعتمد على ما تريد تنفيذه ولكن أنا أرى من الأفضل تحديد الملفات وبعد ذلك يوجد زر لرفعها وليس كل ملف يتم تحديده يتم إرساله إلى الخادم وذلك لعدم الضغط وبطئ الخادم وأيضا لو أردت حفظ بيانات مع الصور هذه الطريقة أفضل لأنه سيتم إرسال جميع البيانات مع الصور في formData. ولكن تلك الطريقة لن تنفع إذا كانت الملفات كبيرة وكثيرة فالأفضل لو الملفات كثيرة يمكنك جعل كل تحديد للملف يتم رفعه ولو قام بإلغاءه يمكنك حذفه من الخادم أيضا .

وأنصحك إذا أردت شئ متقدم يمكنك إستخدام مكتبات جافاسكريبت والتي توفر لك ذلك ومن تلك المكتبات هي مكتبة Dropzone.js والتي تساعدك في رفع الملفات من خلال إرسال الطلبات في الخلفية وتوفر لك رفع الصور مرة واحدة أو رفع كل صورة بمجرد تحديدها وأيضا توجد أحداث عند حذف ملف ما يمكنك إستخدامها لحذف الصور من الخادم.

أما بخصوص الفرق بين fetch و XMLHttpRequest و Ajax .

فإن XMLHttpRequest هي واجهة قديمة لإرسال طلبات HTTP لكن من الصعب إرسال ال API والأفضل لك تجنبها.

أما fetch فهي واجهة حديثة لإرسال الطلبات وهي أسهل وأوضح ويفضل استخدامها.

أما Ajax (jQuery) فهى اختصار ل "Asynchronous JavaScript and XML"، ويستخدم مع مكتبة jQuery وهي قديمة ولكنها سهلة إذا كنت تستخدم jQuery  بالفعل.

وإليك تفاصيل أكثر حول الفروقات بينهم:

السلام عليكم ورحمة الله وبركاته،

بخصوص FormData فهي الطريقة المثلى والمعتمدة لإرسال الملفات، وطريقتك في حفظ الملفات بها صحيحة تماما لحل مشكلة فقدان الملفات عند الإلغاء.

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

وبخصوص تقنيات الإرسال فتقنية XMLHttpRequest هي تقنية قديمة ومعقدة بعض الشيء بالرغم من توفر دعمها الجيد.

أنصحك باستخدام Fetch فهي الخيار الأمثل حاليا كونها حديثة وبسيطة وتدعم async/await.

أما Ajax فهو مصطلح عام يشمل الطرق غير المتزامنة وليست تقنية منفصلة وإذا قصدت jQuery Ajax فهي قديمة وغير محبذة حاليا.

يمكنك التوسع أكثر في الأمر من هنا:

الطريقة التي تصفها لحفظ الملفات في formData ثم نقلها إلى Laravel في الـ back-end هي طريقة صحيحة وشائعة جدًا للتعامل مع تحميل الملفات كما تم الشرح .

ولكن بالنسبة للسؤال هل fetch و XMLHttpRequest و ajax هم نفس الشيء أم أحدهم أفضل من الآخر؟

هؤلاء الثلاثة مرتبطون، لكنهم ليسوا نفس الشيء تمامًا

أولاً XMLHttpRequest  هو كائن API في المتصفح يسمح لك بإجراء طلبات HTTP من JavaScript وكان هو الطريقة الأساسية لإجراء طلبات "Ajax" قبل ظهور fetch.

يعمل على أساس callbacks التي يمكن أن تجعل التعامل مع التعليمات البرمجية غير المتزامنة أكثر تعقيدًا ما يسمى بـ callback hell بدون استخدام الـ Promises.

ثانياً fetch هو واجهة برمجة تطبيقات حديثة وPromise-based لإجراء طلبات HTTP في المتصفح ويعتبر بديلاً أكثر حداثة وسهولة في الاستخدام لـ XMLHttpRequest.

يستخدم الـ Promises مما يجعل التعامل مع التعليمات البرمجية غير المتزامنة أكثر وضوحًا وقابلية للقراءة باستخدام async/await ويتمتع بمرونة أكبر في التعامل مع رؤوس الطلب والاستجابات.

بينما ajax ليس تقنية محددة مثل fetch أو XMLHttpRequest بل مفهوم أو تقنية عامة لإنشاء تطبيقات ويب ديناميكية تتواصل مع الخادم في الخلفية دون الحاجة إلى إعادة تحميل الصفحة بالكامل.

تاريخيًا، كان XMLHttpRequest هو الأداة الرئيسية لتنفيذ Ajax.

الآن، يمكن تنفيذ Ajax باستخدام fetch API أو XMLHttpRequest أو مكتبات مثل Axios أو jQuery's $.ajax().