70 const menuRef = useRef(null);
71 const isPublic = blob.key.startsWith("__public/");
72 const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
73
74 useEffect(() => {
234 setLoading(true);
235 try {
236 const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237 const data = await response.json();
238 setBlobs(data);
261 setBlobContentLoading(true);
262 try {
263 const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264 const content = await response.text();
265 setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
275 const handleSave = async () => {
276 try {
277 await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278 method: "PUT",
279 body: editContent,
287 const handleDelete = async (key) => {
288 try {
289 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290 setBlobs(blobs.filter(b => b.key !== key));
291 if (selectedBlob && selectedBlob.key === key) {
304 const key = `${searchPrefix}${file.name}`;
305 formData.append("key", encodeKey(key));
306 await fetch("/api/blob", { method: "POST", body: formData });
307 const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308 setBlobs([newBlob, ...blobs]);
326 try {
327 const fullKey = `${searchPrefix}${key}`;
328 await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329 method: "PUT",
330 body: "",
341 const handleDownload = async (key) => {
342 try {
343 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344 const blob = await response.blob();
345 const url = window.URL.createObjectURL(blob);
360 if (newKey && newKey !== oldKey) {
361 try {
362 const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363 const content = await response.blob();
364 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365 method: "PUT",
366 body: content,
367 });
368 await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369 setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370 if (selectedBlob && selectedBlob.key === oldKey) {
380 const newKey = `__public/${key}`;
381 try {
382 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383 const content = await response.blob();
384 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385 method: "PUT",
386 body: content,
387 });
388 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389 setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390 if (selectedBlob && selectedBlob.key === key) {
399 const newKey = key.slice(9); // Remove "__public/" prefix
400 try {
401 const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402 const content = await response.blob();
403 await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404 method: "PUT",
405 body: content,
406 });
407 await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408 setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409 if (selectedBlob && selectedBlob.key === key) {
554 onClick={() =>
555 copyToClipboard(
556 `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
557 )}
558 className="text-blue-400 hover:text-blue-300 text-sm"
577 >
578 <img
579 src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
580 alt="Blob content"
581 className="max-w-full h-auto"