Uppy: Associating uploaded files to user or session ID

[yudong]

Associating Uploaded Files to a User ID

Thanks for this great project and all the hard work behind it.

Here is a requirment I am looking into - associating uploaded files to a user ID. I assume other applications will have similar requirment.

There are two solutions I can think of. First, create a sub directory with user ID in the folder name and upload files under this subdirectory. The second solution is to add use ID in the metadata file.

After reading documentation on tusd and uppy, I can't figure out how to upload files to a sub direcroy.

Also, metadata can be edited by end user and doesn't seem to be solution.

I would really appreciate any tips and pointers to handle this requirement.

[kvz]

The way we do this over at Transloadit it sign the entire payload, including e.g. a user_id field, using a secret only known on the server side. This way we can make sure meta payloads as such are received untempered with

Does that help?

[juhaelee]

What is the best way to send information to the server? for example if i was uploading to S3 and I wanted an uppy instance that can send either to folder A or folder B using a toggle switch. Would it be to pass that information using the MetaData plugin?

[goto-bus-stop]

Sorry for leaving this hanging!

Sending information along with a tus or XHR upload is generally best done with the MetaData plugin. For tus, all MetaData fields will be passed along in the Upload-Metadata header. For XHR, all MetaData fields are sent as form fields.

If the metadata is known beforehand, the next version (should be released this week) will have a meta option to set it on every file:

const uppy = new Uppy({
  meta: { userId: getCurrentUserId() }
})

To change it at runtime, at the moment you must call updateMeta for each file:

function setFolder (path) {
  const fileIDs = Object.keys(uppy.state.files)
  fileIDs.forEach((id) => {
    uppy.updateMeta({ folder: path }, id)
  })
}

With tusd, I'm not sure myself how to upload to a subdirectory--I don't think it's possible by default, so you may need to configure a post-finish hook for that that moves an uploaded file into the desired place.

To associate a user ID safely, the best thing to do would be as @kvz suggested: add the user ID, as well as a server-generated signature using a secret only known on the server side, as metadata. Then in a post-finish hook, verify that the signature is correct, and move the file to the correct place.

---

If you are uploading to S3 manually today with the XHRUpload (previously Multipart) plugin, it's not easily possible to send along varying metadata in headers for a PUT Object request. If you are sending a POST Object request, you can use the updateMeta function like above to configure metadata fields on the request.

With S3 though, the same thing goes as for tusd: for security reasons you should ideally sign uploads on the server, including eg. someone's User ID as metadata at that step. That way the client never touches it and it can't be tempered with, because it's validated by a server-generated signature. With PHP for example you could do:

$request = $s3->createPresignedRequest('PutObject', [
  'Key' => 'xyz.jpg',
  'Metadata' => [
    'UserID' => $_SESSION['current_user_id'],
  ],
]);

$url = (string) $request->getUri();
// $url is the URL to upload to

to embed metadata securely.

The next Uppy release will include an S3 uploader plugin that makes this a lot easier, there is already an example in the repository of how to use signatures generated on the server side with that: https://github.com/transloadit/uppy/tree/master/examples/aws-presigned-url And it includes a small server-side example in PHP. It uses the AWS SDK so it should be similar in most languages.

I hope that helps!

[juhaelee]

@goto-bus-stop is this possible using the new s3 uploader plugin with uppy-server?

[goto-bus-stop]

It's not possible with uppy-server. The uppy-server S3 endpoint is not very configurable, right now you can only specify custom upload conditions (eg to restrict upload size). It'd be cool to have a slightly more configurable endpoint in uppy-server, but I'm not sure how to do that in a nice way.

So it's necessary to run your own S3 parameters endpoint, and provide a custom getUploadParameters(file) option to the S3 plugin. The client-side code would look a bit like what's in the example, but with the user ID or session token added in there somewhere.

[juhaelee]

What about a plugin type architecture for uppy server similar to the frontend? that way we can pass in option parameters. something like:
```
var app = express()
app.use(bodyParser.json())

var uppyApp = uppy.app({ filePath: '/path/to/folder/' });
uppyApp.use(Google);
uppyApp.use(S3, {
key: (req, filename) => ${req.user.id}/${filename},
});

app.use(uppyApp)
...

[ifedapoolarewaju]

Regarding the flexibility to manipulate file upload directory, I think we can add a postUpload hook to uppy-server, so users can pass a function that would receive the upload path and then they can do with it, whatever they want (e.g move the file to a different folder, or upload it to another remote environment, etc)

so we can have something this in uppy-server options
{ onUpload: (filePath) => { // do some custom stuff here } }
so users can easily move the file to a user specific directory after the upload is done.

[goto-bus-stop]

uppy-server has had a getKey option for S3 for some time now (https://github.com/transloadit/uppy-server/pull/43), which I believe addresses the final actionable item in this issue. Please open a new issue if you have further questions. Thanks!

[atifaziz2]

Regarding the flexibility to manipulate file upload directory, I think we can add a postUpload hook to uppy-server, so users can pass a function that would receive the upload path and then they can do with it, whatever they want (e.g move the file to a different folder, or upload it to another remote environment, etc)

so we can have something this in uppy-server options

  onUpload: (filePath) => {
      // do some custom stuff here
  }
}

so users can easily move the file to a user specific directory after the upload is done.

how i get filePath?