Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

ऐक्शन से फ़ाइल अपलोड

सुरक्षित भंडारण और प्रसंस्करण सहित, Server Actions के माध्यम से सीधे फ़ाइल अपलोड सँभालना सीखें

पाठ 2, कुल 3 में से11 चरण

ऐक्शन से फ़ाइल अपलोड, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

Actions से फ़ाइलें अपलोड करना

फ़ाइल अपलोड एक आम सुविधा है, जिससे उपयोगकर्ता चित्र, दस्तावेज़ और अन्य सामग्री साझा कर सकते हैं। परंपरागत रूप से, इन्हें संभालने के लिए जटिल API मार्गों और अलग-अलग हैंडलर की आवश्यकता होती थी।

Next.js Server Actions के साथ फ़ाइल अपलोड संभालना बहुत आसान हो जाता है और यह सीधे आपके फ़ॉर्म में अधिक अच्छी तरह एकीकृत रहता है, जिससे संबंधित तर्क एक ही स्थान पर रहता है।

फ़ाइल इनपुट सेट करना

फ़ाइल अपलोड की अनुमति देने के लिए आपको एक विशेष रूप से तैयार किया गया HTML फ़ॉर्म चाहिए। <input type="file"> एलिमेंट उपयोगकर्ता के डिवाइस से फ़ाइलें चुनने के लिए आवश्यक है।

अपने Server Action में फ़ाइल की पहचान करने के लिए name एट्रिब्यूट का उपयोग करें।
अपने <form> टैग में enctype="multipart/form-data" जोड़ें। इससे ब्राउज़र को फ़ाइलों सहित फ़ॉर्म डेटा को सही ढंग से एन्कोड करने का निर्देश मिलता है।

<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFile" />
  <button type="submit">Upload</button>
</form>

FormData के माध्यम से फ़ाइलें प्राप्त करना

जब enctype="multipart/form-data" वाले फ़ॉर्म को Server Action में सबमिट किया जाता है, तो Next.js डेटा को अपने-आप एक FormData ऑब्जेक्ट में पार्स कर देता है।

आप इस FormData ऑब्जेक्ट से अपलोड की गई फ़ाइल या फ़ाइलों को इसकी get() विधि का उपयोग करके प्राप्त कर सकते हैं। यह एक मानक JavaScript File ऑब्जेक्ट लौटाती है।

// app/actions.js
'use server';

export async function uploadFile(formData) {
  const file = formData.get('myFile');
  if (!file) {
    return { error: 'No file uploaded.' };
  }
  // 'file' is a File object
  console.log('File name:', file.name);
  console.log('File size:', file.size, 'bytes');
  console.log('File type:', file.type);
  return { success: true };
}

File ऑब्जेक्ट को समझना

आपके Server Action में प्राप्त File ऑब्जेक्ट एक शक्तिशाली Web API ऑब्जेक्ट है। यह अपलोड की गई फ़ाइल के बारे में महत्वपूर्ण जानकारी उपलब्ध कराता है:

name: उपयोगकर्ता द्वारा दिया गया मूल फ़ाइल नाम।
size: बाइट में फ़ाइल का आकार।
type: फ़ाइल का MIME प्रकार, जैसे "image/jpeg" या "application/pdf"।
arrayBuffer(): फ़ाइल की सामग्री को ArrayBuffer के रूप में प्राप्त करने वाली असमकालिक विधि, जो उसे सहेजने के लिए आवश्यक है।

अपलोड की गई फ़ाइलों को डिस्क पर सहेजना

अपलोड की गई फ़ाइल को स्थायी रूप से सहेजने के लिए आपको File ऑब्जेक्ट से उसकी सामग्री निकालकर किसी संग्रहण स्थान पर लिखनी होगी। arrayBuffer() विधि फ़ाइल को कच्चे बाइनरी डेटा में बदलने में सहायता करती है।

इसके बाद आप इस डेटा को अपने सर्वर के फ़ाइल सिस्टम में लिखने के लिए Node.js के अंतर्निहित fs/promises मॉड्यूल का उपयोग कर सकते हैं।

// app/actions.js (continued)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

export async function saveUploadedFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name; // Unique filename
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  try {
    await writeFile(filePath, buffer);
    console.log('File saved to:', filePath);
    return { success: true, filename };
  } catch (error) {
    console.error('Error saving file:', error);
    return { error: 'Failed to save file.' };
  }
}

फ़ाइल अपलोड का सत्यापन करना

सुरक्षा संबंधी कमज़ोरियों को रोकने और डेटा की अखंडता सुनिश्चित करने के लिए सर्वर-पक्ष पर अपलोड की गई फ़ाइलों का सत्यापन करना अत्यंत आवश्यक है। हमेशा जाँचें:

फ़ाइल का प्रकार: सुनिश्चित करें कि फ़ाइल का MIME प्रकार आपके अनुमत प्रकारों में शामिल हो, जैसे केवल चित्र, निष्पादन योग्य फ़ाइलें नहीं।
फ़ाइल का आकार: सेवा-अस्वीकार हमलों या अत्यधिक संग्रहण उपयोग को रोकने के लिए अधिकतम आकार सीमित करें।

क्लाइंट-पक्ष सत्यापन उपयोगकर्ता अनुभव के लिए सहायक है, लेकिन इसे दरकिनार किया जा सकता है; इसलिए सर्वर-पक्ष जाँच अनिवार्य है।

सर्वर-पक्ष सत्यापन लागू करना

फ़ाइल सहेजने से पहले अपने Server Action में बुनियादी प्रकार और आकार सत्यापन जोड़ने का तरीका यहाँ दिया गया है। इससे आपकी अपलोड प्रक्रिया अधिक मजबूत और सुरक्षित बनती है।

// app/actions.js (validation added)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

const MAX_FILE_SIZE = 1024 * 1024 * 5; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];

export async function validateAndSaveFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  if (file.size > MAX_FILE_SIZE) {
    return { error: 'File too large (max 5MB).' };
  }
  if (!ALLOWED_TYPES.includes(file.type)) {
    return { error: 'Invalid file type.' };
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name;
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  await writeFile(filePath, buffer);
  return { success: true, filename };
}

एकाधिक फ़ाइल अपलोड संभालना

उपयोगकर्ताओं को एक साथ कई फ़ाइलें अपलोड करने की अनुमति देने के लिए अपने <input type="file"> टैग में केवल multiple एट्रिब्यूट जोड़ें।

सर्वर पर formData.getAll('myFiles') File ऑब्जेक्ट की एक सरणी लौटाएगा, जिससे आप हर फ़ाइल पर अलग-अलग प्रक्रिया चला सकते हैं।

// HTML for multiple files:
<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFiles" multiple />
  <button type="submit">Upload</button>
</form>

// Server Action for multiple files:
'use server';

export async function uploadMultipleFiles(formData) {
  const files = formData.getAll('myFiles');
  if (!files || files.length === 0) return { error: 'No files.' };

  const uploadedNames = [];
  for (const file of files) {
    // Perform validation and saving for each file
    console.log('Processing file:', file.name);
    uploadedNames.push(file.name);
  }
  return { success: true, uploadedNames };
}

स्थानीय संग्रहण से आगे

स्थानीय रूप से फ़ाइलें सहेजना विकास और छोटी परियोजनाओं के लिए उपयुक्त है, लेकिन प्रोडक्शन अनुप्रयोग अक्सर विस्तार-क्षमता, विश्वसनीयता और सुरक्षा के लिए क्लाउड संग्रहण समाधानों का उपयोग करते हैं।

लोकप्रिय विकल्पों में AWS S3, Google Cloud Storage और Cloudinary शामिल हैं। Server Actions इन सेवाओं के SDK में फ़ाइल का ArrayBuffer भेजकर सीधे इनके साथ एकीकृत हो सकते हैं और मजबूत संग्रहण क्षमताएँ प्रदान कर सकते हैं।

फ़ाइल अपलोड प्रश्नोत्तरी

निम्नलिखित में से कौन-सा HTML एट्रिब्यूट किसी बुनियादी फ़ॉर्म द्वारा फ़ाइल डेटा को Next.js Server Action में सही ढंग से भेजने के लिए बिल्कुल आवश्यक है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन और अगले चरण

आपने Next.js Server Actions का उपयोग करके फ़ाइल अपलोड संभालना सीख लिया है!

enctype="multipart/form-data" और <input type="file"> के साथ HTML फ़ॉर्म तैयार करें।
अपने Server Actions में FormData ऑब्जेक्ट से अपलोड की गई फ़ाइलों को File ऑब्जेक्ट के रूप में प्राप्त करें।
File ऑब्जेक्ट की सामग्री को Buffer.from(await file.arrayBuffer()) में बदलकर Node.js fs/promises का उपयोग करते हुए फ़ाइलों को डिस्क पर सहेजें।
सुरक्षा बढ़ाने के लिए फ़ाइल प्रकारों और आकारों का आवश्यक सर्वर-पक्ष सत्यापन लागू करें।
इनपुट में multiple एट्रिब्यूट जोड़कर और formData.getAll() का उपयोग करके एकाधिक फ़ाइल अपलोड संभालें।

इसके बाद, कार्रवाई के बाद अधिक सहज उपयोगकर्ता अनुभव के लिए Optimistic UI अपडेट उपलब्ध कराने का तरीका जानें!

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 88

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ऐक्शन से फ़ाइल अपलोड” पाठ निःशुल्क है?

हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ऐक्शन से फ़ाइल अपलोड” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“ऐक्शन से फ़ाइल अपलोड” में मैं क्या सीखूँगा?

सुरक्षित भंडारण और प्रसंस्करण सहित, Server Actions के माध्यम से सीधे फ़ाइल अपलोड सँभालना सीखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।

“ऐक्शन से फ़ाइल अपलोड” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

आशावादी UI अपडेट
ऐक्शन से फ़ाइल अपलोड
Server Actions में सत्यापन और त्रुटि प्रबंधन

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ