ES5 / ES6 جافا سكريبت تحميل ملف البرنامج المساعد - Uppy

واحدة من أصعب المدخلات شكل للتصميم تحميل الملف. يحتوي على نمط HTML افتراضي ، لكنه ليس أجمل شيء في العالم.

Uppy يأخذ تحميل الملفات إلى مستوى جديد كليا مع واجهة مخصصة و عملية تحميل على غرار Ajax الديناميكي.

هذا يعمل على كود ES5 / ES6, حتى تتمكن من إنشاء تطبيقات الويب الخاصة بك بأحدث معايير JavaScript. وحتى يدعم تحميل الملفات من مواقع التخزين السحابية مثل Dropbox أو Google Drive ، لذلك ملف متعدد الأوجه تحميل البرنامج النصي للويب.

Uppy هو خالية تماما ومفتوحة المصدر, مع الريبو على جيثب. ومع ذلك ، فإن أسهل طريقة لتثبيت هذا البرنامج المساعد هي من خلال npm أو Yarn ، بحيث يمكنك ذلك تشغيله مثل حزمة حقيقية.

بمجرد الحصول على الملفات المضافة إلى موقع الويب الخاص بك ، أنت فقط تضمين ملف Uppy.js ورمز CSS. بعد ذلك ، يمكنك استهداف أي مجال إدخال تريد وتعتني Uppy بالباقي.

لديها واجهة فريدة من نوعها يشبه موضع مربع كبير واحد لسحب وإسقاط الملفات. بامكانك ايضا حدد عناصر من القرص الصلب الخاص بك او حتى تحميل الملفات عن بعد من عناوين URL الخارجية. مجنون جدا!

يمكنك العثور على عملية الإعداد بأكملها على صفحة الوثائق ، ولكن يتطلب على الأقل بعض فهم ECMAScript 6. تتطلع هذه المكتبة إلى مستقبل البرمجة النصية وليست أسهل شيء لاستخدامه مع JavaScript الفانيليا الخالص.

ولكن ، إذا كنت جادًا بشأن تطوير الويب ، فمن المفيد تعلم ES6 على أي حال. يمكنك إيجاد طن من الموارد على الانترنت للتعليم الذاتي ويمكنك حتى استخدام Uppy كأول الخاص بك “حقيقة” مشروع للغوص في وبدء التعلم.

تحقق من مثال لوحة القيادة ل رؤية Uppy في العمل. لهذه الصفحة ، و تحميل مخفي وراء زر الزناد, حيث تنقر فوق الزر لعرض حقل تحميل مشروط.

من هناك ، يمكنك تحديد ما إذا كنت تريد تحميل صورة من جهاز الكمبيوتر الخاص بك ، من شبكة الإنترنت ، أو حتى من كاميرا الويب الخاصة بك!

تقدم صفحة الأمثلة مجموعة من البحث ، بما في ذلك سحب وإسقاط سبيل المثال, جنبا إلى جنب مع عرض الصفحة التدويلية.

ولكن ، لمعرفة كيفية عمل ذلك حقًا ، أوصي بتخطي المستندات والتصفح من خلال GitHub repo الرئيسي. يمكنك أيضًا مشاركة أفكارك مع المبدعين على Twitter @ transloadit.