filedrop

WebRTC 文件传输 - React/TypeScript 前端。「📲 WebRTC file transfer - React/TypeScript front end.」

Github星跟踪图

filedrop

Easy peer-to-peer file transfer.

Self-hosting

Docker

Requirements:

  • docker
  • docker-compose
  • bash
  • openssl

Clone the repo and run the following command:

./docker-start.sh

Make sure that your user is in the docker group.

In case another reverse proxy is used make sure to change the default port (from 80) and to add the X-Forwarded-For header with client's IP address.

TURN uses TCP port 3478 and UDP ports 49152-65535.

docker-start.sh arguments

Option Description
-n <name> Sets application name.
-e <email> Sets contact email.
-p <port> Sets port for the application to be exposed at.
-f Enables WS_USE_X_FORWARDED_FOR.

Manual

First you need to set up a TURN server (like coturn).

Then you need to clone this repository, run yarn build and then yarn start. I also use nginx to proxy the back end through it. Here's a guide on how to achieve that.

Environment variables

The following variables are used in the build process of the frontend:

Variable Default value Description
VITE_APP_NAME filedrop Application title.
VITE_APP_USE_BROWSER_ROUTER 0 1 if you want the application to use BrowserRouter instead of HashRouter.

The following variables are used in the WebSockets server:

Variable Default value Description
WS_APP_NAME filedrop Application title.
WS_ABUSE_EMAIL null E-mail to show in the Abuse section.
WS_HOST 127.0.0.1 IP address to bind to.
WS_PORT 5000 Port to bind to.
WS_USE_X_FORWARDED_FOR 0 Set to 1 if you want the application to respect the X-Forwarded-For header.
WS_MAX_SIZE 65536 The limit should accommodate preview images (100x100 thumbnails).
STUN_SERVER stun:stun1.l.google.com:19302 STUN server address.
TURN_MODE default default for static credentials, hmac for time-limited credentials.
TURN_SERVER null TURN server address.
TURN_USERNAME null TURN username.
TURN_CREDENTIAL null TURN credential (password).
TURN_SECRET null TURN secret (required for hmac).
TURN_EXPIRY 3600 TURN token expiration time (when in hmac mode), in seconds.
NOTICE_TEXT null Text of the notice to be displayed for all clients.
NOTICE_URL null URL the notice should link to.

FAQ

What is the motivation behind the project?

I didn't feel comfortable logging into my e-mail account on devices I don't own just to download an attachment and cloud services have extremely long URLs that aren't really easy to type.

Where do my files go after I send them through the service?

To the other device. Sometimes the (encrypted, since WebRTC uses encryption by default) data goes through the TURN server I run. It's immediately discarded after being relayed. File metadata also is not saved.

Doesn't this exist already?

While ShareDrop and SnapDrop are both excellent projects and most definitely exist, I felt the need to create my own version for a several reasons:

  • I wanted to build something using React.js and TypeScript.
  • ShareDrop doesn't work when the devices are on different networks but still behind NAT.
  • I didn't like the layout and design of both, I feel like the abstract design of FileDrop makes it easier to use.
  • I was not aware of these projects while I started working on this project.
  • ShareDrop's URLs are extremely long.

I don't use PeerJS (while the other two projects do) and I also host TURN and WebSocket servers myself (instead of relying on Firebase). Sometimes you may get connected to Google's STUN server (always if a TURN server is not provided in the configuration).

HTTPS setup

Setup with a reverse proxy in front of nginx

  1. Configure your reverse proxy to proxy requests to 127.0.0.1:PORT and then follow your usual instructions for using SSL certificates with said proxy.
  2. Rebuild the application.
  3. Make sure the TURN server can be connected to from the outside.

Nginx configuration example

More details available here: https://www.nginx.com/blog/websocket-nginx/

worker_processes auto;

events {
  worker_connections 1024;
}

http {
  upstream filedrop {
    server 127.0.0.1:5000; # 5000 = PORT
  }

  map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
  }

  # ...

  server {
    listen 80;
    # server_name should be configured here.
    # HTTPS should be configured here. (certbot will handle this for you, if you're using Let's Encrypt.)

    # ...

    location / {
      proxy_pass http://filedrop;
      proxy_http_version 1.1;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
    }
  }
}

主要指标

概览
名称与所有者mat-sz/filedrop
主编程语言TypeScript
编程语言HTML (语言数: 5)
平台
许可证BSD 3-Clause Clear License
所有者活动
创建于2020-01-07 17:36:46
推送于2024-06-07 16:16:38
最后一次提交2024-06-07 18:16:35
发布数0
用户参与
星数698
关注者数15
派生数61
提交数418
已启用问题?
问题数28
打开的问题数3
拉请求数1
打开的拉请求数0
关闭的拉请求数0
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?