/onedrive-cf-index

🏵 Probably the best looking OneDrive Index around! Powered by Cloudflare Workers.

Primary LanguageJavaScriptMIT LicenseMIT

onedrive-cf-index

onedrive-cf-index

Yet another OneDrive index, powered by CloudFlare Workers.

Hosted on Cloudflare Workers Deploy README-CN

This project uses CloudFlare Workers to host and share your personal OneDrive files. It is greatly inspired by: onedrive-index-cloudflare-worker.

Demo

Live demo at Spencer's OneDrive Index.

Screenshot Demo

Features

🚀 General

  • Breadcrumbs for better navigations.
  • Tokens cached and automatically refreshed with Cloudflare Workers KV storage.
  • Route lazy loading with the help of Turbolinks®.
  • Supports OneDrive 21Vianet.（由世纪互联运营的 OneDrive。）
  • Supports mounting SharePoint.

🗃️ Folder indexing

  • Complete new and customisable design at spencer.css.
  • Emoji as folder icon when available (if the first character of the folder name is an emoji).
  • Renders README.md if found in current folder. Rendered with github-markdown-css.
  • Supports pagination, no more limitations like 200 items max for each folder ever again!

📁 File previews

  • File icon rendered according to file type, Font Awesome icons for cleaner look.
  • Plain text: .txt. DEMO.
  • Markdown: .md, .mdown, .markdown. DEMO.
  • Image, supports Medium style zoom effect: .png, .jpg, and .gif. DEMO.
  • Code with syntax highlighting: .js, .py, .c, .json.... DEMO.
  • PDF: Lazy loading, loading progress and built-in PDF viewer. DEMO.
  • Music / Audio: .mp3, .aac, .wav, .oga. DEMO.
  • Videos: .mp4, .flv, .webm, .m3u8. DEMO.

⬇️ Proxied / raw file download

  • [Optional] Proxied download: ?proxied - Downloads the file through CloudFlare Workers if (1) proxyDownload is true in config/default.js and (2) parameter is present in url.
  • [Optional] Raw file download: ?raw - Return direct raw file instead of rich rendered preview if parameter is present.
  • Both these parameters can be used side by side, meaning that ?proxied&raw and ?raw&proxied are both valid.

Yes, this means you can use this project as an image storage service or for serving static files, for example:

https://storage.spencerwoo.com/%F0%9F%A5%9F%20Some%20test%20files/nyancat.gif?raw

Others

See the new features section at the original onedrive-index-cloudflare-worker project page for reference, although I cannot guarantee that all features are usable.

Deployment

Very, very long, tedious, step by step guide warning!

Generating OneDrive API Tokens

  1. Create a new blade app here Microsoft Azure App registrations (OneDrive normal version) or Microsoft Azure.cn App registrations (OneDrive 世纪互联版本):

    1. Login with your Microsoft account, select New registration.
    2. Input Name for your blade app, my-onedrive-cf-index for example.
    3. Set Supported account types to Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox). OneDrive 世纪互联用户设置为：任何组织目录（任何 Azure AD 目录 - 多租户）中的帐户.
    4. Set Redirect URI (optional) to Web (the multiselect dropdown) and http://localhost (the URL).
    5. Click Register.

  2. Get your Application (client) ID - client_id at Overview panel.

  3. Open Certificates & secrets panel, click New client secret and create a new secret called client_secret, set Expires to Never, click Add, and copy the Value of the client_secret (You only have this one chance to copy it.).

  4. Open API permissions panel, select Microsoft Graph, select Delegated permissions, search for offline_access, Files.Read, Files.Read.All, select all three of them and click Add permissions.

    You should have these permissions ready:

  5. Get your refresh_token. On your local machine that has a working installation of Node.js and npm (See Preparations for recommendations for installing Node.js and its toolchain), execute the following command:

    npx @beetcb/ms-graph-cli
    demo gif

    Select the options that you need, and enter the tokens that we just acquired from above. The names are self-explanatory. redirect_url can be set to http://localhost. For more information please go check out the repo at: beetcb/ms-graph-cli.

  6. Finally, create a dedicated folder for your public files inside OneDrive, for instance: /Public. Please don't share your root folder directly!

After all this hassle, you should have successfully acquired the following tokens and secrets:

  • refresh_token
  • client_id
  • client_secret
  • redirect_uri
  • base: Defaults to /Public.

Yes, I know it's a long and tedious procedure, but it's Microsoft, we can understand. 🤷🏼‍♂️

Preparations

Fork then clone, or directly clone this repository. Install dependencies locally, you'll need Node.js, npm and wrangler.

We strongly recommend you install npm with a Node version manager like n or nvm, which will allow wrangler to install configuration data in a global node_modules directory in your user's home directory, without requiring that you run as root.

# Install cloudflare workers official packing and publishing tool
npm i @cloudflare/wrangler -g

# Install dependencies with npm
npm install

# Login to Cloudflare with wrangler
wrangler login

# Verify wrangler status with this command
wrangler whoami

Login to your CloudFlare account at https://dash.cloudflare.com/login, select your domain, and scroll down a bit. You'll see your account_id and zone_id there (on the right sidebar). Also create a DRAFT worker at Workers -> Manage Workers -> Create a Worker with a cool name.

Modify wrangler.toml:

  • name: The draft worker's name, your worker will be published at <name>.<worker_subdomain>.workers.dev.
  • account_id: Your Cloudflare Account ID.
  • zone_id: Your Cloudflare Zone ID.

Create Cloudflare Workers KV bucket named BUCKET:

# Create KV bucket
wrangler kv:namespace create "BUCKET"

# ... or, create KV bucket with preview functions enabled
wrangler kv:namespace create "BUCKET" --preview

Modify kv_namespaces inside wrangler.toml:

  • kv_namespaces: Your Cloudflare KV namespace, you should substitute the id and preview_id values accordingly. If you don't need preview functions, you can remove the preview_id field.

Modify src/config/default.js:

  • client_id: Your client_id from above.
  • base: Your base path from above.
  • If you are mounting regular international OneDrive, you can safely ignore the following steps.
  • If you are mounting Chinese 21Vianet OneDrive (由世纪互联运营的 OneDrive):
    • Set accountType under type to 1.
    • Keep driveType unmodified.
  • If you are mounting SharePoint:
    • Keep accountType unmodified.
    • Set driveType under type to 1.
    • Set hostName and sitePath accordingly.

Add secrets to Cloudflare Workers environment variables with wrangler:

# Add your refresh_token and client_secret to Cloudflare
wrangler secret put REFRESH_TOKEN
# ... enter your refresh_token from above here

wrangler secret put CLIENT_SECRET
# ... enter your client_secret from above here

Building and deployment

You can preview the worker with wrangler:

wrangler preview

After making sure everything is ok, you can publish your worker with:

wrangler publish

You can also create a GitHub Actions for auto publishing your worker on push. See main.yml.

For custom domains, refer to How to Setup Cloudflare Workers on a Custom Domain.

Customisations

  • You can (AND SHOULD) change the intro on the default landing page here: src/folderView.js. Write HTML directly.
  • You can (AND ALSO SHOULD) change the header of the site here: src/render/htmlWrapper.js.
  • Your custom styles are loaded from themes/spencer.css, change that according to your customizations. You will also need to change the commit HASH at src/render/htmlWrapper.js.
  • You can also customize Markdown CSS styles, PrismJS code highlight color schemes, etc.

🏵 onedrive-cf-index ©Spencer Woo. Released under the MIT License.

Authored and maintained by Spencer Woo.

@Portfolio · @Blog · @GitHub