jqueryfilepond

FilePond and jQuery: Add an existing file without uploading it again

I am trying to add an already uploaded file into FilePond field.

This bit of code is working except that it uploads the file again. I just need to add the file information in the data and not uploading it again as it was already uploaded:

$('.my-pond').first().filepond('addFile', 'archive.zip').then(function(file){
      console.log('file added', file);
    });

Someone has any idea about how can I solve this problem?

Solution

  • After stumbling on this (old) post, and doing some digging myself I've found the solution.

    When creating the filepond instance, setting the options it is needed to add the load() function to the server object. The load function generates a blob from the remote image when a file is set.

    For example:

    load: (source, load, error, progress, abort, headers) => {
    var myRequest = new Request(source);
    fetch(myRequest).then((res) => {
        return res.blob();
    }).then(load);
}

    Now you can set the default image two ways.

    Adding the file by setting it directly in the options when creating the filepond instance. For example:

    // File is directly added via options
let pond = FilePond.create(field, {
    files: [
        {
            source: FULL_IMAGE_URL,
            options: {
                type: 'local'
            }
        }
    ],
    server: {
        url: API_URL,
        process: '/fileprocess',
        revert: '/filerevert',
        load: (source, load, error, progress, abort, headers) => {
            var myRequest = new Request(source);
            fetch(myRequest).then((res) => {
                return res.blob();
            }).then(load);
        },
    }
})

    OR by adding the file after the instance is created

    // Creating the filepond instance, without adding a default image
let pond = FilePond.create(field, {
    server: {
        url: API_URL,
        process: '/fileprocess',
        revert: '/filerevert',
        load: (source, load, error, progress, abort, headers) => {
            var myRequest = new Request(source);
            fetch(myRequest).then((res) => {
                return res.blob();
            }).then(load);
        },
    }
})

// ... Some other function() {
    pond.setOptions({
        files: [
            {
                source: FULL_IMAGE_URL,
                options: {
                    type: 'local'
                }
            }
        ]
    });
// }

    Sources: