फायरबेस स्टोरेज में इमेज कैसे अपलोड करें और रिएक्ट + फायरबेस में फायरस्टोर डेटाबेस में उस इमेज के URL को कैसे सेव करें

इसलिए हाल ही में मैं प्रतिक्रिया और फायरबेस में पंजीकरण फॉर्म के साथ काम करते हुए एक छोटे से कार्यान्वयन में फंस गया था, जहां मैं फायरस्टार डेटाबेस के दस्तावेज़ में अपलोड की गई छवियों के URL को सहेजना चाहता था।
आइए इस लेख में इसका अन्वेषण करें।

टीएल; डीआर
आइए हमारे डेमो को क्रिया में देखें:

कार्यान्वयन:

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

• सामग्री-यूआई (आप अपनी पसंद के किसी भी सीएसएस ढांचे का उपयोग कर सकते हैं)
• firebase

अब हम कुछ संस्थाओं जैसे ऐप, ऑथेंटिकेशन और स्टोरेज ऑब्जेक्ट को एक्सपोर्ट करेंगे और अपने ऐप.जेएस में उनका इस्तेमाल करेंगे।

आइए अपनी मुख्य फ़ाइल के मूल में कूदें, हमारे पास पहले एक सामग्री-यूआई इनपुट तत्व था और इसे एक हैंडलसबमिट इवेंट हैंडलर के अंदर लपेटा गया था।
अब हम बारीकी से देखेंगे कि कैसे हम अपलोड की गई छवियों के URL को firestore डेटाबेस में वैश्विक रूप से सुलभ बनाने के लिए सहेज सकते हैं:

• चरण 1: अपलोड की गई इमेज को स्टोरेज में स्टोर करना:
  सबसे पहले हमने अपने इमेज स्टोरेज के लिए स्टोरेज रिफ नाम का एक रेफरेंस बनाया और इसे अपलोडबाइट्स रिज्यूमेबल फंक्शन में भेज दिया, जो इस रेफरेंस और अपलोड करने के लिए जरूरी फाइल को स्वीकार करता है। अधिक विस्तृत प्रक्रिया के लिए, इसे देखें ।
• चरण 2: इस छवि को फायरस्टोर डेटाबेस में एक URL के रूप में संग्रहीत करना:
  हमने अपने फायरस्टोर नाम के संग्रह के लिए एक सामान्य संदर्भ बनाया है, जो 3 पैरामीटर लेता है जो db ऑब्जेक्ट, संग्रह का नाम है और अंतिम दस्तावेज़ आईडी है (जो ऑटो-जेनरेट किया जा सकता है या कुछ अर्थपूर्ण संदर्भ हो सकता है) आपके आवेदन के लिए, यहां सादगी के लिए मैंने दस्तावेज़ आईडी को हार्डकोड किया है।
  फिर हमारे पास एक uploadTask.on() ईवेंट है, जिसमें एक कॉलबैक फ़ंक्शन है जिसके अंदर हमने वादा आधारित getDownloadURL फ़ंक्शन का उपयोग किया है और छवियों का url downloadURL चर में प्राप्त किया है ।
  अब महत्वपूर्ण भाग आता है जिसे हमने अपडेटडॉक फ़ंक्शन का उपयोग करके अपने दस्तावेज़ में इस url को पुश किया। (ध्यान दें कि हम सेटडॉक फ़ंक्शन का उपयोग कर सकते थे लेकिन हमने उपयोग कियाupdateDoc क्योंकि हम पूरे दस्तावेज़ को ओवरराइट किए बिना दस्तावेज़ के कुछ फ़ील्ड अपडेट करना चाहते थे।

यदि आपको कोई संदेह है या किसी और सहायता की आवश्यकता है, तो बस इतना ही, पढ़ने के लिए धन्यवाद