FlareDrive

English | 简体中文

It's a fork of longern/FlareDrive, with a lot of new features added and other tweaks applied.

Cloudflare R2 storage manager with Workers or Pages. Free 10 GB storage. Free serverless backend with a limit of 100,000 invocation requests per day. More about pricing

• FlareDrive
• Features
• Installation
  • Deployment to Cloudflare Workers (recommended)
  • Deployment to Cloudflare Pages
• WebDAV endpoint
• CGI feature
• Development
  • Run this project locally as Workers
  • Run this project locally as Pages
• Acknowledgments

Features

• Upload large files
• Upload file directly from URL ("Cloud download")
• Create folders
• Search files (requires Cloudflare D1 database)
• Image/video/PDF thumbnails
• WebDAV endpoint, compatible with rclone webdav backend's owncloud vendor, support md5 hashes
• Drag and drop upload, or paste (Ctrl+V) files from clipboard to upload
• Share & Publish files or folders temporarily or permanently. ("Publish" feature requires Cloudflare Workers KV)
• Images lightbox
• Online text / image files editor
• Online PDF / DOCX files previewer
• Create and manage "url" (internet shortcut) files
• CGI feature: Use LiquidJS template to generate contents dynamically.

Installation

Before starting, you should make sure that

• You have created a Cloudflare account
• R2 service is activated (requires payment method added to CF account) and at least one bucket is created
• (optional but recommended) KV & D1 instances are created.

This project can be de deployed to Cloudflare Workers or Cloudflare Pages.The Workers is the new and recommanded way, but it requires you to manually input the Cloudflare resource (R2 / KV / D1) ids in the variables at this time. The Pages way is slightly simpler to configure as you can set the Cloudflare resource bindings directly in the dashboard, but lacks with some features.

Deployment to Cloudflare Workers (recommended)

Fork this project and connect your fork with Cloudflare Workers. Cloudflare dashboard Settings:

• Build configuration:
  • Build command: npm run build:all
  • Deploy command: npm run deploy
  • Version command: npm run cfversion
  • Root directory: /
• Variables and Secrets: Set the following variables. (Any change take effect immediately)
  • WEBDAV_USERNAME: username.
  • WEBDAV_PASSWORD password.
  • (optional) CF_ACCOUNT_ID & CF_ANALYTICS_TOKEN. For access Clareflare Resources (Workers / R2 / KV / D1) usage statistics data.
    • CF_ACCOUNT_ID: Cloudflare Account ID. The uuid part of Cloudflare dashboard url, e.g. https://dash.cloudflare.com/a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6 => a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6 .
    • CF_ANALYTICS_TOKEN: Cloudflare API token of Analytics. Create one here. Use Read analytics and logs template.
  • (optional) global config keys: If KV is binded, these configs can be modified through Web UI, the env values (if any) are used as initial config.
    • PUBLIC_PREFIX, PUBLIC_DIR_PREFIX, PUBLIC_RWDIR_PREFIX. Values of each variable are comma-separated "public" path prefixes. Pathes of these prefixes are allowed to be accessed (readonly / readonly with dir listing / writable) anonymously.
    • HARD_SHARE_EXPIRATION: Flag. Set an 1 to enable share hard deletion mode: automatically delete the share KV object after expiration.
    • USE_FULL_SEARCH: Flag. Set to 1 to use full search mode by default.
• Build - Variables and secrets. (Any change require re-build to take effect)
  • R2_BUCKET_NAME : The Cloudflare R2 bucket name.
  • (optional) KV_ID : The Cloudflare Workers KV instance id.
  • (optional) DATABASE_ID : The Cloudflare D1 database id.
    • Though KV_ID and DATABASE_ID are optional, we strongly recommand to set them, otherwise some features of this project won't work.
  • (optional) SITENAME : Site name. Default is FlareDrive.
  • (optional) SHORT_SITENAME : Short site name. Default is the same value as SITENAME variable.
  • (optional) FAVICON_URL : Custom site favicon (icon) image url. It's recommended to use an .png image of 512x512 size.
  • (optionL) JS_URL & CSS_URL: Custom JavaScript & CSS file url. If set, they will be injected in the <head> element of Web UI.
  • (optional) DEBUG : Flag. Set to 1 to enable Cloudflare Workers Logs.

Deployment to Cloudflare Pages

Fork this project and connect your fork with Cloudflare Pages. Select Vite framework preset. Cloudflare dashboard Settings:

• Build command: npm run build:all-pages
• Build output: dist
• Build system version: Version 3.
• Variables and Secrets: See above (the Workers version) for meanings.
  • WEBDAV_USERNAME, WEBDAV_PASSWORD
  • (optional) SITENAME, SHORT_SITENAME, FAVICON_URL, JS_URL, CSS_URL, PUBLIC_PREFIX, PUBLIC_DIR_PREFIX, PUBLIC_RWDIR_PREFIX.
  • (optional) CF_ACCOUNT_ID & CF_ANALYTICS_TOKEN.
  • (optional) WORKER_URL & WORKER_TOKEN : The server side thumbnail generation feature uses Cloudflare Images Resizing, which is only supported in Workers but not Pages. To use this feature in Pages deployment, you need to (manually) deploy workers/forwarder.js file to Cloudflare Worker (set the TOKEN variable), then set these variables to worker url & token.
• Bindings:
  • Bind R2 bucket to BUCKET name.
  • (optional) Bind Workers KV to KV name.
  • (optional) Bind D1 Database to DB name.
  • (optional) Use wrangler CLI to deploy workers/reindexer-do.ts to CF as Durable Object (bind BUCKET and DB to the deployed DO too), than bind the DO to REINDEXER_DO name. It's only required in Pages mode as CF pages don't support Durable Objects directly.

You need to retry deployment for any config changes to take effect.

WebDAV endpoint

You can use WebDAV protocol to access your files. Fill the endpoint URL as https://<your-domain.com>/dav and use the username and password you set.

However, the standard WebDAV protocol does not support large file (≥128MB) uploads due to the limitation of Cloudflare Workers. You must upload large files through the web interface which supports chunked uploads.

The WebDAV endpoint is compatible with rclone webdav backend's owncloud vendor, support md5 hashes. Example rclone config:

[flaredrive]
type = webdav
url = https://flaredrive.example.com/dav/ # replace with your domain
vendor = owncloud
user = root # WEBDAV_USERNAME
pass = obscured_password # rclone obscure <WEBDAV_PASSWORD>
encoding = None

CGI feature

CGI feature use LiquidJS template engine to render a .cgi file and serve rendered contents. It works on published links (/s/*) only, you also need to tick Enable CGI checkbox in publish dialog. It recognizes index.cgi as dir index file automatically. Also, if 404.cgi in share root dir exists, it will be used as fallback if current requested path file doesn't exist. Currently only GET method is supported. The template receives { request, env } as initial context; the request is the current http request sent by the user browser; the env (Record<string, string> type) environment variables can be configured in publish dialog.

Several custom tags are available:

• {% set_header "Content-Type: text/plain" %} : Set response http header.
• {% set_header "Status" 404 %} : Set response status code.
• {% set_body body %} : Set response body.

Available custom filters:

• {%- assign res = "url" | fetch -%} : fetch a url and store response as {status, headers, body, data} in res variable. The body is raw response body string; the data is response body parsed object if it's a valid json.
• json_parse: Parse a string as JavaScript literal to object. The string doesn't need to be strict json. E.g. {% assign my_obj = '{id: 1, name: "Item"}' | json_parse %}.
• query_string : Parse a url query string or a full url and return query variable value. E.g. {% assign bar = 'https://example.com/?foo=a&bar=b' | query_string: "bar" %}.
• {{ "123456" | md5sum }} : Calculate the md5 sum.
• {{ "example.com" | nslookup}} : Do a DNS query and return result object json. It accepts two optional parameters:
  • type: defaults to A. E.g. {{ "example.com" | nslookup: "AAAA"}}.
  • boolean flag to allow returning result (instead of throwing exception directly) even if the DNS query failed.

Example example.cgi contents:

{%- assign todoItem = "https://jsonplaceholder.typicode.com/todos/1" | fetch -%}
{%-  set_header "Content-Type: text/html" -%}

<h1>Async Fetch Test</h1>
<div class="card">
  <h3>Todo ID: {{ todoItem.data.id }}</h3>
  <p>Title: {{ todoItem.data.title }}</p>
  <p>Completed: {{ todoItem.data.completed }}</p>
</div>

Rendered contents:

<h1>Async Fetch Test</h1>
<div class="card">
  <h3>Todo ID: 1</h3>
  <p>Title: delectus aut autem</p>
  <p>Completed: false</p>
</div>

For more examples, check functions/cgi.ts file.

Development

Prepare development environment:

1. Run npm i.
2. Copy .env.sample to .env.local and modify it to set environment variables. (Note: .env.local is used by Vite. Cloudflare Wrangler only recognizes .dev.vars file, running npm run build will automatically copy the former to the latter)
3. Copy wrangler.sample.toml (Running as Workers) or wrangler.example-pages.toml (Running as Pages) to wrangler.toml.
4. Run npm run cfdevmigrations to apply local D1 database migrations, which are defined inside migrations/ folder.
5. Run npm run codegen to generate graphql/generated/*.ts files from graphql/*.graphql source files.

Run this project locally as Workers

1. Run npm run build:worker to build worker dist file. Each time you modify the source files of functions/* or lib/*, you must re-run this build command. No watcher is available at this time.
2. Run npm run cfdev in terminal to start the wrangler Workers backend at http://127.0.0.1:8787.
3. Run npm start in another terminal to start Vite dev server at http://localhost:5173/. It will proxy API requests and forward them to wrangler backend automatically.

Open http://localhost:5173/ in browser and it's done.

Run this project locally as Pages

1. Run npm run cfpagesdev in terminal to start the wrangler Pages "functions" backend at http://127.0.0.1:8787. Wrangler should watch source file changes and restart itself automatically.
2. Run npm start in another terminal to start Vite dev server at http://localhost:5173/.

Same as above, open http://localhost:5173/ in browser and it's done.

Acknowledgments

WebDAV related code is based on r2-webdav project by abersheeran.