Next.js 15 Fullstack Web Apps · درس

رفع الملفات ومعالجة النماذج متعددة الأجزاء

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

الدرس 4 من 413 خطوة

رفع الملفات ومعالجة النماذج متعددة الأجزاء درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The File Input

Users send files through <input type="file">. Adding multiple allows several files, and accept filters the picker by type.

<input type="file" accept="image/*" multiple />

Reading Selected Files

The input exposes a FileList on its files property. Each File carries the name, size, and MIME type.

function onChange(e) {
  const file = e.target.files[0];
  console.log(file.name, file.size, file.type);
}

Client-Side Preview

Generate an instant preview without uploading using URL.createObjectURL, which makes a temporary local URL for the file.

const url = URL.createObjectURL(file);
setPreview(url);  // <img src={preview} />

Client-Side Validation

Reject bad files before they leave the browser to save bandwidth and give fast feedback:

Check file.type against allowed MIME types
Check file.size against a max

if (file.size > 5 * 1024 * 1024) {
  alert('Max 5 MB');
  return;
}

What Is multipart/form-data?

Files cannot ride in JSON. The browser encodes them as multipart/form-data: each field becomes a part with its own headers, and binary file content stays intact.

Building FormData

The FormData object assembles a multipart body programmatically. Append fields and files, then send it with fetch — do not set the Content-Type yourself; the browser adds the boundary.

const fd = new FormData();
fd.append('avatar', file);
fd.append('userId', '42');
await fetch('/api/upload', { method: 'POST', body: fd });

Handling Uploads in Next.js

A Server Action or route handler reads the multipart body. With the Web API, call request.formData() and pull the file out.

export async function POST(req) {
  const form = await req.formData();
  const file = form.get('avatar');
  const bytes = await file.arrayBuffer();
  // save bytes...
  return Response.json({ ok: true });
}

Server-Side Validation

Never trust the client. Re-validate on the server: confirm the MIME type, enforce the size limit, and sanitize the filename to avoid path traversal before writing to disk or storage.

Storing Files

For production, do not store uploads on the app server filesystem (it is ephemeral). Stream them to object storage such as S3 or a managed blob store, and save only the resulting URL in your database.

Upload Progress

To show a progress bar you need byte-level events, which fetch does not expose for uploads. Use XMLHttpRequest and listen to its upload.onprogress event.

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  setPct(Math.round((e.loaded / e.total) * 100));
};
xhr.open('POST', '/api/upload');
xhr.send(fd);

Security Checklist

Safe uploads require:

Allowlist of MIME types and extensions
Hard size limits enforced server-side
Randomized, sanitized stored filenames
Never executing or serving uploads from a trusted path

Quick Check

Test your file-upload knowledge.

أجب عليها في الدرس التفاعلي

Recap

You learned to handle uploads end to end:

The file input yields a FileList with name, size, type
Preview with createObjectURL and validate on the client
Send a FormData multipart body; read it with request.formData()
Always re-validate server-side, store in object storage, and follow the security checklist

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «رفع الملفات ومعالجة النماذج متعددة الأجزاء» مجاني؟

نعم — نص درس «رفع الملفات ومعالجة النماذج متعددة الأجزاء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «رفع الملفات ومعالجة النماذج متعددة الأجزاء»؟

اسمح للمستخدمين بتحميل الملفات عبر إدخال الملفات، واعرض معاينتها على العميل، وعالج عمليات الرفع متعددة الأجزاء على الخادم مع التحقق من الصحة وعرض التقدم. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «رفع الملفات ومعالجة النماذج متعددة الأجزاء»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

المكونات المتحكم بها والحالة
التحقق من صحة النماذج باستخدام React Hook Form
نماذج Fullstack باستخدام إجراءات الخادم
رفع الملفات ومعالجة النماذج متعددة الأجزاء

← العودة إلى Next.js 15 Fullstack Web Apps