آپلود کننده فایل
فالکون از DropzoneJS برای آپلود فایل استفاده می کند. DropzoneJS یک کتابخانه منبع باز است که آپلود فایلهای drag & drop را با پیشنمایش تصویر فراهم میکند.
مستندات برای Dropzoneآپلود تک فایل
Dropzone
برای آپلود فایل به یک آدرس اینترنتی معتبر سمت سرور نیاز دارد. شما به راحتی می توانید آن را از data-options
ویژگی مثل تنظیم کنیدdata-options!={ url: 'valid/url'}
<div class="dropzone dropzone-single p-0" data-dropzone="data-dropzone" data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
<div class="fallback"><input type="file" name="file" /></div>
<div class="dz-preview dz-preview-single">
<div class="dz-preview-cover dz-complete"><img class="dz-preview-img" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="" /><a class="dz-remove text-danger" href="#!" data-dz-remove="data-dz-remove"><span class="fas fa-times"></span></a>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
<div class="dz-errormessage m-1"><span data-dz-errormessage="data-dz-errormessage"></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
</div>
<div class="dz-message" data-dz-message="data-dz-message">
<div class="dz-message-text"><img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your file here</div>
</div>
</div>
آپلود چند فایل
<form class="dropzone dropzone-multiple p-0" id="my-awesome-dropzone" data-dropzone="data-dropzone" action="#!">
<div class="fallback"><input name="file" type="file" multiple="multiple" /></div>
<div class="dz-message" data-dz-message="data-dz-message"> <img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your files here</div>
<div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
<div class="d-flex media mb-3 pb-3 border-bottom btn-reveal-trigger"><img class="dz-image" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" />
<div class="flex-1 d-flex flex-between-center">
<div>
<h6 data-dz-name="data-dz-name"></h6>
<div class="d-flex align-items-center">
<p class="mb-0 fs--1 text-400 lh-1" data-dz-size="data-dz-size"></p>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
</div><span class="fs--2 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
</div>
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
<div class="dropdown-menu dropdown-menu-end border py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
</div>
</div>
</div>
</div>
</form>
فایل css
<link href="vendors/dropzone/dropzone.min.css" rel="stylesheet" />
جاوا اسکریپت
<script src="vendors/dropzone/dropzone.min.js"></script>