React.js का उपयोग करके Firebase संग्रहण में फ़ाइलें कैसे अपलोड करें

फायरबेस स्टोरेज उपयोगकर्ता द्वारा जेनरेट किए गए डेटा जैसे छवियों, वीडियो और ऑडियो फाइलों को संग्रहीत करने का एक आसान तरीका प्रदान करता है। यह फायरबेस प्रमाणीकरण के साथ एकीकृत होता है, जिससे आप नियंत्रित कर सकते हैं कि फाइलों तक किसके पास पहुंच है।

आप Firebase का उपयोग करके बड़ी मात्रा में सामग्री संग्रहीत कर सकते हैं क्योंकि यह स्वचालित रूप से आपकी आवश्यकताओं के अनुरूप हो जाती है। रिएक्ट जावास्क्रिप्ट लाइब्रेरी जैसे तीसरे पक्ष के ढांचे के साथ उपयोग करना आसान है

परियोजना सेटअप

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

से शुरू एक प्रतिक्रिया ऐप बनाना क्रिएट-रिएक्शन-ऐप का उपयोग करना। नामक एक प्रतिक्रिया परियोजना उत्पन्न करने के लिए इस आदेश को चलाएँ फायरबेस-अपलोड:

एनपीएक्स सृजन करना-रिएक्ट-ऐप फायरबेस-अपलोड

इसे सरल रखने के लिए, आपको केवल एक इनपुट बटन की आवश्यकता है जो फाइलों को स्वीकार करता है और एक अपलोड बटन। की सामग्री बदलें ऐप.जेएस निम्नलिखित कोड के साथ।

आयात {यूजस्टेट} से "प्रतिक्रिया"





instagram viewer

समारोहअनुप्रयोग() {
 कॉन्स्ट [फ़ाइल, सेटफाइल] = यूज़स्टेट ("");
// इनपुट को संभालता है परिवर्तनप्रतिस्पर्धाऔर अद्यतन स्थिति
समारोहसंभाल बदलें(प्रतिस्पर्धा) {
सेटफाइल(प्रतिस्पर्धा।लक्ष्य.फ़ाइलें[0]);
 }
वापसी (
<डिव>
<इनपुट प्रकार ="फ़ाइल" स्वीकार ="छवि/*" ऑन चेंज = {हैंडल चेंज} />
<बटन>फायरबेस पर अपलोड करें</button>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

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

फायरबेस सेट करें

फ़ाइल को Firebase संग्रहण में अपलोड करने से पहले, आपको एक Firebase प्रोजेक्ट बनाना होगा।

एक फायरबेस प्रोजेक्ट बनाएं

Firebase प्रोजेक्ट बनाने के लिए नीचे दिए गए निर्देशों का पालन करें:

1. के पास जाओ फायरबेस कंसोल पेज और क्लिक करें प्रोजेक्ट जोड़ें या एक प्रोजेक्ट बनाएं (यदि आप पहली बार कोई प्रोजेक्ट बना रहे हैं)।
2. अपने प्रोजेक्ट को अपनी पसंद का नाम दें और क्लिक करें जारी रखें।
3. Google Analytics को अचयनित करें क्योंकि आपको इस प्रोजेक्ट के लिए इसकी आवश्यकता नहीं है और क्लिक करें प्रोजेक्ट बनाएं।
4. क्लिक जारी रखें एक बार परियोजना तैयार हो जाने के बाद।
5. पर क्लिक करें वेब आइकन वेब ऐप रजिस्टर करने के लिए प्रोजेक्ट ओवरव्यू पेज पर।
6. अपने ऐप को एक प्रचलित नाम दें और क्लिक करें पंजीकरण करवाना।
7. प्रदान की गई कॉन्फ़िगरेशन ऑब्जेक्ट की प्रतिलिपि बनाएँ। अपने एप्लिकेशन को Firebase से कनेक्ट करने के लिए आपको इसकी आवश्यकता होगी।

क्लाउड स्टोरेज बकेट बनाएं

फायरबेस फाइलों को क्लाउड स्टोरेज बकेट में स्टोर करता है। इसे बनाने के लिए निम्नलिखित चरणों का पालन करें:

1. परियोजना अवलोकन पृष्ठ पर, पर क्लिक करें भंडारण बाएं नेविगेशन पैनल पर टैब।
2. क्लिक शुरू हो जाओ और चुनें परीक्षण विधि।
3. डिफॉल्ट स्टोरेज बकेट लोकेशन चुनें और क्लिक करें पूर्ण.

अब आप Firebase संग्रहण में फ़ाइलें अपलोड करना प्रारंभ करने के लिए तैयार हैं।

प्रतिक्रिया करने के लिए Firebase जोड़ें

अपने टर्मिनल में, अपने रिएक्ट प्रोजेक्ट फ़ोल्डर में नेविगेट करें। फायरबेस एसडीके स्थापित करने के लिए निम्न आदेश चलाएँ:

NPM इंस्टॉल आग का ठिकाना

एक नई फ़ाइल बनाएँ, firebaseConfig.js, और फायरबेस को इनिशियलाइज़ करें।

आयात {इनिशियलाइज़ऐप} से "फायरबेस/ऐप";
आयात {गेटस्टोरेज} से "फायरबेस / स्टोरेज";
// फायरबेस को इनिशियलाइज़ करें
स्थिरांक ऐप = इनिशियलाइज़ऐप ({
 एपीआई कुंजी: <एपीआई कुंजी>,
 प्रामाणिक डोमेन: <प्रामाणिक डोमेन>,
 प्रोजेक्ट आईडी: <प्रोजेक्ट आईडी>,
 भंडारण बाल्टी: <भंडारण बाल्टी>,
 संदेश भेजने वाला आईडी: <संदेश भेजने वाला आईडी>,
 ऐप आईडी: <ऐप आईडी>,
 मापन आईडी: <मापन आईडी>,
});
// फायरबेस भंडारण संदर्भ
स्थिरांक स्टोरेज = गेटस्टोरेज (ऐप);
निर्यात करनाचूक भंडारण;

फ़ायरबेस ऐप को इनिशियलाइज़ करने के लिए फ़ायरबेस प्रोजेक्ट बनाने के बाद आपको मिली कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग करें।

अंतिम पंक्ति Firebase संग्रहण संदर्भ को निर्यात करती है ताकि आप अपने शेष ऐप से उस इंस्टेंस तक पहुंच सकें।

छवियों को फायरबेस पर अपलोड करने के लिए हैंडलर फ़ंक्शन बनाएं

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

में ऐप.जेएस, फ़ंक्शन जोड़ें हैंडलअपलोड. फ़ंक्शन में, जांचें कि क्या फ़ाइल खाली नहीं है क्योंकि कोई उपयोगकर्ता फ़ाइल चुनने से पहले अपलोड बटन पर क्लिक कर सकता है। यदि फ़ाइल मौजूद नहीं है, तो एक चेतावनी दें जो उपयोगकर्ता को पहले फ़ाइल अपलोड करने के लिए कहे।

समारोहहैंडलअपलोड() {
 अगर (!फ़ाइल) {
 चेतावनी("कृपया पहले एक फ़ाइल चुनें!")
 }
}

यदि फ़ाइल मौजूद है, तो संग्रहण संदर्भ बनाएं। एक भंडारण संदर्भ उस क्लाउड में फ़ाइल के लिए एक सूचक के रूप में कार्य करता है जिस पर आप काम करना चाहते हैं।

आपके द्वारा बनाई गई संग्रहण सेवा को आयात करके प्रारंभ करें firebaseConfig.js फ़ाइल।

आयात भंडारण से "./firebaseConfig.js"

आयात संदर्भ फायरबेस स्टोरेज इंस्टेंस से और स्टोरेज सर्विस और फाइल पथ में तर्क के रूप में पास करें।

आयात {संदर्भ} से "फायरबेस/स्टोरेज"
समारोहहैंडलअपलोड() {
 अगर (!फ़ाइल) {
 चेतावनी("कृपया पहले एक फ़ाइल चुनें!")
 }
स्थिरांक स्टोरेजरेफ = रेफरी (भंडारण, `/ फ़ाइलें /${file.name}`)
}

इसके बाद, फायरबेस स्टोरेज इंस्टेंस को पास करके एक अपलोड टास्क बनाएं अपलोडबाइट्स फिर से शुरू करने योग्य () समारोह। ऐसी कई विधियाँ हैं जिनका आप उपयोग कर सकते हैं, लेकिन यह विशेष विधि आपको किसी अपलोड को रोकने और फिर से शुरू करने की अनुमति देती है। यह प्रगति अद्यतनों को भी उजागर करता है।

अपलोडबाइट्स फिर से शुरू करने योग्य () फ़ंक्शन भंडारण संदर्भ और अपलोड करने के लिए फ़ाइल को स्वीकार करता है।

आयात {
 संदर्भ,
 अपलोडबाइट्स फिर से शुरू करने योग्य 
} से "फायरबेस / स्टोरेज";
समारोहहैंडलअपलोड() {
अगर (!फ़ाइल) {
 चेतावनी ("कृपया पहले एक फ़ाइल चुनें!")
 }
स्थिरांक स्टोरेजरेफ = रेफरी (भंडारण, `/ फ़ाइलें /${file.name}`)
स्थिरांक अपलोड टास्क = अपलोडबाइट्स रिज्यूमेबल (स्टोरेज रेफ, फाइल);
}

प्रगति की निगरानी के लिए और फ़ाइल अपलोड के रूप में त्रुटियों को संभालने के लिए, राज्य परिवर्तन, त्रुटियों और पूर्णता को सुनें।

आयात {
 संदर्भ,
 अपलोडबाइट्स फिर से शुरू करने योग्य,
 डाउनलोड करेंURL 
} से "फायरबेस/भंडारण";
समारोहहैंडलअपलोड() {
 अगर (!फ़ाइल) {
 चेतावनी("कृपया पहले एक फ़ाइल चुनें!")
 }
स्थिरांक स्टोरेजरेफ = रेफरी (भंडारण,`/ फ़ाइलें /${file.name}`)
स्थिरांक अपलोड टास्क = अपलोडबाइट्स रिज्यूमेबल (स्टोरेज रेफ, फाइल);
अपलोड टास्क।पर(
"राज्य_परिवर्तित",
 (स्नैपशॉट) => {
स्थिरांक प्रतिशत = गणित।गोल(
 (स्नैपशॉट.बाइट्सट्रांसफर/स्नैपशॉट.टोटलबाइट्स) *100
 );
// अद्यतन प्रगति
 सेटपरसेंट (प्रतिशत);
 },
 (गलती) => सांत्वना देनालॉग (गलती),
 () => {
// डाउनलोड यूआरएल
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
सांत्वना देनालॉग (यूआरएल);
 });
 }
 ); 
}

यहां ही राज्य_परिवर्तित घटना में तीन कॉलबैक फ़ंक्शन हैं। पहले फ़ंक्शन में, आप अपलोड प्रगति का ट्रैक रख रहे हैं और प्रगति स्थिति अपलोड कर रहे हैं। दूसरे कॉलबैक फ़ंक्शन में, अपलोड विफल होने पर एक त्रुटि को संभालें।

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

आप प्रतिशत स्थिति का उपयोग करके अपलोड की प्रगति स्थिति प्रदर्शित कर सकते हैं। एक भी जोड़ें क्लिक पर ट्रिगर करने के लिए अपलोड बटन पर घटना हैंडलअपलोड समारोह।

आयात {यूजस्टेट} से "प्रतिक्रिया";
समारोहअनुप्रयोग() {
स्थिरांक [प्रतिशत, सेटपरसेंट] = यूजस्टेट (0);
वापसी (
<डिव>
<इनपुट प्रकार ="फ़ाइल" ऑनचेंज = {हैंडल चेंज} स्वीकार करें ="" />
<बटन ऑनक्लिक = {हैंडलअपलोड}>फायरबेस पर अपलोड करें</button>
<पी>{प्रतिशत} "% किया हुआ"</पी>
</div>
 )
}

यहाँ के लिए पूरा कोड है ऐप.जेएस:

आयात {यूजस्टेट} से "प्रतिक्रिया";
आयात { भंडारण } से "./firebaseConfig";
आयात {रेफरी, अपलोडबाइट्स रिज्यूमेबल, getDownloadURL} से "फायरबेस / स्टोरेज";
समारोहअनुप्रयोग() {
// अपलोड की गई फाइल को स्टोर करने के लिए स्टेट
 कॉन्स्ट [फ़ाइल, सेटफाइल] = यूज़स्टेट ("");
// प्रगति
स्थिरांक [प्रतिशत, सेटपरसेंट] = यूजस्टेट (0);
// फ़ाइल अपलोड ईवेंट को संभालें और स्थिति अपडेट करें
समारोहसंभाल बदलें(प्रतिस्पर्धा) {
सेटफाइल(प्रतिस्पर्धा।लक्ष्य.फ़ाइलें[0]);
 }
स्थिरांक हैंडलअपलोड = () => {
 अगर (!फ़ाइल) {
 चेतावनी("कृपया पहले एक छवि अपलोड करें!");
 }
स्थिरांक स्टोरेजरेफ = रेफरी (भंडारण, `/ फ़ाइलें /${file.name}`);
// प्रगति को रोका और फिर से शुरू किया जा सकता है। यह प्रगति अद्यतनों को भी उजागर करता है।
// भंडारण संदर्भ और अपलोड करने के लिए फ़ाइल प्राप्त करता है।
स्थिरांक अपलोड टास्क = अपलोडबाइट्स रिज्यूमेबल (स्टोरेज रेफ, फाइल);
अपलोड टास्क।पर(
"राज्य_परिवर्तित",
 (स्नैपशॉट) => {
स्थिरांक प्रतिशत = गणित।गोल(
 (स्नैपशॉट.बाइट्सट्रांसफर/स्नैपशॉट.टोटलबाइट्स) *100
 );
// अद्यतन प्रगति
 सेटपरसेंट (प्रतिशत);
 },
 (गलती) => सांत्वना देनालॉग (गलती),
 () => {
// डाउनलोड यूआरएल
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
सांत्वना देनालॉग (यूआरएल);
 });
 }
 );
 };
वापसी (
<डिव>
<इनपुट प्रकार ="फ़ाइल" ऑनचेंज = {हैंडल चेंज} स्वीकार करें ="/image/*" />
<बटन ऑनक्लिक = {हैंडलअपलोड}>फायरबेस पर अपलोड करें</button>
<पी>{प्रतिशत} "% किया हुआ"</पी>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

फायरबेस स्टोरेज के साथ और अधिक करना

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

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

Firebase और प्रतिक्रिया के साथ उपयोगकर्ताओं को प्रमाणित करना

आगे पढ़िए

लेखक के बारे में