Don't use JQ and file pind upload file
I'm facing an issue with FilePond while attempting to add files to the input field using jQuery. Here is my code:
var inputDesc = document.getElementById("inpImgDesc"); FilePond.create(inputDesc, { allowMultiple: true, labelIdle: 'Kéo & Thả hoặc Click để chọn tệp', labelFileProcessing: 'Đang xử lý tệp...', labelFileProcessingComplete: 'Xử lý hoàn tất', acceptedFileTypes: ['image/*'], imagePreviewMaxHeight: 300, imagePreviewMaxWidth: 300, });
And I've tried a few methods to add files to FilePond:
Method 1: var pond = FilePond.find(document.getElementById('inpImgDesc')); $.get("http://localhost:8080/photo?realEstateId=" + paramProject).then(function(photos){ photos.forEach(photo => { var parts = photo.path.split('/'); var fileName = parts[parts.length - 1] $.get("http://localhost:8080" + photo.path).then(function(response) { var file = new File([response], fileName); pond.addFile(file); }); }); });
Method 2:
var pond = FilePond.find(document.getElementById('inpImgDesc')); $.get("http://localhost:8080/photo?realEstateId=" + paramProject).then(function(photos){ photos.forEach(photo => { const file = { source: "C:/Users/PC/Desktop/realestate/src/main/resources/static" + photo.path, options: { type: 'local', // This is a local path }, }; pond.addFile(file); }); }); Method 3: $.get("http://localhost:8080/photo?realEstateId=" + paramProject).then(function(photos){ photos.forEach(photo => { const file = { source: photo.path, options: { type: 'local', // This is a local path }, }; pond.addFile(file); }); });