uppy
Uppy 4.9.0
Uppy هو تحميل ملف JavaScript الأنيق والمعيار الذي يدمج بسلاسة مع أي تطبيق. إنه سريع ، ويحتوي على واجهة برمجة تطبيقات مفهومة ويتيح لك القلق بشأن مشاكل أكثر أهمية من بناء ملف تحميل ملف.
الكود المستخدم في المثال أعلاه:
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy ( )
. use ( Dashboard , { trigger : '#select-files' } )
. use ( RemoteSources , { companionUrl : 'https://companion.uppy.io' } )
. use ( Webcam )
. use ( ImageEditor )
. use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
. on ( 'complete' , ( result ) => {
console . log ( 'Upload result:' , result )
} )جربه عبر الإنترنت أو اقرأ المستندات لمزيد من التفاصيل حول كيفية استخدام Uppy ومكوناتها الإضافية.
npm install @uppy/core @uppy/dashboard @uppy/tus أضف css uppy.min.css ، إما إلى صفحة HTML الخاصة بك <head> أو تضمين في JS ، إذا كان Bundler المفضل لديك يدعمه.
بدلاً من ذلك ، يمكنك أيضًا استخدام حزمة تم تصميمها مسبقًا من CDN Transloadit: Smart CDN. في هذه الحالة ، ستعلق Uppy نفسه على window.Uppy العالمي.
️ تتكون الحزمة من معظم المكونات الإضافية الصعودية ، لذلك لا ينصح بهذه الطريقة للإنتاج ، حيث سيتعين على المستخدمين تنزيل جميع الإضافات عندما تكون من المحتمل أن تستخدم قلة قليلة فقط.
<!-- 1. Add CSS to `<head>` -->
< link
href =" https://releases.transloadit.com/uppy/v4.9.0/uppy.min.css "
rel =" stylesheet "
/>
<!-- 2. Initialize -->
< div id =" files-drag-drop " > </ div >
< script type =" module " >
import {
Uppy ,
Dashboard ,
Tus ,
} from 'https://releases.transloadit.com/uppy/v4.9.0/uppy.min.mjs'
const uppy = new Uppy ( )
uppy . use ( Dashboard , { target : '#files-drag-drop' } )
uppy . use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
</ script > Dashboard - Universal UI مع المعاينات ، وأشرطة التقدم ، ومحرر البيانات الوصفية وجميع الأشياء الرائعة. مطلوب لمعظم ملحقات واجهة المستخدم مثل كاميرا الويب و InstagramProgress Bar - شريط التقدم الحد الأدنى الذي يملأ نفسه عند التقدم في التحميلStatus Bar - تقدم أكثر تفصيلاً ، أزرار الإيقاف المؤقت/الاستئناف/الإلغاء ، النسبة المئوية ، السرعة ، الأحجام التي تم تحميلها/إجماليها (مدرجة بشكل افتراضي مع Dashboard )Informer - أرسل إشعارات مثل "Smile" قبل أخذ صورة شخصية أو "فشل التحميل" عند فقدان كل شيء (يتم تضمينه أيضًا افتراضيًا مع Dashboard )Drag & Drop - السحب العادي والإسقاط منطقةFile Input - حتى زر "تحديد الملفات" البسيطWebcam - التقاط وتسجيل تلك الصور الشخصية؟Google Drive - استيراد الملفات من Google DriveDropbox - استيراد الملفات من DropboxBox - استيراد الملفات من المربعInstagram - استيراد الصور ومقاطع الفيديو من InstagramFacebook - استيراد الصور ومقاطع الفيديو من FacebookOneDrive - استيراد الملفات من Microsoft OneDriveImport From URL - استيراد عناوين URL المباشرة من أي مكان على الويب تعني علامة ⓒ أن @uppy/companion ، مكون من جانب الخادم ، مطلوب لصالح مكون إضافي للعمل.
Tus - التحميلات القابلة للاستئناف عبر معيار TUS المفتوحXHR Upload - تحميلات منتظمة لأي واجهات خلفية هناك (مثل Apache ، Nginx)AWS S3 - تحميل عادي على AWS S3 أو خدمات متوافقةAWS S3 Multipart التحميل "متعدد" على الطراز S3 إلى AWS أو خدمات متوافقةTransloadit - دعم لتحميل الملفات القوية من TRANDLOADIT وترميز الخلفية الخلفيةGolden Retriever - يستعيد الملفات بعد تعطل المتصفح ، مثل أنه لا شيءThumbnail Generator - يولد معاينات الصور (المدرجة بشكل افتراضي مع Dashboard )Form - يجمع البيانات الوصفية من <form> مباشرة قبل تحميل الصعود ، ثم إلحاق النتائج اختياريًا مرة أخرى إلى النموذجRedux - لاحتياجاتك الناشئة في السفر نحن نهدف إلى دعم الإصدارات الحديثة من Chrome و Firefox و Safari.
<input type="file"> ؟عدم وجود JavaScript يتفوق على الكثير منه ، لذلك هذا سؤال عادل! تشغيل أعمال التحميل والترميز لمدة عشر سنوات على الرغم من أننا وجدنا أنه في الحالات ، يترك إدخال الملف البعض المطلوب:
لا تحتاج جميع التطبيقات إلى كل هذه الميزات. <input type="file"> على ما يرام في العديد من المواقف. لكن هذه كانت بعض الأشياء التي ضربها عملائنا / طلبهم بما يكفي لإثارةنا لتطوير Uppy.
فريق Transloadit صغير ولدينا طموح مشترك لكسب العيش من المصدر المفتوح. من خلال التخلي عن مشاريع مثل Tus.io و Uppy ، نأمل في تعزيز الحالة الفنية ، ونجعل الحياة أفضل قليلاً للجميع ، وفي القيام بذلك ، يتمتع بوظائف مجزية والحصول على بعض العيون على خدمتنا التجارية: منصة تناول المحتوى ومعالجة.
تفكيرنا هو أنه إذا كان جزءًا بسيطًا من قاعدة المستخدمين مفتوح المصدر لدينا يمكن أن يرى جاذبية الإصدارات المستضافة مباشرة من المصدر ، فقد يكون ذلك كافيًا بالفعل للحفاظ على عملنا. حتى الآن هذا يعمل! نحن قادرون على تكريس 80 ٪ من وقتنا لفتح المصدر ولم يفلحوا بعد. : د
نعم ، يرجى مراجعة المستندات لمزيد من المعلومات.
نعم ، كل ما تريده على الواجهة الخلفية سيعمل مع البرنامج المساعد @uppy/xhr-upload ، لأنه يقوم فقط POST أو PUT . إليك مثال على الواجهة الخلفية PHP.
إذا كنت تريد استئنافًا مع البرنامج المساعد TUS ، فاستخدم أحد تطبيقات خادم TUS ؟؟
وستحتاج @uppy/companion إذا كنت ترغب في أن يتمكن المستخدمون من اختيار الملفات من Instagram أو Google Drive أو Dropbox أو عبر عناوين URL المباشرة (مع وجود المزيد من الخدمات).
.github/CONTRIBUTING.mdCHANGELOG.md يتم استخدام UPPY بواسطة: Photobox ، Issuu ، Law Insider ، Tabs Cool ، Soundoff ، Scrumi ، Crive وغيرها.
هل تستخدم UPPY في مشروعك؟ دعنا نعرف!
ترخيص معهد ماساتشوستس للتكنولوجيا.
