React Academy · पाठ

फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना

को संभालें, फ़ाइल मेटाडेटा पढ़ें और FileReader से छवियों का पूर्वावलोकन करें

पाठ 2, कुल 4 में से13 चरण

फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप React में फ़ाइल इनपुट संभालेंगे, फ़ाइल मेटाडेटा पढ़ेंगे, चयनित छवियों का पूर्वावलोकन करेंगे और फ़ाइल की सामग्री संसाधित करने के लिए FileReader API का उपयोग करेंगे

फ़ाइल इनपुट तत्व

`` तत्व को React के मान प्रॉप द्वारा नियंत्रित नहीं किया जा सकता — यह हमेशा अनियंत्रित होता है। `e.target.files[0]` से चयनित फ़ाइल पढ़ने के लिए onChange हैंडलर का उपयोग कीजिए
function FileInput() {
  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file.name, file.size, file.type);
  };
  return <input type="file" onChange={handleChange} />;
}

फ़ाइल ऑब्जेक्ट के गुण

एक File ऑब्जेक्ट Blob का विस्तार करता है और इसमें ये गुण होते हैं: `name` (फ़ाइल नाम), `size` (बाइट), `type` (image/png जैसे MIME प्रकार) और `lastModified` (समय-चिह्न)। अपलोड या संसाधित करने से पहले इन्हें पढ़िए

विशिष्ट फ़ाइल प्रकार स्वीकार करना

ब्राउज़र को यह संकेत देने के लिए `accept` विशेषता का उपयोग कीजिए कि कौन-से फ़ाइल प्रकार दिखाने हैं। MIME प्रकारों और एक्सटेंशन को मिलाकर उपयोग कीजिए। सर्वर-पक्ष पर भी हमेशा सत्यापन कीजिए
<input type="file" accept="image/png,image/jpeg,.pdf" />

कई फ़ाइलों का चयन

कई फ़ाइलें चुनने की अनुमति देने के लिए `multiple` विशेषता जोड़िए। `e.target.files` एक FileList लौटाता है — सरणी विधियों का उपयोग करने के लिए इसे `Array.from()` से सरणी में बदलिए
<input type="file" multiple />

const files = Array.from(e.target.files);

URL.createObjectURL से छवि का पूर्वावलोकन

`URL.createObjectURL(file)` का उपयोग करके चयनित छवि फ़ाइल के लिए अस्थायी पूर्वावलोकन URL बनाइए। काम पूरा होने पर मेमोरी खाली करने के लिए उसे `URL.revokeObjectURL` से रद्द करना याद रखिए
const [preview, setPreview] = useState(null);

const handleChange = (e) => {
  const file = e.target.files[0];
  if (file) setPreview(URL.createObjectURL(file));
};

useEffect(() => {
  return () => { if (preview) URL.revokeObjectURL(preview); };
}, [preview]);

{preview && <img src={preview} alt="Preview" />}

FileReader से फ़ाइल की सामग्री पढ़ना

फ़ाइल की सामग्री को पाठ या डेटा URL के रूप में पढ़ने के लिए `FileReader` API का उपयोग कीजिए। पाठ फ़ाइलों के लिए `reader.readAsText(file)` या छवियों जैसी बाइनरी फ़ाइलों के लिए `reader.readAsDataURL(file)` कॉल कीजिए
const reader = new FileReader();
reader.onload = (e) => setContent(e.target.result);
reader.readAsText(file);

फ़ाइल आकार का सत्यापन

अपलोड करने से पहले क्लाइंट पर फ़ाइल का आकार सत्यापित कीजिए। निर्धारित सीमा से बड़ी फ़ाइलों को अस्वीकार करके त्रुटि संदेश दिखाइए
const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
if (file.size > MAX_SIZE) {
  setError('File must be under 5 MB');
  return;
}

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

फ़ाइल इनपुट का मान सेट करके उसे साफ़ नहीं किया जा सकता, क्योंकि वह केवल-पठन योग्य होता है। इसके बजाय, रेफ़ के माध्यम से अनिवार्य रूप से उसे रीसेट कीजिए या इनपुट का `key` प्रॉप बदलकर उसे फिर से माउंट कीजिए
const inputRef = useRef();
const clear = () => { inputRef.current.value = ''; };
<input ref={inputRef} type="file" />

फ़ाइल संदर्भों को स्थिति में रखना

स्थिति में स्वयं File ऑब्जेक्ट रखिए, केवल नाम या URL नहीं। इससे आप DOM से दोबारा पढ़े बिना बाद में फ़ाइल अपलोड कर सकते हैं
const [file, setFile] = useState(null);
const handleChange = (e) => setFile(e.target.files[0] || null);

त्वरित जाँच

ब्राउज़र में चयनित छवि फ़ाइल का पूर्वावलोकन करने के लिए कौन-सी विधि अस्थायी URL बनाती है

पुनरावलोकन

चयनित फ़ाइलों को e.target.files से पढ़िए। पूर्वावलोकन के लिए URL.createObjectURL और सामग्री पढ़ने के लिए FileReader का उपयोग कीजिए, क्लाइंट पर आकार का सत्यापन कीजिए और बाद में अपलोड करने के लिए File ऑब्जेक्ट को स्थिति में रखिए

आगे

अगला पाठ: **फ़ाइल अपलोड के लिए खींचना और छोड़ना UI** — आप React इवेंट्स का उपयोग करके दृश्य प्रतिक्रिया वाला खींचने और छोड़ने का क्षेत्र बनाएँगे
शुरुआत निःशुल्क

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

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

पाठ्यक्रम
88
पाठ
324

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

क्या “फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना” पाठ निःशुल्क है?

हाँ—“फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना” में मैं क्या सीखूँगा?

को संभालें, फ़ाइल मेटाडेटा पढ़ें और FileReader से छवियों का पूर्वावलोकन करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना” पाठ पूरा करने में कितना समय लगता है?

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

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

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

  1. useRef से Uncontrolled Inputs
  2. फ़ाइल इनपुट और फ़ाइल डेटा पढ़ना
  3. Drag & Drop फ़ाइल अपलोड UI
  4. बैकएंड API पर फ़ाइलें अपलोड करना
← React Academy पर वापस जाएँ