آپلود فایل ها یک ویژگی رایج است که در اکثر برنامه های کاربردی وب یافت می شود قابلیت کشیدن و رها کردن **راهی مناسب برای دستیابی به این امر شده است. برای پیاده سازی این ویژگی در برنامه React، ماژول **react-dropzone یک انتخاب محبوب به دلیل مجموعه ای غنی از ویژگی ها و گزینه های سفارشی سازی است که می تواند متناسب با نیازهای فردی تنظیم شود.
هدف این مقاله ارائه یک درک عمیق از ماژول react-dropzone، روش های مختلف استفاده از عملکرد آن برای پیاده سازی کشیدن و رها کردن را بررسی کنید و نمونه هایی از سفارشی سازی رفتار آن را ارائه دهید.
React Dropzone Module: An Introduction
React Dropzone، همچنین به عنوان react-dropzone شناخته می شود، یک ماژول React است که امکان ایجاد آسان قابلیت کشیدن و رها کردن را در یک برنامه React فراهم می کند. این ماژول تجربه آپلود فایل کاربر را ساده می کند و آنها را قادر می سازد فایل ها را از کاوشگر فایل خود بکشند و آنها را برای آپلود فوری در برنامه رها کنند. با تعداد زیادی از گزینه های سفارشی سازی، **React Dropzone **یک ماژول غنی از ویژگی است. کاربران می توانند انواع فایل های قابل آپلود و همچنین آپلود چندین فایل را به طور همزمان از جمله دیگر قابلیت ها محدود کنند.
نحوه نصب و مدل‌سازی یک انتخابگر اصلی React Dropzone File Picker
برای افزودن ماژول react-dropzone به یک برنامه، می توانیم از دستور زیر استفاده کنیم.
npm install react-dropzone
این ماژول برای هر برنامه‌ای که شامل آپلود فایل است، ایده‌آل است، مانند وب‌سایت درخواست ورودی دانشگاه، سایت درخواست کار یا پلتفرم آپلود پست. گام اولیه ما ساختن یک انتخابگر فایل پایه است React Dropzone.
در ابتدا، ما باید وارد کنیم کتابخانه React Dropzone در زیر همه واردات دیگر در فایل قرار دارد. به دنبال این، می‌توانیم کامپوننت React Dropzone را در دستور بازگشت متد render و همچنین یک روش **onDrop ** را در بالای آن قرار دهیم. کد به دست آمده باید شبیه زیر باشد:
import React, { Component } from 'react';
import Dropzone from 'react-dropzone'
class App extends Component {
onDrop = (acceptedFiles) => {
console.log(acceptedFiles);
}
render() {
return (
);
}
}
export default App;
React Dropzone ** برای مدیریت انتخاب فایل فقط به یک روش نیاز دارد که به پروپ onDrop منتقل شود. برای حفظ سادگی، نام روش **onDrop را می گذاریم برای مطابقت با نام پروپوزال
متد onDrop یک پارامتر دارد، AcceptedFiles، که در حال حاضر برای اهداف آزمایشی وارد کنسول می شویم. پس از ذخیره کامپوننت، می توانیم مرورگر خود را باز کرده و به برنامه در حال اجرا React خود برویم.
با کلیک بر روی برچسب متن a باز می شود انتخاب کننده فایل پنجره، که یک شروع عالی است! با این حال، انتخاب یک فایل برای آپلود در حال حاضر هیچ تاثیری نخواهد داشت. برای اینکه آپلود فایل کاربردی باشد، باید فایل را به یک سرور ارسال کنیم که در آموزش آینده به آن پرداخته خواهد شد.
Render Props
**ظاهر **React Dropzone ممکن است متمایز از سایر مؤلفه های React باشد که با آنها مواجه شده اید زیرا از تکنیک Render Props استفاده می کند.
تابع Render Prop HTML را در داخل تغییر می دهد دراپ زون جزء بر اساس وضعیت فعلی آن
برای نشان دادن این مفهوم، متغیری به تابع Render Prop به نام ** isDragActive اضافه می کنیم. **این متغیر به ما امکان دسترسی به حالت کشش فعلی **Dropzone **کامپوننت را می دهد.
با isDragActive است وضعیت موجود، می‌توانیم مقدار متن برچسب را تغییر دهیم تا زمانی که یک فایل روی مؤلفه کشیده می‌شود، چیزی متمایز نشان داده شود.
قطعه کد ذکر شده در بالا یک شرطی درون خطی را نشان می دهد که بررسی می کند که آیا isDragActive است درست است یا نه اگر درست است، متن “ولش کن انگار داغه“نمایش داده می شود و اگر نادرست باشد، متن”روی من کلیک کنید یا یک فایل را برای آپلود بکشید!” نشان داده شده است.
برای اجازه دادن به انواع خاصی از فایل ها
در حال حاضر، انتخابگر فایل ما به ما اجازه می دهد تا هر نوع فایلی را برای آپلود انتخاب کنیم.
با این حال، بسته به هدف انتخابگر فایل، ممکن است بخواهیم انتخاب را به انواع خاصی از فایل، مانند فقط محدود کنیم.JPG فایل ها یا فقط .XLS و .DOCX فایل ها
برای رسیدن به این هدف، می‌توانیم از پروپ پذیرش استفاده کنیم و بعد از آن اضافه کنیم onDrop در داخل دراپ زون اعلامیه جزء
...
انواع فایل به صورت نمایش داده می شود انواع MIMEو موزیلا فهرست جامعی از انواع MIME.
برای افزایش تجربه کاربری انتخابگر فایل ما، می‌توانیم زمانی که کاربر تلاش می‌کند نوع فایلی را آپلود کند که پذیرفته نمی‌شود، پیامی نمایش دهیم.
ما می توانیم این کار را با اضافه کردن یک رندر پروپوزال دیگر به نام isDragRejected و اصلاح منطق شرطی درون خطی انجام دهیم.
در نهایت، می‌توانیم فایل را ذخیره کرده و با کشیدن یک فایل JPG روی انتخابگر فایل در مرورگر، آن را آزمایش کنیم. وقتی این کار را انجام می دهیم، پیامی نمایش داده می شود که نشان می دهد انتخابگر فایل ما آن نوع فایل را نمی پذیرد.
بالاترین و کمترین حجم فایل
تعیین محدودیت در اندازه فایل برای جلوگیری از آپلود بیش از حد فایل های بزرگ و بارگذاری بیش از حد سرور توسط کاربران بسیار مهم است.
React Dropzone دو ویژگی minSize و maxSize را ارائه می دهد که به شما امکان می دهد حداقل و حداکثر اندازه فایل را بر حسب بایت تنظیم کنید.
برای تعیین حداکثر اندازه فایل 5 مگابایت یا کمتر، عناصر minSize و maxSize را به مؤلفه Dropzone در زیر صفحه پذیرش اضافه کنید.
App.js
...
برای بهبود تجربه کاربر، بیایید کدی را به مؤلفه ورودی فایل خود اضافه کنیم که حداکثر اندازه فایل را تأیید می کند و در صورتی که فایل آپلود شده از حد مجاز بیشتر شود، پیام خطا نشان می دهد.
render() {
const maxSize = 1048576;
return (
{({getRootProps, getInputProps, isDragActive, isDragReject, rejectedFiles}) => {
const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
return (
)}
}
);
}
علیرغم ظاهر مقدار قابل توجهی از کد، تنها چند خط (معمولا کمتر از 10) است.
در اینجا دستورالعمل ها وجود دارد:
- یک ثابت به نام “maxSize” ایجاد می کنیم و مقدار آن را در ابتدای روش رندر 1 مگابایت قرار می دهیم.
- ما از ثابت “maxSize” در قسمت “maxSize” جزء Dropzone استفاده می کنیم.
- ما یک پروپ رندر جدید به نام “rejectedFiles” را به جزء Dropzone اضافه می کنیم.
- پس از تابع render prop در کامپوننت Dropzone، ثابت دیگری به نام “isFileTooLarge” تعریف می کنیم. اولین فایل را از آرایه “rejectedFiles” بازیابی می کند و بررسی می کند که آیا اندازه آن بیشتر از ثابت “maxSize” است که قبلاً تعریف کردیم.
- سپس از یک دستور شرطی برای بررسی درست بودن “isFileTooLarge” استفاده می کنیم و پیام “File is too large” را نمایش می دهیم. به رنگ قرمز بیایید عملکرد را در مرورگر آزمایش کنیم!
بیش از یک فایل در حال عمل!
آخرین ویژگی که در مورد React Dropzone صحبت خواهیم کرد، قابلیت آپلود چندین فایل است. این یک فرآیند ساده است و هیچ تغییری در عملکرد رندر پروپ ایجاد نمی کند. برای فعال کردن این ویژگی، فقط باید prop “چندین” را به اعلان کامپوننت React Dropzone اضافه کنیم.
...
نحوه استفاده از هوک در React Dropzone
**
انتشار React Hooks و نسخه به روز کتابخانه **react-dropzone با استفاده سفارشی، هوک Dropzone بازنویسی کل مؤلفه را به‌عنوان یک مولفه کاربردی بازنویسی می‌کند.
این شامل استفاده از استفاده از دراپ زون هوک سفارشی ارائه شده توسط react دراپ زون.
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'
const App = () => {
const maxSize = 1048576;
const onDrop = useCallback(acceptedFiles => {
console.log(acceptedFiles);
}, []);
const { isDragActive, getRootProps, getInputProps, isDragReject, acceptedFiles, rejectedFiles } = useDropzone({
onDrop,
accept: 'image/png',
minSize: 0,
maxSize,
});
const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
return (
);
};
export default App;
نحوه نمایش لیست فایل های پذیرفته شده
**
در دسترس بودن React Hooks و نسخه به روز کتابخانه react-dropzone که شامل **استفاده ازDropzone Hook سفارشی است.، منجر به بازنویسی کامل جزء به عنوان یک جزء کاربردی شده است.
این بازنویسی مستلزم استفاده از استفاده از دراپ زون قلاب سفارشی ارائه شده توسط React-Dropzone
...
{acceptedFiles.length > 0 && acceptedFiles.map(acceptedFile => (
-
{acceptedFile.name}
))}
...
نتیجه گیری
برای جمع بندی، React-Dropzone یک ماژول React پرکاربرد است که قابلیت کشیدن و رها کردن را در برنامه‌های کاربردی وب فعال می‌کند. این بسته گزینه های سفارشی سازی بسیاری را ارائه می دهد، از جمله توانایی محدود کردن اندازه فایل های آپلود شده و اجازه دادن به انواع فایل های خاص برای آپلود. علاوه بر این، این بسته توانایی آپلود چندین فایل و نمایش لیستی از فایل های آپلود شده را به راحتی ارائه می دهد. با React-Dropzone، لازم نیست به API کشیدن و رها کردن HTML تکیه کنیم، که قبلاً رایج ترین راه برای آپلود فایل ها با استفاده از کشیدن و رها کردن بود.
