{% 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.

##### 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.

##### 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.

##### 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.

##### 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.

##### 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.

##### 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.

##### Image Auto Filter

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

##### Image Auto Resize

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

{% endblock %} {% block styles %} {% endblock %} {% block js %}
{% endblock %}