ईएस 5 / ईएस 6 जावास्क्रिप्ट फ़ाइल अपलोड प्लगइन - उप्पी

डिजाइन करने के लिए सबसे पेचीदा रूप इनपुट में से एक है फाइल अपलोड. इसमें डिफ़ॉल्ट HTML शैली है, लेकिन यह दुनिया की सबसे सुंदर चीज नहीं है.

Uppy फ़ाइल अपलोड को पूर्ण नए स्तर पर ले जाता है a कस्टम इंटरफ़ेस और ए गतिशील अजाक्स-शैली लोडिंग प्रक्रिया.

यह ES5 / ES6 कोड पर चलता है, तो आप नवीनतम जावास्क्रिप्ट मानकों के साथ अपने वेब एप्लिकेशन बना सकते हैं। और, यह भी क्लाउड स्टोरेज साइट्स से फ़ाइल अपलोड का समर्थन करता है जैसे ड्रॉपबॉक्स या गूगल ड्राइव, इसलिए यह ए बहुमुखी फ़ाइल अपलोडिंग स्क्रिप्ट वेब के लिए.

यूपी है पूरी तरह से मुक्त और खुला स्रोत, GitHub पर एक रेपो के साथ। हालांकि, इस प्लगइन को स्थापित करने का सबसे आसान तरीका npm या यार्न के माध्यम से है, इसलिए आप कर सकते हैं इसे असली पैकेज की तरह चलाएं.

एक बार जब आप अपनी वेबसाइट पर फ़ाइलें जोड़ लेते हैं, तो आप बस Uppy.js फ़ाइल और CSS कोड शामिल करें. फिर, आप जो भी इनपुट फील्ड चाहते हैं उसे लक्षित करें और बाकी का ध्यान रखें.

इसका एक अनूठा इंटरफ़ेस है एक बड़े वर्ग प्लेसमेंट की तरह दिखता है फ़ाइलों को खींचने और छोड़ने के लिए। आप भी कर सकते हैं अपनी हार्ड ड्राइव से आइटम का चयन करें या और भी बाहरी URL से दूरस्थ रूप से फ़ाइलें अपलोड करें. बहुत पागल!

आप दस्तावेज़ पृष्ठ पर संपूर्ण सेटअप प्रक्रिया पा सकते हैं, लेकिन यह ECMAScript 6 की कम से कम कुछ समझ की आवश्यकता है. यह लाइब्रेरी स्क्रिप्टिंग के भविष्य की ओर देखती है और शुद्ध वेनिला जावास्क्रिप्ट के साथ उपयोग करने के लिए सबसे आसान चीज नहीं है.

लेकिन, यदि आप वेब विकास के बारे में गंभीर हैं तो यह ES6 को सीखने के लायक है। तुम खोज सकते हो ऑनलाइन संसाधनों के टन स्व-शिक्षण के लिए और आप अपने पहले के रूप में यूपीआई का उपयोग भी कर सकते हैं “असली” परियोजना में गोता लगाने और सीखने शुरू करने के लिए.

डैशबोर्ड उदाहरण देखें कार्रवाई में Uppy देखें. इस पेज के लिए, अपलोड एक ट्रिगर बटन के पीछे छिपा हुआ है, जहाँ आप एक मोडल अपलोड फ़ील्ड प्रदर्शित करने के लिए बटन पर क्लिक करते हैं.

वहां से, आप यह चुन सकते हैं कि आप चित्र अपलोड करना चाहते हैं या नहीं आपके कंप्यूटर से, वेब से, या आपके वेबकैम से भी!

उदाहरण पृष्ठ एक सहित देखने के लिए एक गुच्छा प्रदान करता है खींचें और ड्रॉप उदाहरण, साथ में ए अंतर्राष्ट्रीयकृत डेमो पेज.

लेकिन, यह जानने के लिए कि यह कैसे काम करता है, मैं डॉक्स को स्केच करने और मुख्य GitHub रेपो के माध्यम से ब्राउज़ करने की सलाह देता हूं। आप ट्विटर @transloadit पर रचनाकारों के साथ अपने विचार भी साझा कर सकते हैं.