کتابخانه مبتنی بر هوک React برای آپلود فایل در AWS S3 و سایر فضای ذخیره‌سازی ابری.

سلام بچه ها 👋

من یک کتابخانه آپلود فایل منبع باز apexx-uploader-react ساخته ام که اجرای آپلود فایل در فضای ذخیره سازی ابری مانند AWS S3 را آسان می کند، من بارها بارگذاری فایل ها را در پروژه هایم پیاده سازی کرده ام و همیشه متوجه شده ام که کتابخانه های موجود حداقل هستند. سفارشی سازی و کنترل رابط کاربری من می‌خواستم چیزی بسازم که همه چیزهای سخت را برای من انجام دهد، مانند انجام بارگذاری‌ها، ردیابی پیشرفت، پیاده‌سازی آپلودهای چند قسمتی برای فایل‌های بزرگ، توانایی لغو آپلودها و غیره.

من یک کتابخانه مبتنی بر قلاب درست کردم تا بتوانید اجزای رابط کاربری خود را برای بهترین ظاهر و احساسی که برای برنامه‌هایتان می‌خواهید بسازید، اما همچنین مؤلفه‌های از پیش ساخته‌شده‌ای خواهم داشت که می‌توانید در برنامه‌های خود استفاده کنید، این به عنوان کد منبع مشابه در دسترس خواهد بود. Shadcn بنابراین شما می توانید UI را هر طور که می خواهید تغییر دهید و می توانید از آن در سراسر پروژه ها استفاده مجدد کنید. کتابخانه‌های دیگر یک مدل مؤلفه بسته دارند که در آن لوازم را برای سفارشی‌سازی در معرض نمایش می‌گذارند، صادقانه بگویم که این سفارشی‌سازی بسیار محدود است و در محیط تولیدی که می‌خواهیم رابط کاربری را مطابق طرح‌های واقعی بسازیم، معنی ندارد.

در اینجا دلیل این عالی است:
🚀 مبتنی بر قلاب برای کنترل کامل
🎨 رابط کاربری کاملاً قابل تنظیم
📂 بارگذاری چند قسمتی، لغو و پیگیری پیشرفت
📁 بارگذاری چند فایل
☁️ با AWS S3 خارج از جعبه کار می کند
⚡ حداقل راه اندازی سمت سرور (فقط یک عملکرد)
💻 کد منبع و اجزای از پیش ساخته شده

معماری:

آپلودها در سمت کلاینت با استفاده از urlهای از پیش تعیین شده انجام می شود، کتابخانه url تعیین شده را برای آپلودهای ساده و همچنین برای آپلودهای چند قسمتی ایجاد می کند. در سمت سرور، شما فقط باید یک api را نشان دهید که نشانی اینترنتی تعیین شده را برمی گرداند و سپس توسط مشتری برای انجام آپلودهای واقعی استفاده می شود. آدرس‌های اینترنتی تعیین‌شده امن‌ترین راه برای انجام آپلود روی کلاینت هستند و انجام آپلودها در سمت کلاینت تأخیر اضافی را زمانی که از طریق باطن شما انجام می‌شود کاهش می‌دهد، Multiparts معمولاً با استفاده از آدرس‌های اینترنتی تعیین‌شده و همچنین آسان‌تر انجام می‌شود.

قلاب useUploader یک تابع آپلود و سایر موارد مورد نیاز را برمی گرداند. این کد است

const {
  upload,           // Function to start the upload
  cancelUpload,     // Function to cancel all uploads
  cancelFileUpload, // Function to cancel a specific file
  files,           // Current state of all files
  totalProgress,   // Overall upload progress (0-100)
  status          // Current upload status
} = useUploader({
  provider: "aws", // or "apexx"
  getSignedUrl: async (operation, params) => {
    // Your implementation to get signed URL
    return signedUrl;
  }
});

شما همچنین پیشرفت در سطح هر فایل، وضعیت در هر سطح فایل، خطا در هر سطح فایل دریافت می‌کنید و همچنین آپلودها را در سطح هر فایل لغو می‌کنید و به شما کنترل بیشتری برای ایجاد لایه رابط کاربری اختصاصی خود می‌دهد.

در اینجا نسخه ی نمایشی زنده است

من همچنین به دنبال مشارکت‌کنندگانی هستم که با من در این پروژه کار کنند، بنابراین ما به عنوان یک جامعه می‌توانیم آپلود فایل‌ها را به‌صورت رایگان آسان‌تر کنیم، حتی محصولاتی وجود دارند که برای آسان‌کردن آپلود فایل برای توسعه‌دهندگان، هزینه اشتراک می‌گیرند، اما صادقانه بگویم، من فکر می‌کنم این باید فقط یک کتابخانه باشد و نه یک بسته بندی S3 که ماهیانه 10 دلار دریافت می کند.

لینک github: https://github.com/apexxcloud/apexx-uploader-react