Single File
<div class="profile-image">
<!-- // The classic file input element we'll enhance
// to a file pond, we moved the configuration
// properties to JavaScript -->
<div class="img-uploader-content">
<input type="file" class="filepond"
name="filepond" accept="image/png, image/jpeg, image/gif"/>
</div>
</div>
/**
* ==================
* Single File Upload
* ==================
*/
// We register the plugins required to do
// image previews, cropping, resizing, etc.
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform,
// FilePondPluginImageEdit
);
// Select the file input and use
// create() to turn it into a pond
FilePond.create(
document.querySelector('.filepond'),
{
// labelIdle: `<span class="no-image-placeholder"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span> <p class="drag-para">Drag & Drop your picture or <span class="filepond--label-action" tabindex="0">Browse</span></p>`,
imagePreviewHeight: 170,
imageCropAspectRatio: '1:1',
imageResizeTargetWidth: 200,
imageResizeTargetHeight: 200,
stylePanelLayout: 'compact circle',
styleLoadIndicatorPosition: 'center bottom',
styleProgressIndicatorPosition: 'right bottom',
styleButtonRemoveItemPosition: 'left bottom',
styleButtonProcessItemPosition: 'right bottom',
files: [
{
// the server file reference
source: './assets/img/drag-1.jpeg',
// set type to limbo to tell FilePond this is a temp file
options: {
type: 'image/png',
},
},
],
}
);
Multiple File
<div class="multiple-file-upload">
<input type="file"
class="filepond file-upload-multiple"
name="filepond"
multiple
data-allow-reorder="true"
data-max-file-size="3MB"
data-max-files="3">
</div>
/**
* ====================
* Multiple File Upload
* ====================
*/
// We want to preview images, so we register
// the Image Preview plugin, We also register
// exif orientation (to correct mobile image
// orientation) and size validation, to prevent
// large files from being added
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize,
// FilePondPluginImageEdit
);
// Select the file input and use
// create() to turn it into a pond
FilePond.create(
document.querySelector('.file-upload-multiple')
);
Copyright © 2022 DesignReset, All rights reserved.
Coded with