✍️ مقدمة:
يُعد رفع الملفات أحد أكثر الوظائف شيوعًا في تطبيقات الويب، سواء كنت تبني نظامًا لإرسال المستندات، أو رفع صور، أو حفظ فواتير.
لكن الكثير من المطورين يواجهون مشاكل تتعلق بـ:
-
الأداء عند رفع الملفات الكبيرة
-
واجهة المستخدم السيئة
-
الأمان ومنع رفع ملفات ضارة
في هذا المقال، سنتعلم كيف تبني نظام رفع ملفات عصري باستخدام Laravel مع Livewire، دون الحاجة لـ JavaScript مخصص.
📦 لماذا Laravel + Livewire؟
Laravel يوفر قوة في التعامل مع الملفات، بينما Livewire يتيح إنشاء واجهات تفاعلية دون كتابة JavaScript.
النتيجة: تجربة رفع سلسة، فورية، وآمنة.
🛠️ المتطلبات الأساسية:
-
Laravel 10 أو أحدث
-
Livewire مثبت
-
تفعيل التخزين المحلي
storage:link
🧱 الخطوة 1: إعداد المكون Livewire
php artisan make:livewire FileUploader
📁 الخطوة 2: الكود الخاص برفع الملف
🔸 FileUploader.php
:
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class FileUploader extends Component
{
use WithFileUploads;
public $file;
public function upload()
{
$this->validate([
'file' => 'required|file|max:5120|mimes:jpg,png,pdf,docx',
]);
$filename = $this->file->store('uploads', 'public');
session()->flash('message', 'تم رفع الملف بنجاح: ' . $filename);
}
public function render()
{
return view('livewire.file-uploader');
}
}
🔸 file-uploader.blade.php
:
<div>
@if (session()->has('message'))
<div class="alert alert-success">{{ session('message') }}</div>
@endif
<input type="file" wire:model="file">
@error('file') <span class="text-danger">{{ $message }}</span> @enderror
<button wire:click="upload" class="btn btn-primary mt-2">رفع الملف</button>
</div>
🔐 نصائح الأمان:
(الإجراء)◄ | (السبب) |
---|---|
(التحقق من نوع الملف mimes )◄ |
(لمنع رفع ملفات ضارة مثل .exe) |
(تحديد الحجم الأقصى max )◄ |
(لتقليل استهلاك السيرفر) |
(تخزين الملفات في storage/app/public )◄ |
(لحماية الملفات من الوصول المباشر) |
(استخدام UUID في أسماء الملفات)◄ | (لمنع تكرار الأسماء أو التخمين) |
💡 إضافة تحسينات مستقبلية:
-
عرض شريط تقدم للتحميل
-
السماح برفع ملفات متعددة
-
ربط الملفات بحساب المستخدم
-
إرسال إشعار بعد نجاح الرفع
✅ الخلاصة:
باستخدام Laravel + Livewire، يمكنك بناء نظام رفع ملفات مرن وآمن وسهل الاستخدام، دون الحاجة لأي JavaScript خارجي.
هذا الأسلوب يجعل تجربة المستخدم أكثر تفاعلية ويزيد من احترافية مشروعك.