58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: Form file upload Js File
|
|
*/
|
|
|
|
// Dropzone
|
|
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
|
dropzonePreviewNode.id = "";
|
|
if(dropzonePreviewNode){
|
|
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
|
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
|
var dropzone = new Dropzone(".dropzone", {
|
|
url: 'https://httpbin.org/post',
|
|
method: "post",
|
|
previewTemplate: previewTemplate,
|
|
previewsContainer: "#dropzone-preview",
|
|
});
|
|
}
|
|
|
|
// FilePond
|
|
FilePond.registerPlugin(
|
|
// encodes the file as base64 data
|
|
FilePondPluginFileEncode,
|
|
// validates the size of the file
|
|
FilePondPluginFileValidateSize,
|
|
// corrects mobile image orientation
|
|
FilePondPluginImageExifOrientation,
|
|
// previews dropped images
|
|
FilePondPluginImagePreview
|
|
);
|
|
|
|
var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');
|
|
if(inputMultipleElements){
|
|
|
|
// loop over input elements
|
|
Array.from(inputMultipleElements).forEach(function (inputElement) {
|
|
// create a FilePond instance at the input element location
|
|
FilePond.create(inputElement);
|
|
})
|
|
|
|
FilePond.create(
|
|
document.querySelector('.filepond-input-circle'), {
|
|
labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">Browse</span>',
|
|
imagePreviewHeight: 170,
|
|
imageCropAspectRatio: '1:1',
|
|
imageResizeTargetWidth: 200,
|
|
imageResizeTargetHeight: 200,
|
|
stylePanelLayout: 'compact circle',
|
|
styleLoadIndicatorPosition: 'center bottom',
|
|
styleProgressIndicatorPosition: 'right bottom',
|
|
styleButtonRemoveItemPosition: 'left bottom',
|
|
styleButtonProcessItemPosition: 'right bottom',
|
|
}
|
|
);
|
|
} |