onedrive-cf-index

Yet another OneDrive index, powered by CloudFlare Workers.

---

This project is greatly inspired by: onedrive-index-cloudflare-worker.

Demo

Live demo at Spencer's OneDrive Index.

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。）

🗃️ 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! Online token generation tool taken from the generous: https://heymind.github.io/tools/microsoft-graph-api-auth. We will be using this in the following steps.

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 https://heymind.github.io/tools/microsoft-graph-api-auth (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:

   1. Open https://heymind.github.io/tools/microsoft-graph-api-auth.

   2. At 4. Authorize for code, input our client_id, and hit AUTHORIZE.

      

      Log into your Microsoft account and authorize our app, if you are returned with a code like what is shown below, then your authorization process is successful:

      

      Hit OK, and proceed on to the next stage.

   3. At 5. Exchange Access Token, the Code should already be inputted into the correct place for us, we only need to input our client_secret:

      

      Click GET TOKEN. If there is an error like error: "invalid_request", then please resolve to the solution suggested in the pinned issue #13. Otherwise, collect your access_token and if you need, use the final Refresh Token to collect your refresh_token as well.

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: Defaults to https://heymind.github.io/tools/microsoft-graph-api-auth.
• base: Defaults to /Public.

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

Preparations

Fork or directly clone this repository. Install dependencies, 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.

For Chinese 21Vianet OneDrive users. OneDrive 世纪互联用户：将 useCnEndpoints 设置（修改）为 true。

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