Proper filename with Restore endpoint

[Naghal]

Summary

Hi, I am trying to use the server Restore endpoint to restore a previously uploaded file. The scenario is the following: A user fill a form where there is an upload component. He uploads a file. He exits the form without submitting. The files are kept on the server for 7 days and he can go back to the form and start from where he left the last time.

The file restore works, but the displayed name in the Filepond is the server file key instead of the file name. (Ex.: c2lnbmF0dXJlLnBuZw instead of signature.png)

How to reproduce

Pass the file to restore as prop to the component files={[{source: 'c2lnbmF0dXJlLnBuZw', options: { type: 'limbo' }}]} Server send back the file with the following headers:

The result is the following:

Expected behaviour

Filepond should show signature.png in the component instead of c2lnbmF0dXJlLnBuZw

Environment	Version
OS	Linux Ubuntu
Browser	Chrome latest

Tested with react-filepond v5 and v7.0.1

[rikschennink]

Hi, which version of FilePond did you install 4.7.4?

[Naghal]

Hi, I have core filepond ^4.0.0 as it is said in the changelog.md. Updated to 4.7.4, same behaviour.

[rikschennink]

I can't reproduce this, a test case is very welcome.

[eivee]

Hi,
I just ran into this problem myself today and couldn't figure out why the filename returned in the Content-Disposition header is not being picked up by Filepond.

It turned out that the issue was not related to Filepond itself but to CORS. To resolve the problem all I had to do was send a Access-Control-Expose-Headers: Content-Disposition header with the response, that allows Filepond to read this header.

How to reproduce

1. Provide an initial files array with a temporary uploaded file

   <FilePond
   server="/api"
   files={[
   {
     source: 'serverSideSourceId',
     options: { type: 'limbo' }
   }
   ]}
   />

2. The file is now displayed with the filename serverSideSourceId in Filepond

3. Respond with the following headers from the restore endpoint on the server side when sending the file: /api?restore=serverSideSourceId

   Access-Control-Allow-Origin: *
   Access-Control-Allow-Methods: *
   Content-Type: text/plain
   Content-Length: 42
   Content-Disposition: inline; filename="expected-filename.txt"

4. The filename in Filepond remains serverSideSourceId

Solution

1. Repeat steps 1-3 from above
2. In step 3, add the additional header Access-Control-Expose-Headers: Content-Disposition to the response
3. Filepond is now able to read the Content-Disposition header from the response (including the filename) and displays expected-filename.txt as expected

Background

In a CORS environment, a client may only read the response headers that are considered CORS-safelisted. The Content-Disposition header is not safelisted by default. So in order to read that response header with a client, the server has to explicitly expose the header via CORS by including it in the Access-Control-Expose-Headers header.
More info: Access-Control-Expose-Headers - HTTP | MDN

[rikschennink]

Thanks @eivee 🙏

I’ll close and refer to this issue as well: https://github.com/pqina/filepond/issues/596