एक प्रतिक्रिया और रेल ऐप में फ़ाइलें कैसे अपलोड करें

ब्लॉग

एक प्रतिक्रिया और रेल ऐप में फ़ाइलें कैसे अपलोड करें

एक प्रतिक्रिया और रेल ऐप में फ़ाइलें कैसे अपलोड करें

इस गाइड में, हम कवर करेंगे कि रिएक्ट एप्लिकेशन में इमेज / वीडियो कैसे अपलोड करें।

सर्वर के लिए, हम छवि/वीडियो की जानकारी संग्रहीत करने के लिए एक रेल एपीआई स्थापित करेंगे। छवि/वीडियो के वास्तविक भंडारण के लिए, हम एक तृतीय-पक्ष सेवा शामिल करेंगे, जिसे . कहा जाता है बादल . यह क्लाउड-आधारित छवि और वीडियो प्रबंधन मंच है।

आइए क्लाउडिनरी में एक खाते के साथ साइन अप करके शुरू करें क्योंकि हमें रेल एपीआई में एकीकृत करने के लिए क्रेडेंशियल्स की आवश्यकता होगी।

सिया कॉइन कैसे खरीदें?

बादल सेटअप

यदि आपके पास क्लाउडिनरी के लिए अभी तक कोई खाता नहीं है, तो आगे बढ़ें और यहां एक के लिए पंजीकरण करें:

https://cloudinary.com/users/register/free

एक बार साइन अप करने के बाद, आपको शीर्ष पर खाता विवरण वाले डैशबोर्ड पर पुनर्निर्देशित किया जाना चाहिए।

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

रेल एपीआई सेटअप

आइए इसके साथ एक रेल ऐप बनाकर शुरू करें:

rails new rails-file-upload-template --database=postgresql --api

|_+_| में, हमें क्लाउडिनरी को एकीकृत करने के लिए एक रत्न शामिल करना होगा। जोड़ें |_+_| , अनकम्मेंट आउट |_+_|, और रन करें |_+_|।

मॉडल और नियंत्रक उत्पन्न करें

हमें |_+_| के लिए मॉडल तैयार करना होगा, जिसमें छवि और वीडियो की विशेषताएं हैं, यह क्लाउडिनरी में अपलोड की गई छवि या वीडियो से जुड़े यूआरएल लिंक का प्रतिनिधित्व करेगा।

Gemfile

आदर्श रूप से, हम नियंत्रक भी उत्पन्न करेंगे:

gem 'cloudinary'

एक बार जब हम नियंत्रक और मॉडल तैयार कर लेते हैं, तो डेटाबेस बनाते हैं और इसके साथ माइग्रेट करते हैं:

gem 'rack-cors'

कॉन्फ़िग फ़ाइल

आइए |_+_| . पर नेविगेट करें . फ़ाइल में, प्रतिस्थापित करें |_+_| साथ |_+_| और बाहर टिप्पणी करें:

bundle install

कोर्स.आरबी

|_+_| के अंतर्गत |_+_| नामक एक नई फ़ाइल बनाते हैं। इस फ़ाइल में, निम्न कॉन्फ़िगरेशन की प्रतिलिपि बनाएँ:

Item

Cloudinary.rb

|_+_|, |_+_|, और |_+_| के लिए फ़ील्ड में, उन्हें क्लाउडिनरी खाता विवरण से अपनी जानकारी से बदलें। सुनिश्चित करें कि वे तार में लिपटे हुए हैं!

नेविगेट करें |_+_| और सेट करें |_+_| |_+_| के लिए मार्ग:

rails g model Item image:string video:string

इस गाइड के लिए, हम केवल एक |_+_| के निर्माण को लागू करने पर ध्यान केंद्रित करेंगे। आइए अपना ध्यान |_+_| . पर स्थानांतरित करें और |_+_| के लिए विधि को परिभाषित करें।

आइटम नियंत्रक

में |_+_| |_+_| की विधि, हम जो करना चाहते हैं वह क्लाइंट से क्लाउडिनरी पर भेजी गई वास्तविक छवि और वीडियो अपलोड करना है।

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

आइए पहले क्लाउडिनरी में फ़ोटो और चित्र अपलोड करने के तरीके सेट करें। जब हमने अपने |_+_| में Cloudinary स्थापित किया, तो हमें Cloudinary से विधियाँ विरासत में मिलीं। हम जिस एक विधि का उपयोग करेंगे वह है |_+_|।

अगर यह सिर्फ एक छवि है, |_+_| छवि डेटा को एक तर्क के रूप में ले सकते हैं।

यदि यह एक वीडियो है, तो यह वीडियो डेटा को पहले तर्क के रूप में लेता है और |_+_| दूसरे तर्क के रूप में यह इंगित करने के लिए कि आप एक वीडियो अपलोड कर रहे हैं।

मैं एक |_+_| . रखने का सुझाव देता हूं प्रतिक्रिया से वापस क्या भेजा जा रहा है यह जांचने के लिए विधि के भीतर।

rails g controller items

अधिकांश छवियों को अपलोड किया जा सकता है लेकिन वीडियो के संबंध में, मेरा मानना ​​है कि इसे |_+_| . के प्रारूप में होना चाहिए और एक आकार सीमा भी है। यदि आप वीडियो अपलोड करने के बारे में अधिक जानकारी चाहते हैं, तो देखें:

https://cloudinary.com/documentation/upload_videos

जैसा कि उल्लेख किया गया है, यदि छवि और वीडियो अपलोड सफल होते हैं, तो प्रतिक्रिया एक वस्तु होगी जिसमें विभिन्न प्रकार की जानकारी होगी। लेकिन हम जो चाहते हैं वह यूआरएल स्ट्रिंग है जिसे |_+_| . से एक्सेस किया जा सकता है चाभी।

आइटम का उदाहरण बनाते समय:

rails db:create && db:migrate

एक बार जब हम |_+_| . बना लेते हैं इंस्टेंस और इसे हमारे डेटाबेस में स्टोर करें, हम इसे JSON के रूप में प्रस्तुत कर सकते हैं।

config/initializers/cors.rb

आइटम_कंट्रोलर.आरबी

आइटम नियंत्रक बनाने की विधि

बक्शीश

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

एक छवि को हटाने के लिए, हम क्लाउडिनरी से एक और विधि कहते हैं, |_+_|। उदाहरण के लिए, एक छवि URL को डेटा में एक स्ट्रिंग के रूप में संग्रहीत किया जाना चाहिए।

example.com

NewItemForm.js

छवि और वीडियो अपलोड को संभालने के लिए प्रतिक्रिया प्रपत्र

में |_+_| घटक, हमारे पास छवि और वीडियो के लिए गुण होंगे। अंदर |_+_|, हम एक वापस करेंगे |_+_| |_+_| . के साथ तत्व के भीतर।

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

जब हम |_+_| के अंदर राज्य स्थापित कर रहे हैं, तो हम |_+_| . पर एक बहुत ही विशिष्ट संपत्ति तक पहुंच रहे हैं (प्रतिस्पर्धा)।

चूंकि हमने |_+_| . का प्रकार निर्दिष्ट किया है फ़ाइल के रूप में फ़ील्ड, हम डेटा को |_+_| से एक्सेस कर सकते हैं। यदि हम |_+_| होते, तो हमें निम्नलिखित डेटा संरचना प्राप्त होती:

यह छवि का शीर्षक है
e.target.files

यह एक ऑब्जेक्ट है जिसमें एक कुंजी, 0, फ़ाइल के मान के साथ अपलोड की गई थी। हम उस मूल्य को रेल एपीआई को भेजना चाहते हैं जो इसे क्लाउडिनरी को अग्रेषित करेगा। हम उस मूल्य तक |_+_| के माध्यम से पहुँच प्राप्त करते हैं।

रेल एपीआई को सूचना भेजने से पहले हमें एक और चीज स्थापित करनी होगी।

फ़ॉर्म सबमिट करने के लिए ईवेंट हैंडलर के अंदर, |_+_|, उपयोग करने के अलावा |_+_| पृष्ठ को ताज़ा होने और अपना डेटा खोने से रोकने के लिए, हमें |_+_| का एक नया उदाहरण भी बनाना होगा।

इस मामले में, हम उस इंस्टेंस को वेरिएबल |_+_| में स्टोर करते हैं। हमें जो जानकारी चाहिए उसे हम |_+_| . में जोड़ते हैं |_+_| . का उपयोग कर चर तरीका।

सरणी जावास्क्रिप्ट में तत्व जोड़ें

पहला तर्क |_+_| जरूरत मुख्य नाम है जो कि |_+_| . होगा और |_+_|. दूसरा तर्क वह मान है, जो |_+_| . का फ़ाइल डेटा होगा और |_+_|.

अब हम रेल एपीआई को एक अनुरोध जमा करने के लिए तैयार हैं।

में |_+_| अनुरोध, हमें उस विधि को परिभाषित करने की आवश्यकता है, जो POST है और डेटा में पास है, |_+_| कुंजी, शरीर के मूल्य के रूप में। हमने फॉर्म से डेटा को इस तरह से संरचित किया है जो हमारे रेल एपीआई सेटअप के साथ काम करेगा।

अंतिम शब्द

क्लाउडिनरी एक कुशल क्लाउड स्टोरेज सेवा है और इसे कई सर्वर-साइड फ्रेमवर्क में लागू करना काफी सरल है।

यह मार्गदर्शिका कवर करती है कि रेल एपीआई के लिए फोटो और वीडियो स्टोरेज के लिए क्लाउडिनरी कैसे सेट करें और रिएक्ट फॉर्म घटक से अनुरोध को ठीक से कैसे भेजें। पढ़ने के लिए धन्यवाद!

सन्दर्भ के लिए, रेल एपीआई रेपो तथा रिएक्ट रेपो .

#reactjs #रूबी #रेल