73 const menuRef = useRef(null);
74 const isPublic = blob.key.startsWith("__public/");
75 const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
76
77 useEffect(() => {
237 setLoading(true);
238 try {
239 const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
240 const data = await response.json();
241 setBlobs(data);
264 setBlobContentLoading(true);
265 try {
266 const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
267 const content = await response.text();
268 setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
278 const handleSave = async () => {
279 try {
280 await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
281 method: "PUT",
282 body: editContent,
290 const handleDelete = async (key) => {
291 try {
292 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
293 setBlobs(blobs.filter(b => b.key !== key));
294 if (selectedBlob && selectedBlob.key === key) {
307 const key = `${searchPrefix}${file.name}`;
308 formData.append("key", encodeKey(key));
309 await fetch("/api/blob", { method: "POST", body: formData });
310 const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
311 setBlobs([newBlob, ...blobs]);
329 try {
330 const fullKey = `${searchPrefix}${key}`;
331 await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
332 method: "PUT",
333 body: "",
344 const handleDownload = async (key) => {
345 try {
346 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
347 const blob = await response.blob();
348 const url = window.URL.createObjectURL(blob);
363 if (newKey && newKey !== oldKey) {
364 try {
365 const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
366 const content = await response.blob();
367 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
368 method: "PUT",
369 body: content,
370 });
371 await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
372 setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
373 if (selectedBlob && selectedBlob.key === oldKey) {
383 const newKey = `__public/${key}`;
384 try {
385 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
386 const content = await response.blob();
387 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
388 method: "PUT",
389 body: content,
390 });
391 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
392 setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
393 if (selectedBlob && selectedBlob.key === key) {
402 const newKey = key.slice(9); // Remove "__public/" prefix
403 try {
404 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
405 const content = await response.blob();
406 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
407 method: "PUT",
408 body: content,
409 });
410 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
411 setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
412 if (selectedBlob && selectedBlob.key === key) {
557 onClick={() =>
558 copyToClipboard(
559 `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
560 )}
561 className="text-blue-400 hover:text-blue-300 text-sm"
580 >
581 <img
582 src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
583 alt="Blob content"
584 className="max-w-full h-auto"
660
661// Public route without authentication
662app.get("/api/public/:id", async (c) => {
663 const key = `__public/${c.req.param("id")}`;
664 const { blob } = await import("https://esm.town/v/std/blob");
766};
767
768app.get("/api/blobs", checkAuth, async (c) => {
769 const prefix = c.req.query("prefix") || "";
770 const limit = parseInt(c.req.query("limit") || "20", 10);
775});
776
777app.get("/api/blob", checkAuth, async (c) => {
778 const key = c.req.query("key");
779 if (!key) return c.text("Missing key parameter", 400);
783});
784
785app.put("/api/blob", checkAuth, async (c) => {
786 const key = c.req.query("key");
787 if (!key) return c.text("Missing key parameter", 400);
792});
793
794app.delete("/api/blob", checkAuth, async (c) => {
795 const key = c.req.query("key");
796 if (!key) return c.text("Missing key parameter", 400);
800});
801
802app.post("/api/blob", checkAuth, async (c) => {
803 const { file, key } = await c.req.parseBody();
804 if (!file || !key) return c.text("Missing file or key", 400);
