g4brym / r2-explorer Goto Github PK
View Code? Open in Web Editor NEWA Google Drive Interface for your Cloudflare R2 Buckets!
Home Page: https://r2explorer.dev
License: MIT License
A Google Drive Interface for your Cloudflare R2 Buckets!
Home Page: https://r2explorer.dev
License: MIT License
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.
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?
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
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
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.
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?
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?
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.
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!
Following the instructions; when running wrangler publish
it returns an error due to the missing field 'type'
❯ wrangler publish
Error: missing field `type`
Allow read only for public.
Require auth for upload/delete etc.
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.
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
Log Push generates files like
20230715T025607Z_20230715T025637Z_9d3b03d0.log.gz
it contains JSON data. Allow reading in Explorer so can easily check logs.
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
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!
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.
I changed the index.ts file but after using the wrangler publish again it still didnt change it to being writable.
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: "", … }
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.
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
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
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
}
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)
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
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
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:
Feature parity:
Thank you, I really liked your work. It would be nice if we could multiselect files and then delete them at once.
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
Possible enhancement to simulate "share" functionality of Google Drive
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`
...
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.
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
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:
This is so great!! Can't wait to see what the next update brings.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.