Upload امن
روی <input type="file"> معمولی ساخته شده است. نوع، حجم و تعداد فایل پیش از هر ارسالی بررسی میشود، پیشنمایش تصویر نشان داده میشود و بارگذاری با نوار پیشرفت، لغو و تلاش مجدد انجام میشود. ماژول upload لازم است. نمونه به یک سرور ساختگی داخل همین صفحه وصل است (نام فایلی که شامل «fail» باشد با خطای ۴۱۳ رد میشود).
<form data-safe-action action="https://demo.bana.test/api/ticket" method="post" ui="stack" style="max-inline-size:32rem">
<div ui="upload" data-upload="https://demo.bana.test/api/upload" data-name="attachments" data-accept="image/*,.pdf" data-max-size="2097152" data-max-files="3">
<label ui="dropzone">
<input type="file" multiple accept="image/*,.pdf" aria-label="پیوستها">
<bana-icon name="upload"></bana-icon>
<strong>فایلها را اینجا رها کنید</strong>
<span>یا کلیک کنید. تصویر یا PDF، تا ۳ فایل و هرکدام حداکثر ۲ مگابایت</span>
</label>
<ul data-upload-list aria-label="فایلهای پیوست"></ul>
<p data-upload-status></p>
</div>
<button ui="primary" type="submit">ارسال درخواست</button>
</form>
<div ui="upload" data-accept="image/png,image/jpeg" data-max-size="1048576" style="max-inline-size:32rem">
<label ui="dropzone">
<input type="file" name="avatar" accept="image/png,image/jpeg" aria-label="تصویر پروفایل">
<bana-icon name="upload"></bana-icon>
<strong>تصویر پروفایل</strong>
<span>PNG یا JPEG، حداکثر ۱ مگابایت. فایل همراه ارسال فرم میرود.</span>
</label>
<ul data-upload-list aria-label="تصویر انتخابشده"></ul>
</div>
در حالت بارگذاری فوری (data-upload) هر فایل جداگانه ارسال میشود و شناسهای که سرور برمیگرداند ({ "id": "..." }) در یک ورودی مخفی با نام data-name قرار میگیرد؛ پس فرم اصلی فقط شناسهها را میفرستد، نه بایتها را. بدون data-upload، فایلهای معتبر در همان input میمانند و با ارسال فرم میروند. تا پایان بارگذاری، ارسال فرم مسدود است.
| صفت / رویداد | کار |
|---|---|
| data-accept | مثل accept: image/*، .pdf، application/pdf. |
| data-max-size / data-max-files | سقف حجم (بایت) و تعداد؛ فایل ردشده با دلیل فارسی نشان داده میشود و ارسال نمیشود. |
| data-upload="/url" | نشانی بارگذاری (فقط هممبدأ یا allowOrigins)؛ همراه data-field (نام فیلد، پیشفرض file)، data-concurrency، data-timeout. |
| bana:upload-add / -reject / -progress / -success / -error / -remove | رویدادهای حبابشونده با e.detail.file (و data یا reason). در -remove میتوانید فایل را از سرور هم حذف کنید. |
بررسی سمت مرورگر فقط فیلتر اول است.سرور باید نوع واقعی فایل (نه فقط پسوند و MIME اعلامی)، حجم، مالکیت، ضدویروس و نام ذخیرهسازی را خودش بررسی کند. نام فایلها فقط با
textContent نمایش داده میشود و هیچ HTMLای ساخته نمیشود.