Set http headers on per file basis?

Hi, Can I set custom http headers on per file basis? E.g. I would like to send original file name in http header. I use XHR Upload to upload files and I set formData to false, because I don’t want to deal with a multipart form on the server. Now have to figure it out how to send file names and possibly some other data (modification date might also be useful).

[StasD]

This is exactly what I was looking for! Thanks!

I put the code inside 'file-added' event handler, as file already exists there (no need to call uppy.getFile). Also decided not to include ...file.xhrUpload as this property doesn’t exist at that point.

    this.uppy.on('file-added', (file) => {
      this.uppy.setFileState(file.id, {
        xhrUpload: {
          headers: {
            'Original-File-Ext': file.extension,
            'Original-File-Name': encodeURIComponent(file.name),
            'Original-File-Date': file.data.lastModified,
          },
        },
      });
    });

Also had to encode file names using encodeURIComponent() function, as it turned out that uppy doesn’t even start uploading files if I set a header e.g. 'Original-File-Name': file.name and file name contains unicode characters.

On server side I then do this (in asp.net controller):

var headers = Request.Headers;
var ext = headers["Original-File-Ext"].ToString();
var origName = Uri.UnescapeDataString(headers["Original-File-Name"].ToString());
string origDateModified = headers["Original-File-Date"];

All looks quite nice to me and works great! I don’t think you need to do anything extra on this matter. 😃

[goto-bus-stop]

There is not a great way to do this, but there is a way. You can use setFileState to assign headers:

const file = uppy.getFile(fileID)
uppy.setFileState(fileID, {
  xhrUpload: {
    ...file.xhrUpload,
    headers: { 'App-File-Name': file.meta.name }
  }
})

Not the prettiest but it should work. You could do this inside an uppy.on('upload') event handler to make sure that the value is updated right before it’s being uploaded. file.xhrUpload is an undocumented feature but we rely on it in several plugins so it won’t go away in a minor release.

This is a common feature request that we’ll hopefully be able to address in a nicer way at some point 😅