File
کامپوننت x-file یک کامپوننت چندمنظوره برای نمایش انواع فایل (تصویر، ویدیو، PDF و سایر فرمتها) در صفحات Blade است. این کامپوننت به طور خودکار نوع فایل را بر اساس پسوند یا مدل فایل تشخیص داده و نمایش مناسب را ارائه میدهد. برای تصاویر و ویدیوها از تگهای مناسب (<img>, <video>) استفاده میکند و برای PDF از تگ <embed> و برای سایر فایلها لینک دانلود با آیکن و اطلاعات فایل نمایش میدهد.
ویژگیها
- پشتیبانی از ورودیهای متنوع برای src (آدرس، مدل فایل، عدد)
- تشخیص خودکار نوع فایل (تصویر، ویدیو، PDF، سایر)
- نمایش تصویر با استفاده از تگ
<img> - نمایش ویدیو با استفاده از تگ
<video> - نمایش PDF با استفاده از تگ
<embed> - نمایش سایر فایلها به صورت لینک دانلود با آیکن و نمایش نام و حجم فایل
- امکان تعیین کلاس سفارشی برای ظرف و محتوای فایل
- امکان تعیین ابعاد (width و height)
- مقداردهی خودکار نام و حجم فایل در صورت استفاده از مدل فایل یا آیدی
- واکنشگرا و قابل استفاده در هر جای قالب Blade
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
src | string|int|object | — | آدرس فایل، مدل فایل یا آیدی فایل (اجباری) |
containerClass | string | null | کلاس CSS سفارشی برای ظرف اصلی |
class | string | null | کلاس CSS سفارشی برای محتوای فایل (تصویر، ویدیو، embed یا لینک) |
name | string | null | نام فایل (در حالت فایل ناشناخته) |
width | string | "100%" | عرض فایل (مثلاً "100%"، "300px"، "50%") |
height | string | "400px" | ارتفاع فایل (مثلاً "400px"، "200px"، "50%") |
id | string | مقدار تصادفی | شناسه یکتا برای ظرف کامپوننت |
size | int | null | حجم فایل (بر حسب بایت، در حالت فایل ناشناخته) |
نکات مهم
- اگر مقدار
srcعدد یا مدل فایل باشد، آدرس فایل و اطلاعات آن به صورت خودکار استخراج میشود. - نوع فایل (تصویر، ویدیو، PDF یا سایر) به صورت خودکار بر اساس پسوند فایل تشخیص داده میشود.
- برای فایلهای ناشناخته، لینک دانلود با آیکن و نمایش نام و حجم فایل ارائه میشود.
- میتوانید با پراپهای
containerClassوclassظاهر کامپوننت را شخصیسازی کنید.
مقداردهی
- برای مقداردهی جاوااسکریپتی میتوانید به صورت زیر عمل کنید
- پارامتر دوم و سوم به ترتیب برای اسم فایل و سایز فایل است که هر دو اختیاری هستند
const instance = $("#item-collector-sample").getInstance();
instance.setValue("https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf", "file-name", 120000);
مثالها
نمونه پایه
<x-file src="https://podcasts.ceu.edu/sites/podcasts.ceu.edu/files/sample.doc" height="600px" />
<x-file src="https://vjs.zencdn.net/v/oceans.mp4" />
<x-file src="https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf" height="600px" />