1 परिचय

वेब एप्लिकेशन विकसित करते समय नेक्स्ट.जेएस में छवियां अपलोड करना एक सामान्य कार्य है। इस ट्यूटोरियल में, हम दो अलग-अलग दृष्टिकोणों का पता लगाएंगे:

• फ़ाइलों को सीधे अपने बैकएंड पर अपलोड करना (नेक्स्ट.जेएस के साथ)।
• फ़ाइलस्टैक का उपयोग करना, एक सेवा जो क्लाउड में फ़ाइल प्रबंधन को सरल बनाती है।

पूर्वावश्यकताएँ:

• Next.js का नवीनतम संस्करण स्थापित है।
• React और Node.js का बुनियादी ज्ञान।
• फ़ाइलस्टैक अनुभाग के लिए, आपको एक फ़ाइलस्टैक खाता की आवश्यकता होगी।

2. छवियाँ सीधे अपलोड करना (फ़ाइल अपलोड)

सबसे पहले, आइए देखें कि आप बाहरी सेवाओं का उपयोग किए बिना सीधे नेक्स्ट.जेएस में फ़ाइल अपलोड को कैसे संभाल सकते हैं।

चरण 1: नेक्स्ट.जेएस में अपलोड फॉर्म बनाएं

एक छवि चुनने और अपलोड करने के लिए अपने इच्छित घटक में एक फॉर्म बनाएं। यहां, हम फ़ाइल को संग्रहीत करने और उसे बैकएंड पर भेजने के लिए लाने के लिए यूज़स्टेट का उपयोग करते हैं।

import { useState } from 'react';

export default function UploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', selectedFile);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      console.log('File uploaded successfully');
    } else {
      console.error('Error uploading file');
    }
  };

  return (
    

चरण 2: अपलोड को संभालने के लिए एपीआई बनाएं

अब, बैकएंड में छवि को संसाधित करने के लिए Next.js में एक एंडपॉइंट बनाएं। हम सर्वर-साइड संचालन को संभालने के लिए नेक्स्ट.जेएस एपीआई मार्गों का उपयोग करेंगे।

पेज/एपीआई/अपलोड.जेएस में एक फ़ाइल बनाएं:

import fs from 'fs';
import path from 'path';

export const config = {
  api: {
    bodyParser: false, // Disable bodyParser to handle large files
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      const buffer = Buffer.concat(chunks);
      const filePath = path.resolve('.', 'uploads', 'image.png'); // Saves to the `uploads` folder

      fs.writeFileSync(filePath, buffer);
      res.status(200).json({ message: 'File uploaded successfully' });
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

चरण 3: अपलोड फ़ोल्डर बनाएं

सुनिश्चित करें कि आपके प्रोजेक्ट के रूट में अपलोड नामक एक फ़ोल्डर है। आप इसे मैन्युअल रूप से बना सकते हैं:

mkdir uploads

इसके साथ, अब आप एक छवि का चयन कर सकते हैं और इसे सीधे अपने सर्वर पर अपलोड कर सकते हैं।

3. फाइलस्टैक के साथ छवियाँ अपलोड करना

अब, यदि आप फ़ाइलस्टैक जैसी बाहरी सेवा का उपयोग करना पसंद करते हैं, जो फ़ाइल होस्टिंग, सीडीएन और कुशल छवि प्रबंधन प्रदान करती है, तो यहां बताया गया है कि आप यह कैसे कर सकते हैं।

चरण 1: फ़ाइलस्टैक स्थापित करें

सबसे पहले, हमें आपके नेक्स्ट.जेएस प्रोजेक्ट में फाइलस्टैक पैकेज इंस्टॉल करना होगा।

npm install filestack-js

चरण 2: फ्रंटएंड में फ़ाइलस्टैक सेट करें

इसके बाद, एक घटक में फाइलस्टैक विजेट सेट करें ताकि उपयोगकर्ता छवियों का चयन और अपलोड कर सकें। यह सीधा है, क्योंकि फाइलस्टैक उपयोग के लिए तैयार विजेट प्रदान करता है।

यहां एक उदाहरण कार्यान्वयन है:

import { useState } from 'react';
import * as filestack from 'filestack-js';

const client = filestack.init('YOUR_API_KEY'); // Replace with your API Key

export default function FilestackUpload() {
  const [imageUrl, setImageUrl] = useState('');

  const handleUpload = async () => {
    const result = await client.picker({
      onUploadDone: (res) => {
        setImageUrl(res.filesUploaded[0].url);
        console.log('File uploaded: ', res.filesUploaded[0].url);
      },
    }).open();
  };

  return (
    

      Upload Image with Filestack
      {imageUrl && }
    
  );
}

चरण 3: अपनी फाइलस्टैक एपीआई कुंजी प्राप्त करें

फ़ाइलस्टैक के काम करने के लिए, आपको फ़ाइलस्टैक पर एक खाता बनाना होगा और अपनी एपीआई कुंजी तैयार करनी होगी। ऊपर दिए गए कोड में YOUR_API_KEY को आपको दिए गए कोड से बदलें।

चरण 4: अपलोड की गई छवि प्रदर्शित करें

एक बार जब उपयोगकर्ता एक छवि अपलोड कर देता है, तो आप इसे फाइलस्टैक द्वारा उत्पन्न यूआरएल का उपयोग करके प्रदर्शित कर सकते हैं:

{imageUrl && }

4. निष्कर्ष

और बस इतना ही! Next.js एप्लिकेशन में छवि अपलोड को संभालने के लिए अब आपके पास दो दृष्टिकोण हैं:

• अपने बैकएंड पर सीधे अपलोड करें।
• फ़ाइलस्टैक का उपयोग करके अपलोड करें, जो आपको अधिक उन्नत और स्केलेबल समाधान देता है यदि आप फ़ाइल भंडारण को स्वयं प्रबंधित नहीं करना चाहते हैं।