248 lines
9.6 KiB
JavaScript
248 lines
9.6 KiB
JavaScript
<>
|
|
{"{"}% set title = 'File Uploader' %{"}"}
|
|
{"{"}% set filename = 'ui-file-uploader.html' %{"}"}
|
|
{"{"}% extends 'src/layouts/master.html' %{"}"}
|
|
{"{"}% block content %{"}"}
|
|
<div className="page-heading">
|
|
<div className="page-title">
|
|
<div className="row">
|
|
<div className="col-12 col-md-6 order-md-1 order-last">
|
|
<h3>File Uploader</h3>
|
|
<p className="text-subtitle text-muted">
|
|
Javascript enhanced uploaders for easier file handling.
|
|
</p>
|
|
</div>
|
|
<div className="col-12 col-md-6 order-md-2 order-first">
|
|
<nav
|
|
aria-label="breadcrumb"
|
|
className="breadcrumb-header float-start float-lg-end"
|
|
>
|
|
<ol className="breadcrumb">
|
|
<li className="breadcrumb-item">
|
|
<a href="index.html">Dashboard</a>
|
|
</li>
|
|
<li className="breadcrumb-item active" aria-current="page">
|
|
File Uploader
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section className="section">
|
|
<div className="row">
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Basic File Uploader</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic file uploader up, upload here to see how
|
|
<code>.basic-filepond</code> look.
|
|
</p>
|
|
{/* Basic file uploader */}
|
|
<input type="file" className="basic-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">ImgBB Uploader</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic file uploader up, upload here to see how
|
|
<code>.imgbb-filepond</code>-based basic file uploader look.
|
|
You must use
|
|
<code>name=image</code> or by FormData fieldName for your
|
|
input <code>type=file</code> to upload in imgBB.
|
|
</p>
|
|
{/* imgBB file uploader */}
|
|
<input type="file" name="image" className="imgbb-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Multiple Files</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.multiple-files-filepond</code>-based basic file
|
|
uploader look. You can use
|
|
<code>allowMultiple</code> or <code>multiple</code> attribute
|
|
too to implement multiple upload.
|
|
</p>
|
|
{/* File uploader with multiple files upload */}
|
|
<input
|
|
type="file"
|
|
className="multiple-files-filepond"
|
|
multiple=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">With Validation</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.with-validation-filepond</code>-based basic file
|
|
uploader look. You can use
|
|
<a
|
|
href="https://pqina.nl/filepond/docs/patterns/plugins/file-validate-size/#properties"
|
|
target="_blank"
|
|
>
|
|
see here
|
|
</a>
|
|
or{" "}
|
|
<code>
|
|
required (to make your input required), data-max-file-size
|
|
(to limit your input file size), data-max-files (to limit
|
|
your uploaded files), etc (start with data-)
|
|
</code>{" "}
|
|
attribute too to implement validation.
|
|
</p>
|
|
{/* File uploader with validation */}
|
|
<input
|
|
type="file"
|
|
className="with-validation-filepond"
|
|
required=""
|
|
multiple=""
|
|
data-max-file-size="1MB"
|
|
data-max-files={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Image Preview</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.image-preview-filepond</code>-based basic file uploader
|
|
look. This preview for uploaded or dropped images.
|
|
</p>
|
|
{/* File uploader with image preview */}
|
|
<input type="file" className="image-preview-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Image Exif Orientation</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.image-exif-filepond</code>-based basic file uploader
|
|
look. This helps in correctly orienting photos taken on mobile
|
|
devices.
|
|
</p>
|
|
{/* Auto image crop file uploader */}
|
|
<input type="file" className="image-exif-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Image Auto Crop</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.image-crop-filepond</code>-based basic file uploader
|
|
look. You can use
|
|
<code>imageCropAspectRatio</code> or{" "}
|
|
<code>image-crop-aspect-ratio</code> to set aspect ratio.
|
|
</p>
|
|
{/* Auto crop image file uploader */}
|
|
<input
|
|
type="file"
|
|
className="image-crop-filepond"
|
|
image-crop-aspect-ratio="1:1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Image Auto Filter</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.image-filter-filepond</code>-based basic file uploader
|
|
look.
|
|
</p>
|
|
{/* Auto filter image file uploader */}
|
|
<input type="file" className="image-filter-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h5 className="card-title">Image Auto Resize</h5>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="card-body">
|
|
<p className="card-text">
|
|
Using the basic table up, upload here to see how
|
|
<code>.image-resize-filepond</code>-based basic file uploader
|
|
look.
|
|
</p>
|
|
{/* Auto resize image file uploader */}
|
|
<input type="file" className="image-resize-filepond" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{"{"}% endblock %{"}"}
|
|
{"{"}% block styles %{"}"}
|
|
<link rel="stylesheet" href="assets/extensions/filepond/filepond.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="assets/extensions/toastify-js/src/toastify.css"
|
|
/>
|
|
{"{"}% endblock %{"}"}
|
|
{"{"}% block js %{"}"}
|
|
{"{"}% endblock %{"}"}
|
|
</>
|