FilePond with Laravel fetch issue from external url

130 Views Asked by At

I have the fetch function when I drop a link:

fetch: (source, load, error, progress, abort, headers) => {
            //progress(true, 0, 1024);
            axios({
                // headers: {'Access-Control-Expose-Headers': 'Content-Disposition'},
                method: 'get',
                url: 'fetch?url='+source,
                onUploadProgress: (e) => {
                    // updating progress indicator
                    progress(true, e.loaded, e.total);
                }
            }).then(response => {
                // passing the file id to Filepond
                if (response.status === 200) {
                    let blob = new Blob([response.data],{
                        type: "application/pdf"
                    })
                    load(blob)
                }

            }).
            catch((thrown) => {

                if (axios.isCancel(thrown)) {
                    console.log('Request cancelled', thrown.message);
                } else {
                    // handle error
                    error(error)
                    console.log(thrown)
                }
            })

        },

Laravel endpoint:

public function fetch(Request $request)
    {
        $url = $request->url;
        
        $headers = [
            'Content-Type' => 'application/pdf',
        ];

        return response()->stream(function () use ($url) {
            $file = fopen($url, 'rb');
            fpassthru($file);
            fclose($file);
        }, 200, $headers);
    }

It appears the size is larger in file pond,the actual size is 2.3M

enter image description here

enter image description here

On the validation side I get an error with PdfParser which I use to count pages. My suspicion is the fetch process somehow malforms the PDF from external links, the SAME file uploaded locally works fine.Maybe the Blob conversion in fetch ? Ant input would be helpful. Load function

load: (source, load, error, progress, abort, headers) => {
            // Should get a file object from the URL here
            // ...
            console.log(source)
            // Should call the progress method to update the progress to 100% before calling load
            // (computable, loadedSize, totalSize)
            //progress(true, 0, 1024);

            // Should call the load method with a file object when done
            load(source);

            // Should expose an abort method so the request can be cancelled
            return {
                abort: () => {
                    // Let FilePond know the request has been cancelled
                    abort();
                }
            };
        },
1

There are 1 best solutions below

0
On BEST ANSWER

In axios the default response is JSON so change it to arrayBuffer

url: `fetch?url=${source}`,
responseType: 'arraybuffer',

Then make it a Blob

new Blob([response.data],{type: 'application/pdf'})

The size is correct now