Uploaded Files Browser

11 Minutes to Integrate

Often you may want to allow user to choose previously uploaded files again. Uploadcare doesn’t store relations between users and files and also doesn’t allow the file uploader to list all files in the project for security reasons.

There are two ways to handle the files-to-user relations:

  1. You can store this information on your side and load list of user’s files using AJAX requests to your server. This is relatively complex way because you’ll need to implement some storage and endpoint which will return file list from this storage.
  2. List of previously uploaded files can be stored locally on user’s computer in browser’s local storage. This way user will not be able to choose files uploaded from other devices, but this doesn’t require any support on server side.

Following example shows how to add local storage history tab with following features:

  • Lists are separated by public key. If you are using file uploaders with two or more public keys, only files from current project will be shown.
  • List of last 50 files are shown.
  • If file uploader has images-only flag, only image files will be shown.
  • User can remove files from history.

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