filepond making problem with files[0]
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginFileValidateSize,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginFileValidateType
);
FilePond.setOptions({
// allowDrop: false,
// allowReplace: false,
status: 4,
instantUpload: true,
maxFileSize: '5MB',
allowImagePreview: true,
imagePreviewMinHeight: 50,
imagePreviewMaxHeight: 100,
imagePreviewMaxFileSize: '5MB',
imageCropAspectRatio: '1:1',
// className: 'image-upload',
server: {
url: '/images',
process: {
url: '/upload',
},
revert: '/revert',
restore: '/restore/',
load: '/load/',
},
files: filepondInitialFiles,
onremovefile: function(error, file) {
if (file.serverId) {
let input = document.createElement('input');
input.type = 'hidden';
input.name = 'DeletedFilepondImages';
input.value = file.serverId;
uploadForm.appendChild(input);
}
},
onaddfilestart: function(file) {
console.log(`onaddfilestart`);
buttonForm.classList.add('filepondUpload');
buttonForm.setAttribute('disabled', 'true');
},
onaddfileprogress(file, progress) {
console.log(`onaddfileprogress`);
buttonForm.classList.remove('filepondUpload');
buttonForm.removeAttribute('disabled');
},
onprocessfile: function(file) {
console.log(`onprocessfile`);
buttonForm.classList.remove('filepondUpload');
buttonForm.removeAttribute('disabled');
},
onprocessfiles: () => {
console.log('onprocessfiles');
buttonForm.classList.remove('filepondUpload');
buttonForm.removeAttribute('disabled');
},
});
// console.log(fpFiles);
// get a reference to the input element
const filepondInput = document.querySelector(
'#filepondFileUploader input[type="file"]'
);
// create a FilePond instance at the input element location
const filepondObject = FilePond.create(filepondInput, {
maxFiles: 5,
allowBrowse: true,
acceptedFileTypes: ['image/*'],
files: filepondInitialFiles,
labelIdle:
'<div class="image-upload__file-upload-content">Add images</div>',
});