Update Cloudflare R2 upload to use minimal permissions and add progress bar

- Removed requirement for Cloudflare API Token, Zone ID, and Worker Token from Upload Modal and R2Service.
- Simplified R2 configuration to require only Account ID, S3 Access Keys, and a user-provided Public Bucket URL.
- Added a read-only field in Upload Modal displaying the derived target bucket name (npub-based) for user reference.
- Implemented client-side torrent info hash calculation using `WebTorrent` (via `js/utils/torrentHash.js`) to generate magnet links before upload.
- Added a visual upload progress bar to the Upload Modal.
- Updated `js/r2.js` to ensure the Public Bucket URL always includes the `https://` protocol.
This commit is contained in:
google-labs-jules[bot] committed 2026-01-12 18:53:22 +00:00
1 parent 01d4335fda
commit 7dc2977cf2
5 files changed
+224 -350

No files matched your search

+34 -26
View File
@@ -89,7 +89,7 @@
</label>
</div>
<!-- Upload Progress (Hidden by default) -->
<!-- Upload Progress -->
<div id="upload-progress-container" class="space-y-2 hidden">
<div class="flex justify-between text-xs">
<span id="upload-status-text" class="text-text font-medium">Uploading...</span>
@@ -133,41 +133,49 @@
</p>
</div>
<!-- Target Bucket Display -->
<div class="space-y-1">
<label for="input-r2-bucket-name" class="text-xs font-medium text-text">Target Bucket Name (Required)</label>
<div class="flex gap-2">
<input
id="input-r2-bucket-name"
type="text"
class="input text-xs bg-surface-alt text-muted cursor-text select-all"
readonly
placeholder="Log in to see your bucket name"
/>
<button
type="button"
id="btn-copy-bucket"
class="btn-ghost px-2 text-xs border border-border/30"
aria-label="Copy bucket name"
>
Copy
</button>
</div>
<p class="text-[10px] text-muted">Create a bucket with this exact name in Cloudflare R2.</p>
</div>
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-1">
<label for="input-r2-account" class="text-xs font-medium text-text">Account ID</label>
<input id="input-r2-account" type="text" class="input text-xs" placeholder="xxxxxxxx..." />
</div>
<div class="space-y-1">
<label for="input-r2-domain" class="text-xs font-medium text-text">Public Bucket URL</label>
<input id="input-r2-domain" type="text" class="input text-xs" placeholder="https://pub-xxx.r2.dev" />
</div>
</div>
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-1">
<label for="input-r2-key" class="text-xs font-medium text-text">Access Key ID</label>
<input id="input-r2-key" type="text" class="input text-xs" placeholder="AKIA..." />
</div>
<div class="space-y-1">
<label for="input-r2-secret" class="text-xs font-medium text-text">Secret Access Key</label>
<input id="input-r2-secret" type="password" class="input text-xs" />
</div>
</div>
<div class="space-y-1">
<label for="input-r2-secret" class="text-xs font-medium text-text">Secret Access Key</label>
<input id="input-r2-secret" type="password" class="input text-xs" />
</div>
<!-- R2 Advanced -->
<div class="space-y-2 pt-2">
<button type="button" id="btn-r2-advanced" class="text-xs text-muted-strong hover:text-text underline">Advanced R2 Options</button>
<div id="section-r2-advanced" class="hidden space-y-3 pt-2">
<div class="space-y-1">
<label for="input-r2-token" class="text-xs font-medium text-text">API Token (Optional)</label>
<input id="input-r2-token" type="password" class="input text-xs" placeholder="Worker Token..." />
</div>
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-1">
<label for="input-r2-zone" class="text-xs font-medium text-text">Zone ID</label>
<input id="input-r2-zone" type="text" class="input text-xs" />
</div>
<div class="space-y-1">
<label for="input-r2-domain" class="text-xs font-medium text-text">Base Domain</label>
<input id="input-r2-domain" type="text" class="input text-xs" placeholder="cdn.example.com" />
</div>
</div>
</div>
</div>
<div class="flex justify-end gap-2 pt-2">
<button type="button" id="btn-save-settings" class="btn btn-sm">Save Credentials</button>