g4brym/r2-explorer

A Google Drive Interface for your Cloudflare R2 Buckets!

Read this in other languages: Español, Português, Français

R2-Explorer

A Google Drive Interface for your Cloudflare R2 Buckets!

This project is deployed/self-hosted in your own Cloudflare Account as a Worker, and no credential/token is required to start using it.

---

Documentation: https://r2explorer.dev

Live Demo: https://demo.r2explorer.dev

---

Features

• PWA support (install this app on your phone)
• Email Explorer (using Cloudflare Email Routing)
• Basic Auth
• Cloudflare Access Authentication
• Very quick bucket/folder navigation
• pdf, image, txt, markdown, csv, etc in-browser preview
• Drag-and-Drop upload
• Multiple files and folder uploads
• Create folders
• Upload/Rename/Download/Delete files
• Right click in file for extra options
• Multipart upload for big files
• File editing

Getting Started

Run this command to get an example project setup

npm create r2-explorer@latest

Upgrading your installation

In order to update to the latest version you just need to install the latest r2-explorer package from npm and re-deploy your application

npm install r2-explorer@latest --save

wrangler publish

TODO

• allow bucket names with spaces
• Search files
• Rename folders
• Image thumbnail's ?
• Object detection on images using workers-ai ?
• Tooltip when hovering a file with absolute time in "x days time ago" format
• support for responding to emails
• More advanced file editing with more validations per file type

Known issues

• Email inline images and assets don't load when using basic auth

r2-explorer's Issues

[Feature request] Automatic deployment with CF Workers link

It would be amazing to have automatic deployment URLs using CloudFlare Workers, e.g. https://deploy.workers.cloudflare.com/?url=https://github.com/G4brym/R2-Explorer.

I think the "secrets" should have specific names e.g.: CF_API_TOKEN and CF_ACCOUNT_ID

Reference project: https://github.com/eidam/cf-workers-status-page?tab=readme-ov-file#getting-started or https://deploy.workers.cloudflare.com/

Pull request proposal (single button): #53

TypeError: explorer.handle is not a function

Hi, I follow the README to publish worker, but I got this error.
Is there a further manual or instruction to find out what's wrong?

note: wrangler 2.6.1
env: gitpod

Support Presigned URLs

Possible enhancement to simulate "share" functionality of Google Drive

https://developers.cloudflare.com/r2/api/s3/presigned-urls/

[Bug] Dashboard V2 issues

Hey everyone, I've just merged the new dashboard v2 into the main branch, this means anyone using the default dashboardUrl can now test and use the new version without having to do anything.

To use the new version, just navigate to /v2.0/ path in your instance like this https://demo.r2explorer.dev/v2.0/.

This Github Issue is meant to centralize all problems related to the new dashboard, there are definitely a lot of issue and there isn't yet feature parity, but that will hopefully get solved in the coming weeks.

Bug:

• Cannot download files
• Logo is not loading properly

Feature parity:

• Cannot open emails
• Cannot rename files

Migrated from 0.x to 1.x and dashboard not loading.

I read in the new docs that the dashboard has been bundled separately as a pages project however I'm not sure how to deploy the pages project as it isn't showing up in my pages dashboard nor is the worker route working.

[Feature Request] Adding a step to documentation instructions

In 'Authenticating with Cloudflare Access,' (https://r2explorer.dev/getting-started/security/#authenticating-with-cloudflare-access) after updating src/index.ts and performing 'wrangler deploy,' it would be a good idea to configure access within Zero Trust > Access > Applications > Add an application. You can set up access, perhaps by subdomain pointing to the Worker (in my case, under Triggers within the Worker in the Overview web on Cloudflare, I added Custom Domains to 'drive.example.com'), and whitelist the CF Access email. By doing this, it allowed me to access it, and the email automatically appears in the top right corner of the R2 Explorer. It was great.

Using dashboardUrl does not function properly

I followed the instructions and deployed packages/dashboard in my cloudflare pages.
The initial page loads fine, but navigating is impossible as the routing doesn't function properly when dashboardUrl is specified,
i.e. requests like mysub.mydomain.com/storage/bucket-name return 404

[Feature Request] Dark mode

R2 Explorer works very well, congratulations. It would be amazing if it could have a native way in the frontend to switch to dark mode to be able to use the system on a daily basis and not have problems with the eyes.

unable to download

deployed with custom domain, able to upload and see the files, but downloading will return 401 status in the worker log

have tried turning on/off cors, readonly, and accessing from the original worker.dev url

Data not loading in the dashboard

I've migrated from 4 months old version to the latest and my data is not loading. I don't know why. I lost the project files, so i just created new project with the same name and deployed it. I want to add these two buckets:

So i added this into the wrangler.toml

[[r2_buckets]]
binding = 'p33t-cdni'
bucket_name = 'p33t-cdni'
preview_bucket_name = 'p33t-cdni/'

[[r2_buckets]]
binding = 'verse'
bucket_name = 'verse'
preview_bucket_name = 'verse/'

i don't know what to put in the preview_bucket_name, i tried the same like bucket_name and / but nothing is showing any data. When i upload anything to it, it uploads but is not showing in the exporer, in the cloudflare dashboard, it creates a folder / and uploads the file there. I'm also receiving a http 400 error:

Uncaught (in promise) 
Object { message: "Request failed with status code 400", name: "AxiosError", code: "ERR_BAD_REQUEST", config: {…}, request: XMLHttpRequest, response: {…}, stack: "" }
​
code: "ERR_BAD_REQUEST"
​
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​​
adapter: function exports(e)
​​
data: undefined
​​
env: Object { FormData: null }
​​
headers: Object { Accept: "application/json, text/plain, */*", Authorization: "Basic (CENSORED)" }
​​
maxBodyLength: -1
​​
maxContentLength: -1
​​
method: "get"
​​
params: Object { delimiter: "/", prefix: "", cursor: null }
​​
timeout: 0
​​
transformRequest: Array [ transformRequest(e, t) ]
​​
transformResponse: Array [ transformResponse(e) ]
​​
transitional: Object { silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false }
​​
url: "/api/buckets/verse?include=customMetadata&include=httpMetadata"
​​
validateStatus: function validateStatus(e)
​​
xsrfCookieName: "XSRF-TOKEN"
​​
xsrfHeaderName: "X-XSRF-TOKEN"
​​
<prototype>: Object { … }
​
message: "Request failed with status code 400"
​
name: "AxiosError"
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
​
response: Object { data: {…}, status: 400, statusText: "Bad Request", … }
​
stack: ""
​
<prototype>: Object { constructor: i(e, t, r, n, i), toJSON: toJSON(), stack: "", … }

[Feature Request] Deploying from GitHub

This project is amazing; I've been using it, and it works very well. Unfortunately, having Wrangler locally on the computer and the local module creates a dependency on working offline and deploying with Wrangler to the Cloudflare Worker for every change to see updates. It would be great if there was a way to fork the project and have an automatic deploy button to Cloudflare (example: https://github.com/eidam/cf-workers-status-page#deploy-with-cloudflare-deploy-button), where the Github Action is generated automatically (with private API keys configured as Action variables) to upload the deploy to Cloudflare.

Trying to enable access but it throws an error when trying to publish.

import { R2Explorer } from 'r2-explorer';

const explorer = R2Explorer({ readonly: false, cfAccessTeamName: sohamjain })

export default {
  async fetch(request, env, context) {
    return explorer(request, env, context)
  }
};

This is my index.js file and my team name is sohamjain as going to sohamjain.cloudflareaccess.com works but when doing wranger publish,

aught ReferenceError: sohamjain is not defined
    at index.js:732:88
   [code: 10021]

this is the error i get.

uploadPart: The specified multipart upload does not exist. (10024)

Hi @G4brym ,
I meet this error when trying to upload >100MB file. partUpload.ts#L37. I found this error on S3 API, so I'm not sure it's r2-explorer's bug or S3's bug.
It would be great if you had time to have a look!

Note: I got this log by writing a logger to send a message to telegram bot. The request on UI returns nothing with status code 400.

Error: uploadPart: The specified multipart upload does not exist. (10024)
    at async g2.handle (index.js:13056:14)
    at async g2.execute (index.js:12959:16)
    at async handle (index.js:9027:30)
    at async handle (index.js:9027:30)
    at async Object.fetch (index.js:13218:14)

Fix folder upload with inner folders - breaks uploading to the root folder

this commit
519ebd4
seems to add "/" to every file uploaded, so basically it's impossible to upload to the root folder of a bucket.
What's more "/" doesn't seem to be a super valid folder name so you can't see the uploaded files in r2explorer either

[Feature Request] Require auth on write operations

Allow read only for public.
Require auth for upload/delete etc.

[Feature Request] Add grid preview of files and Add basic auth data from Environment Variables

As the title says, can we preview these files as grid?
and, adding environment variables from Github(Not with Wargler)?

Edit certain aspects in web page

I was wondering if it was possible for me to edit certain parts of the web page like the title, favicon or icon? If so, what file would I need to edit?

not a bug, just a few feature requests...

This is an incredible project! It's so seamless and easy to use; it's really great. I'm a Cloudflare employee and talk about this (for personal use) regularly as a great example of building real-world useful applications in workers and R2.

I currently use it to organize photos for personal use. I'd love to see a few things incorporated:

• thumbnail viewer for images with the ability to resize the thumbnails on the fly
• The ability to sort files by metadata; creation date, user supplied tags, etc.

This is so great!! Can't wait to see what the next update brings.

Keep getting a timed out error when trying to deploy my project.

I try to deploy my project, and I keep getting the message "Waiting for deployment to become available", and after a few minutes I keep timing out.

Cloudflare also spits out this error:

{
"outcome": "exception",
"scriptName": "PUT-PROJECT-NAME-HERE",
"diagnosticsChannelEvents": [],
"exceptions": [
{
"name": "TypeError",
"message": "o3.replace is not a function",
"timestamp": 1705065757977
}
],

If someone could help, that would be greatly appreciated!

Error: missing field `type`

Following the instructions; when running wrangler publish it returns an error due to the missing field 'type'

❯ wrangler publish  
Error: missing field `type`

CRITICAL: DON'T USE Leaking user credentials to `https://api.r2explorer.dev/api/releases/latest/`

There is no reason for this client to pass basic auth creds to check the latest version for the frontend.

If the creator is a bad actor, then they will have the basic auth credentials of any user that logs in.

I see a request on the front end that carries basic auth credentials to: https://api.r2explorer.dev/api/releases/latest/.

Please don't use until this issue is fixed.

[Feature Request] Bulk delete

Thank you, I really liked your work. It would be nice if we could multiselect files and then delete them at once.

Add cloudflare access authentication to a specific folder.

Say I have the file explorer on storage.example.com and I want that to be public access but then I want a folder on R2 to be behind access in the file explorer. I tried adding a rule with the URL given when navigating to that folder but it didn't work. Any ideas?

[Bug] account_id in deploy via GitHub to CF Workers

When trying to deploy directly from Github to Cloudflare Workers, When using a Cloudflare account with multiple accounts, it is not defined which account to use, the error appears:

[ERROR] More than one account available but unable to select one in non-interactive mode.
  
    Please set the appropriate `account_id` in your `wrangler.toml` file.
    Available accounts are (`<name>`: `<account_id>`):
      `EXAMPLE-NAME1`: `EXAMPLE-ID1`
      `EXAMPLE-NAME2`: `EXAMPLE-ID2`
      `EXAMPLE-NAME3: `EXAMPLE-ID3`
      ...

[feature request] Copy direct link to the image

I use r2-explorer to upload my files and then i get the direct link so i can put it on websites i create. It would be very helpful to get the option to copy the direct link.

If i want to do this, i need to upload it using r2-explorer and then either go to cloudflare dash and find the link or just add the file name after my cdn domain

[Feature Request] Send emails

It would be interesting to have the ability not only to receive emails but also to send them. This could possibly be done by using Cloudflare's Worker directly (documentation linked at the end of this issue) or with MailChannels as the sender.

Documentation for sending emails with Cloudflare's Worker: Cloudflare Email Workers Documentation

Worker/bucket Access Control

I hav the r2-explorer all configured and working properly. however I want to set up access control allow user1 to have access to 'bucket1', but not have access to 'bucket2'. Additionally, user2 has access to 'bucket2', but not 'bucket1'. How might I go about doing this?

Secondly, I want to only be able access my worker page through Cloudflare access portal and not publicly.

How to disable read only?

I changed the index.ts file but after using the wrangler publish again it still didnt change it to being writable.

error publish cloudflare worker

i am trying to publish to worker but getting error:
Built successfully, built project size is 655 KiB. Error: Something went wrong with the request to Cloudflare... No event handlers were registered. This script does nothing. [API code: 10021]

`Upload Folders` works differently

When I upload folder B from the /bucket/A, the path /bucket/A/B will be created, but the files in folder B will be in the A path and there will be nothing in /bucket/A/B.

I haven't tested this on other environments yet,
I'm on MacOS 13.5.1 (ARM), using chrome 116.0.5845.179

[Suggestion] Avoid Including Copyrighted Content in Demo

To avoid issues with the R2 Explorer system, I suggest that it would be a good idea not to have copyrighted files with public access. Below, I share examples of such files:
https://demo.r2explorer.dev/storage/example-1/IA==/SW5zdGFudCBDcnVzaCB2aWRlb2NsaXAubXA0
https://demo.r2explorer.dev/storage/example-1/IA==/R2lvcmdpbyBieSBNb3JvZGVyLm1wMw==

ou can use royalty-free content from the website pexels.com

[Feature Request] Be able to download a folder that has multiple files

I have many folders on my R2 that have multiple files.
An issue with trying to download these files is that I have to download them 1 by 1.

Is there any way a feature could be added where a folder can be downloaded?

Thank you!

Dashboard V2 - Not able to upload image or pdf files

Hello, and first of all, thank you for this wonderful project.

I'm having the same issue with the uploads (tested with upload and drag&drop). I'm having trouble uploading PDFs. I have tested a few of them with different sizes, 20Kb, 500Kb, 3Mb, 5Mb and no luck.

When I do the same operation from the Cloudflare R2 console, I have no issue uploading any size PDF.

I have tested with a txt, mp4, rpm, csv and with no issues.

When doing further testing, I noticed the same problem with bmp, jpg, and png files. And in all these cases, when uploading from the Cloudflare R2 console, there is no problem.

Many thanks,
Ignacio

Read .log.gz Files and Show JSON

Log Push generates files like

20230715T025607Z_20230715T025637Z_9d3b03d0.log.gz

it contains JSON data. Allow reading in Explorer so can easily check logs.

Rendering with other React/Next/Vue or any other frontend page

I want to do the conditional rendering of the main dashboard with different Frontend frameworks like React.

E.x.

let x = 1;
{x ? <>Hello world</> : <>{R2Explorers dashboard}</> } something like this. is there any way i can do this?

HTTP Basic Auth broken

Seems like HTTP Basic Auth is broken on all my R2 Explorer instances this morning, in different Cloudflare accounts. Tried updating to last version, but I still have the error.

Error in console:

{
    "message": "Request failed with status code 401",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 401\n    at Ht (https://***/assets/axios.b579625d.js:3:1037)\n    at XMLHttpRequest.E (https://***/assets/axios.b579625d.js:3:4325)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "baseURL": "https://***/api",
        "method": "get",
        "url": "/server/config"
    },
    "code": "ERR_BAD_REQUEST",
    "status": 401
}