ناحیه رها کردن
بارگذاری تک فایل

اجزای "ناحیه رها کردن" یک راه آسان برای پیاده‌سازی قابلیت آپلود فایل در وب اپلیکیشن ارائه می‌دهد. این مثال نشان می‌دهد چگونه یک "ناحیه رها کردن" برای آپلود تک فایل با گزینه‌های تنظیم محدودیت‌های آپلود فایل و اضافه کردن سربرگ‌های اضافی ایجاد کنید.

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده آپلود واقعا اتفاق نمی‌افتد.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

اجزای "ناحیه رها کردن" ساده‌ترین راه برای پیاده‌سازی آپلود تک فایل در وب اپلیکیشن شما را فراهم می‌کند. با این حال، لازم است به یاد داشته باشید که فایل‌های انتخاب شده در این نمونه واقعی به سرور آپلود نمی‌شوند. برای فعال کردن آپلود واقعی فایل و بهبود قابلیت‌های پردازش فایل، مؤلفه "ناحیه رها کردن" را بر اساس نیازهای خود سفارشی‌سازی کنید. در این مثال، یک "ناحیه رها کردن" برای آپلود تک فایل با یک رابط کاربری اطلاعاتی ایجاد شده است.

بارگذاری چندین فایل

اجزای "ناحیه رها کردن" یک راه آسان برای پیاده‌سازی قابلیت آپلود چند فایل در وب ارائه می‌دهند. این نمونه نشان می‌دهد که چگونه می‌توانید یک "ناحیه رها کردن" برای آپلود چند فایل، با گزینه‌های تنظیم محدودیت‌های آپلود فایل و سربرگ‌های اضافی، ایجاد کنید.

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده آپلود واقعا اتفاق نمی‌افتد.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

اجزای "ناحیه رها کردن" یک راه آسان برای پیاده‌سازی آپلود چند فایل در وب ارائه می‌دهند. با این حال، مهم است به یاد داشته باشید که فایل‌های انتخاب شده در این نمونه واقعی آپلود نمی‌شوند. شما می‌توانید مؤلفه "ناحیه رها کردن" را برای فعال کردن آپلود واقعی فایل و بهبود قابلیت‌های پردازش فایل برنامه‌ی وب خود سفارشی کنید. در این مثال، یک "ناحیه رها کردن" برای آپلود چند فایل با یک رابط کاربری اطلاعاتی ایجاد شده است. با این حال، فایل‌های انتخاب شده در واقع به یک سرور آپلود نمی‌شوند. برای اجازه آپلود فایل واقعی و بهبود قابلیت‌های پردازش فایل، مؤلفه "ناحیه رها کردن" را به طور سفارشی تنظیم کنید.

نوع فایل اعتبارسنجی

کامپوننت "ناحیه رها کردن" به شما امکان می‌دهد تا قبل از آپلود فایل، اعتبارسنجی نوع فایل را انجام دهید. این مثال نشان می‌دهد که چگونه می‌توانید یک "ناحیه رها کردن" با امکان اعتبارسنجی نوع فایل با استفاده از فرمت‌های فایل پذیرفته شده ایجاد کنید.

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده آپلود واقعا اتفاق نمی‌افتد.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

اجزای "ناحیه رها کردن" با اعتبارسنجی نوع فایل برای فرمت‌های تصویر (JPEG، PNG و JPG) تنظیم شده است. با این تنظیم، کاربران تنها قادرند فایل‌هایی از نوع‌های مشخص شده را آپلود کنند. شما می‌توانید مؤلفه "ناحیه رها کردن" را با اعتبارسنجی فرمت فایل به عنوان نیازهای خود سفارشی کنید و به طور کامل کنترل کنید که کدام فایل‌ها آپلود شوند.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

ناحیه رها کردن
پراپ (Prop) نوع (Type) شرح
`options` `DropzoneOptions` گزینه‌های پیکربندی Dropzone.
`getRef` `(el: DropzoneElement) => void` یک تابع که یک مرجع به عنصر Dropzone را دریافت می‌کند.