Resumable File Upload Server Using Tusd and Uppy

In today's fast-paced world, staying connected means sharing memories in the form of photos – but what happens when those uploads are interrupted? Fear not, because with Tusd, a resumable file upload server built with go, you can pick up right where you left off, ensuring no photo is left behind.

I transfer my photos from my iphone and android tablet to my computer using this setup. Now let's integrate Tusd and awesome Uppy library into the mix. This innovative open-source libraries simplifies and streamlines your web upload experience with its user-friendly interface. Together, these powerful tools create a robust system that handles large file transfers efficiently – even over unstable connections. Follow our step-by-step guide to set up this duo on your personal tech blog, providing your readers the knowledge and capability to effortlessly upload photos from their phones to computers without losing progress due to interruptions. Get ready for a seamless file transfer experience that's both reliable and easy to implement!

I developed this repository as a streamlined method of transferring files from my mobile device to my computer effortlessly and dependably, accommodating not only photos but also any large or small file type due to its resuming capability. The project relies on the TUS protocol implementation via tusd server in tandem with the client-side library known as Uppy

Embarking on this journey requires an understanding of Tusd and Uppy, so let's dive into the specifics. To set up your resumable file upload server with Tusd.

Downloading and Running tusd

Follow these steps below to download and run tusd on your machine:

  1. Download the latest tusd binary from here. If you're using Linux or mac use wget:
wget https://github.com/tus/tusd/releases/download/v2.4.0/tusd_darwin_arm64.zip
  1. Open the zip file and move the executable to /usr/local/bin/ or /usr/bin/ directory:
unzip tusd_darwin_arm64.zip
chmod +x tusd_darwin_arm64/tusd
sudo mv tusd_darwin_arm64/tusd /usr/local/bin
  1. Clone the repository
git clone https://github.com/akarca/resumable-file-uploads.git
cd resumable-file-uploads
  1. Run tusd with the following command to set up your upload directory, host, port, and hooks directory:
tusd -upload-dir=./data -behind-proxy -host 0.0.0.0 -port 8080 -hooks-dir=./hooks/

Setting up Nginx (linux)

  1. Open nginx.conf and edit the path to the repository. Edit the line containing /Users/serdar/workspace/resumable-file-uploads/.

  2. Copy the nginx.conf file to your nginx configuration directory, typically located at /etc/nginx/sites-enabled/ or /etc/nginx/conf.d/:

sudo cp nginx.conf /etc/nginx/conf.d/tusd.conf
  1. Restart nginx:
sudo systemctl restart nginx

Setting up Nginx (macOS)

  1. If you're using Homebrew, install and set up nginx with the provided configuration file:
brew install nginx
cp nginx.conf /opt/homebrew/etc/nginx/servers/tusd.conf
brew services restart nginx

Usage

  1. Open your browser and go to http://127.0.0.1:8000 or use a tool like Postman to send requests to http://127.0.0.1:8000/files/. If you want to upload photos from your phone, connect it to the same WiFi as your computer and find your computers local IP address. Then you can open a browser on your phone and go to http://<local ip e.g. 192.168.0.123>:8000

  2. The uploaded files will be stored in the "files/" directories, whereas tusd uses the "data/" folder for processing uploads. Feel free to delete the contents of this temporary directory after completion.

Bonus: On my iPhone 7 uppy didn't work, so I created another client with tus-js-client: http://127.0.0.1:8000/tus.html

To find your local ip on mac:

ifconfig | grep inet | grep broadcast

It shows the local ip 192.168.1.193 on my computer:

Now from my iphone, I go to: http://192.168.1.193:8000

Tusd Plugin to Preserve Original File Names

Tusd hashes the file names and keep them in the data/ folder. https://github.com/akarca/resumable-file-uploads/tree/main/hooks script automates the process, seamlessly moving files from the data/ folder to the files/ directory once the upload is complete. Anyone can use this file hook to preserve original file names while using tusd. Copy the script into hooks/ folder add run tusd: tusd -hooks-dir=./hooks/

Links

tusd repo: github.com/tus/tusd

uppy repo: github.com/transloadit/uppy

tusd-js-client repo: github.com/tus/tus-js-client

Resumable File Uploads repo:github.com/akarca/resumable-file-uploads