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

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

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده در واقع بارگذاری نمی‌شود. 
            
                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

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

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

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

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده در واقع بارگذاری نمی‌شود. 
            
                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

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

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

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

کد / پیش‌نمایش نمونه
فایل‌ها را اینجا رها کنید یا برای آپلود کلیک کنید.
این فقط یک ناحیه رها کردن نمونه است. فایل‌های انتخاب شده در واقع بارگذاری نمی‌شود. 
            
                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

مؤلفه "Dropzone" با اعتبارسنجی نوع فایل، قابلیت بارگذاری فایل در برنامه وب شما را بهبود می‌بخشد، با اینکه شما امکان تعیین فرمت‌های فایل قابل قبول را دارید. در این مثال، یک "Dropzone" با قوانین اعتبارسنجی برای فرمت‌های فایل تصویر (JPEG، PNG و JPG) ایجاد شده است. کاربران تنها مجاز به بارگذاری انواع فایل مشخص شده هستند. مؤلفه "Dropzone" و اعتبارسنجی فرمت فایل را براساس نیازهای خود سفارشی‌سازی کنید تا بارگذاری فایل‌ها در برنامه‌ی شما امن و کنترل‌شده باشد.

رابط اجزاء

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

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

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