Issue with FilePond when adding files using jQuery

57 Views Asked by At

Don't use JQ and file pond 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:
Copy code
$.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);
    });
});

It here result $.get("http://localhost:8080/photo?realEstateId=" + paramProject) [ { "id": 9, "path": "/images/Project/125/imgDesc/property-14.jpg" }, { "id": 10, "path": "/images/Project/125/imgDesc/property-17.jpg" }, { "id": 11, "path": "/images/Project/125/imgDesc/property-42.jpg" }, { "id": 12, "path": "/images/Project/125/imgDesc/property-44.jpg" }, { "id": 13, "path": "/images/Project/125/imgDesc/property-46.jpg" } ] I did try test src=> src correct enter image description here

0

There are 0 best solutions below