<> {"{"}% set title = 'File Uploader' %{"}"} {"{"}% set filename = 'ui-file-uploader.html' %{"}"} {"{"}% extends 'src/layouts/master.html' %{"}"} {"{"}% block content %{"}"}

File Uploader

Javascript enhanced uploaders for easier file handling.

Basic File Uploader

Using the basic file uploader up, upload here to see how .basic-filepond look.

{/* Basic file uploader */}
ImgBB Uploader

Using the basic file uploader up, upload here to see how .imgbb-filepond-based basic file uploader look. You must use name=image or by FormData fieldName for your input type=file to upload in imgBB.

{/* imgBB file uploader */}
Multiple Files

Using the basic table up, upload here to see how .multiple-files-filepond-based basic file uploader look. You can use allowMultiple or multiple attribute too to implement multiple upload.

{/* File uploader with multiple files upload */}
With Validation

Using the basic table up, upload here to see how .with-validation-filepond-based basic file uploader look. You can use see here or{" "} 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-) {" "} attribute too to implement validation.

{/* File uploader with validation */}
Image Preview

Using the basic table up, upload here to see how .image-preview-filepond-based basic file uploader look. This preview for uploaded or dropped images.

{/* File uploader with image preview */}
Image Exif Orientation

Using the basic table up, upload here to see how .image-exif-filepond-based basic file uploader look. This helps in correctly orienting photos taken on mobile devices.

{/* Auto image crop file uploader */}
Image Auto Crop

Using the basic table up, upload here to see how .image-crop-filepond-based basic file uploader look. You can use imageCropAspectRatio or{" "} image-crop-aspect-ratio to set aspect ratio.

{/* Auto crop image file uploader */}
Image Auto Filter

Using the basic table up, upload here to see how .image-filter-filepond-based basic file uploader look.

{/* Auto filter image file uploader */}
Image Auto Resize

Using the basic table up, upload here to see how .image-resize-filepond-based basic file uploader look.

{/* Auto resize image file uploader */}
{"{"}% endblock %{"}"} {"{"}% block styles %{"}"} {"{"}% endblock %{"}"} {"{"}% block js %{"}"} {"{"}% endblock %{"}"}