Browsing previously uploaded files

11 minutes to integrate

Sometimes you might want to allow users to see and manage the files they uploaded. But Uploadcare doesn’t store relations between users and files and doesn’t allow its File Uploader to list all files in the project for security reasons.

However, there are two ways you can handle the file-to-user relations:

  1. Store this information on your side, and load the list of user files in the uploader widget by making AJAX requests to your server. This is a relatively complex way because you’re going to require storage space, as well as an endpoint that will return the list of files from this storage. This implementation heavily depends on your project’s tech stack.

  2. Store the list of previously uploaded files in the browser’s local storage of your user. This way, the users won’t be able to choose their files that were uploaded from other devices, but this solution won’t require any support or maintenance on your part.

Take a look at this example of a second implementation that uses the browser’s local storage:

See the Pen Uploaded files browser exampleby uploadcare (@uploadcare) on CodePen.

Several recommendations from our engineers

  • Separate file lists by the project’s public key. Every project has its own public key. If you use file uploaders with two or more projects, the user will see only files from the current project.

  • Limit the number of files in the list. In this case, only the last 50 files are shown.

  • Use an images-only flag to show image files only.

  • Make sure users can use their file upload history to remove files.