ASP Net Core Filepond load file from server

Question

I have a project where it uses Filepond to upload files and I need it to load file from server.

I already follow the docs but It doesn't work. The Filepond gives error Error during load 400 and it even doesn't send the request to load the file from server

This is my javascript

let pond = FilePond.create(value, {
            files: [
                {
                    // the server file reference
                    source: 'e958818e-92de-4953-960a-d8157467b766',

                    // set type to local to indicate an already uploaded file
                    options: {
                        type: 'local'
                    }
                }
            ]
        });

FilePond.setOptions({
    labelFileProcessingError: (error) => {
        return error.body;
    },
    server: {
        headers: {
            '@tokenSet.HeaderName' : '@tokenSet.RequestToken'
        },
        url: window.location.origin,
        process: (fieldName, file, metadata, load, error, progress, abort) => {
            // We ignore the metadata property and only send the file

            fieldName = "File";

            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', '/UploadFileTemp/Process');
            request.setRequestHeader('@tokenSet.HeaderName', '@tokenSet.RequestToken');

            request.upload.onprogress = (e) => {
                progress(e.lengthComputable, e.loaded, e.total);
            };

            request.onload = function () {
                if (request.status >= 200 && request.status < 300) {
                    load(request.responseText);
                }
                else {
                    let errorMessageFromServer = request.responseText;
                    error('oh no');
                }
            };

            request.send(formData);

        },
        revert: "/UploadFileTemp/revert/",
        load: "/UploadFileTemp/load"


    }
})

This is my controller

 public async Task<IActionResult> Load(string p_fileId)
        {
            //Code to get the files

            //Return the file 
            Response.Headers.Add("Content-Disposition", cd.ToString());
            Response.Headers.Add("X-Content-Type-Options", "nosniff");
            return PhysicalFile(filePath, "text/plain");
        }

NB

I already test my controller via postman and it works. I also check the content-disposition header

Answer 1

I'd advise to first set all the options and then set the files property.

You're setting the files, and then you're telling FilePond where to find them, it's probably already trying to load them but doesn't have an endpoint (yet).

Restructuring the code to look like this should do the trick.

let pond = FilePond.create(value, {
    server: {
        headers: {
            '@tokenSet.HeaderName': '@tokenSet.RequestToken',
        },
        url: window.location.origin,
        process: (fieldName, file, metadata, load, error, progress, abort) => {
            // your processing method
        },
        revert: '/UploadFileTemp/revert',
        load: '/UploadFileTemp/load',
    },
    files: [
        {
            // the server file reference
            source: 'e958818e-92de-4953-960a-d8157467b766',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',
            },
        },
    ],
});