Spaces:

albumup
/

file

Sleeping

App Files Files Community

albumup commited on Jan 18, 2025

Commit

2f3eee0

verified ·

1 Parent(s): 0f7a742

Update app.py

Browse files

Files changed (1) hide show

app.py +86 -81

app.py CHANGED Viewed

@@ -14,14 +14,13 @@ app = FastAPI()
 DENO_API_URL = "https://dataerrr99.deno.dev"
-async def save_album_to_db(album_name: str, album_id: str, files: list):
     async with httpx.AsyncClient() as client:
         try:
             response = await client.post(DENO_API_URL, json={
                 "albumName": album_name,
                 "albumLink": album_id,
-                "files": files,
-                "createdAt": datetime.now().isoformat()
             })
             return response.json()
         except Exception as e:
@@ -37,6 +36,15 @@ async def get_albums_from_db():
             print(f"Error fetching from DB: {str(e)}")
             return {"data": []}
 HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
@@ -45,41 +53,42 @@ HTML_CONTENT = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>File Upload</title>
     <style>
-        .container {
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
-        }
-        .upload-form {
             margin-bottom: 20px;
             padding: 20px;
             border: 1px solid #ddd;
             border-radius: 5px;
-        }
-        .preview {
             margin-top: 20px;
-        }
-        .search-form {
             margin: 20px 0;
             padding: 20px;
             border: 1px solid #ddd;
             border-radius: 5px;
-        }
-        .album-list {
             margin-top: 20px;
-        }
-        .album-item {
             padding: 10px;
             border: 1px solid #ddd;
             margin-bottom: 10px;
             border-radius: 5px;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>File Upload & Album Management</h1>
         <div class="search-form">
             <h2>Search Albums</h2>
             <form action="/search" method="get">
@@ -88,6 +97,7 @@ HTML_CONTENT = """
             </form>
         </div>
         <div class="upload-form">
             <h2>Single File Upload</h2>
             <form action="/upload" method="post" enctype="multipart/form-data">
@@ -96,6 +106,7 @@ HTML_CONTENT = """
             </form>
         </div>
         <div class="upload-form">
             <h2>Create Album</h2>
             <form action="/album/create" method="post" enctype="multipart/form-data">
@@ -117,30 +128,30 @@ ALBUM_VIEW_HTML = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Album View - {album_name}</title>
     <style>
-        .container {
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
-        }
-        .file-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 20px;
-        }
-        .file-item {
             border: 1px solid #ddd;
             padding: 10px;
             text-align: center;
             border-radius: 5px;
-        }
-        .download-all {
             margin: 20px 0;
-        }
-        .back-link {
             margin-bottom: 20px;
             display: block;
-        }
-        .button {
             display: inline-block;
             padding: 8px 16px;
             background-color: #007bff;
@@ -148,11 +159,11 @@ ALBUM_VIEW_HTML = """
             text-decoration: none;
             border-radius: 4px;
             margin: 5px;
-        }
-        .button:hover {
             background-color: #0056b3;
-        }
-        .preview-container {
             margin-bottom: 10px;
             max-width: 100%;
             height: 200px;
@@ -162,18 +173,18 @@ ALBUM_VIEW_HTML = """
             justify-content: center;
             background-color: #f8f9fa;
             border-radius: 4px;
-        }
-        .preview-container img {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
-        }
-        .preview-container video {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
-        }
-        .modal {
             display: none;
             position: fixed;
             z-index: 1000;
@@ -183,15 +194,15 @@ ALBUM_VIEW_HTML = """
             height: 100%;
             background-color: rgba(0,0,0,0.9);
             overflow: auto;
-        }
-        .modal-content {
             margin: auto;
             display: block;
             max-width: 90%;
             max-height: 90vh;
             margin-top: 50px;
-        }
-        .close {
             position: absolute;
             right: 35px;
             top: 15px;
@@ -199,39 +210,39 @@ ALBUM_VIEW_HTML = """
             font-size: 40px;
             font-weight: bold;
             cursor: pointer;
-        }
     </style>
     <script>
-        function openModal(url) {
             const modal = document.getElementById('previewModal');
             const modalContent = document.getElementById('modalContent');
             const contentType = getContentType(url);
-            if (contentType === 'image') {
-                modalContent.innerHTML = `<img src="${url}" style="max-width:100%;max-height:90vh;">`;
-            } else if (contentType === 'video') {
                 modalContent.innerHTML = `<video controls style="max-width:100%;max-height:90vh;">
-                    <source src="${url}" type="video/mp4">
                     Your browser does not support the video tag.
                 </video>`;
-            }
             modal.style.display = 'block';
-        }
-        function closeModal() {
             const modal = document.getElementById('previewModal');
             modal.style.display = 'none';
             const modalContent = document.getElementById('modalContent');
             modalContent.innerHTML = '';
-        }
-        function getContentType(url) {
             const ext = url.split('.').pop().toLowerCase();
             if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return 'image';
             if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video';
             return 'other';
-        }
     </script>
 </head>
 <body>
@@ -246,6 +257,7 @@ ALBUM_VIEW_HTML = """
         </div>
     </div>
     <div id="previewModal" class="modal" onclick="closeModal()">
         <span class="close">&times;</span>
         <div id="modalContent" class="modal-content">
@@ -263,22 +275,22 @@ SEARCH_RESULTS_HTML = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Search Results</title>
     <style>
-        .container {
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
-        }
-        .album-item {
             border: 1px solid #ddd;
             padding: 15px;
             margin-bottom: 15px;
             border-radius: 5px;
-        }
-        .back-link {
             margin-bottom: 20px;
             display: block;
-        }
-        .button {
             display: inline-block;
             padding: 8px 16px;
             background-color: #007bff;
@@ -286,10 +298,10 @@ SEARCH_RESULTS_HTML = """
             text-decoration: none;
             border-radius: 4px;
             margin: 5px;
-        }
-        .button:hover {
             background-color: #0056b3;
-        }
     </style>
 </head>
 <body>
@@ -320,10 +332,12 @@ async def index():
 @app.get("/search", response_class=HTMLResponse)
 async def search_albums(query: str = ""):
-    db_data = await get_albums_from_db()
     matching_albums = [
-        album for album in db_data['data']
-        if query.lower() in album['name'].lower()
     ]
     results_html = ""
@@ -332,6 +346,7 @@ async def search_albums(query: str = ""):
         <div class="album-item">
             <h3>{album['name']}</h3>
             <p>Created: {album['createdAt']}</p>
             <a href="/album/{album['albumLink']}" class="button">View Album</a>
         </div>
         """
@@ -368,25 +383,21 @@ async def create_album(
                     'uploaded_at': datetime.now().isoformat()
                 })
     await save_album_to_db(album_name, album_id, album_files)
     base_url = str(request.base_url).rstrip('/')
     return RedirectResponse(url=f"{base_url}/album/{album_id}", status_code=303)
 @app.get("/album/{album_id}", response_class=HTMLResponse)
 async def view_album(album_id: str):
-    db_data = await get_albums_from_db()
-    album = None
-    for a in db_data['data']:
-        if a['albumLink'] == album_id:
-            album = a
-            break
     if not album:
         return "Album not found", 404
     file_list_html = ""
-    for file in album.get('files', []):
         file_url = f"/upload/{file['path']}"
         file_type = get_file_type(file['filename'])
@@ -430,13 +441,7 @@ async def view_album(album_id: str):
 @app.get("/album/{album_id}/download")
 async def download_album(album_id: str):
-    db_data = await get_albums_from_db()
-    album = None
-    for a in db_data['data']:
-        if a['albumLink'] == album_id:
-            album = a
-            break
     if not album:
         return {"error": "Album not found"}, 404

 DENO_API_URL = "https://dataerrr99.deno.dev"
+async def save_album_to_db(album_name: str, album_id: str, files: List[dict]):
     async with httpx.AsyncClient() as client:
         try:
             response = await client.post(DENO_API_URL, json={
                 "albumName": album_name,
                 "albumLink": album_id,
+                "files": files
             })
             return response.json()
         except Exception as e:
             print(f"Error fetching from DB: {str(e)}")
             return {"data": []}
+async def get_album_from_db(album_id: str):
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.get(f"{DENO_API_URL}/{album_id}")
+            return response.json()
+        except Exception as e:
+            print(f"Error fetching album from DB: {str(e)}")
+            return None
 HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>File Upload</title>
     <style>
+        .container {{
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
+        }}
+        .upload-form {{
             margin-bottom: 20px;
             padding: 20px;
             border: 1px solid #ddd;
             border-radius: 5px;
+        }}
+        .preview {{
             margin-top: 20px;
+        }}
+        .search-form {{
             margin: 20px 0;
             padding: 20px;
             border: 1px solid #ddd;
             border-radius: 5px;
+        }}
+        .album-list {{
             margin-top: 20px;
+        }}
+        .album-item {{
             padding: 10px;
             border: 1px solid #ddd;
             margin-bottom: 10px;
             border-radius: 5px;
+        }}
     </style>
 </head>
 <body>
     <div class="container">
         <h1>File Upload & Album Management</h1>
+        <!-- Search Albums -->
         <div class="search-form">
             <h2>Search Albums</h2>
             <form action="/search" method="get">
             </form>
         </div>
+        <!-- Single File Upload -->
         <div class="upload-form">
             <h2>Single File Upload</h2>
             <form action="/upload" method="post" enctype="multipart/form-data">
             </form>
         </div>
+        <!-- Album Upload -->
         <div class="upload-form">
             <h2>Create Album</h2>
             <form action="/album/create" method="post" enctype="multipart/form-data">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Album View - {album_name}</title>
     <style>
+        .container {{
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
+        }}
+        .file-grid {{
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 20px;
+        }}
+        .file-item {{
             border: 1px solid #ddd;
             padding: 10px;
             text-align: center;
             border-radius: 5px;
+        }}
+        .download-all {{
             margin: 20px 0;
+        }}
+        .back-link {{
             margin-bottom: 20px;
             display: block;
+        }}
+        .button {{
             display: inline-block;
             padding: 8px 16px;
             background-color: #007bff;
             text-decoration: none;
             border-radius: 4px;
             margin: 5px;
+        }}
+        .button:hover {{
             background-color: #0056b3;
+        }}
+        .preview-container {{
             margin-bottom: 10px;
             max-width: 100%;
             height: 200px;
             justify-content: center;
             background-color: #f8f9fa;
             border-radius: 4px;
+        }}
+        .preview-container img {{
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
+        }}
+        .preview-container video {{
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
+        }}
+        .modal {{
             display: none;
             position: fixed;
             z-index: 1000;
             height: 100%;
             background-color: rgba(0,0,0,0.9);
             overflow: auto;
+        }}
+        .modal-content {{
             margin: auto;
             display: block;
             max-width: 90%;
             max-height: 90vh;
             margin-top: 50px;
+        }}
+        .close {{
             position: absolute;
             right: 35px;
             top: 15px;
             font-size: 40px;
             font-weight: bold;
             cursor: pointer;
+        }}
     </style>
     <script>
+        function openModal(url) {{
             const modal = document.getElementById('previewModal');
             const modalContent = document.getElementById('modalContent');
             const contentType = getContentType(url);
+            if (contentType === 'image') {{
+                modalContent.innerHTML = `<img src="${{url}}" style="max-width:100%;max-height:90vh;">`;
+            }} else if (contentType === 'video') {{
                 modalContent.innerHTML = `<video controls style="max-width:100%;max-height:90vh;">
+                    <source src="${{url}}" type="video/mp4">
                     Your browser does not support the video tag.
                 </video>`;
+            }}
             modal.style.display = 'block';
+        }}
+        function closeModal() {{
             const modal = document.getElementById('previewModal');
             modal.style.display = 'none';
             const modalContent = document.getElementById('modalContent');
             modalContent.innerHTML = '';
+        }}
+        function getContentType(url) {{
             const ext = url.split('.').pop().toLowerCase();
             if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return 'image';
             if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video';
             return 'other';
+        }}
     </script>
 </head>
 <body>
         </div>
     </div>
+    <!-- Modal for previews -->
     <div id="previewModal" class="modal" onclick="closeModal()">
         <span class="close">&times;</span>
         <div id="modalContent" class="modal-content">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Search Results</title>
     <style>
+        .container {{
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
+        }}
+        .album-item {{
             border: 1px solid #ddd;
             padding: 15px;
             margin-bottom: 15px;
             border-radius: 5px;
+        }}
+        .back-link {{
             margin-bottom: 20px;
             display: block;
+        }}
+        .button {{
             display: inline-block;
             padding: 8px 16px;
             background-color: #007bff;
             text-decoration: none;
             border-radius: 4px;
             margin: 5px;
+        }}
+        .button:hover {{
             background-color: #0056b3;
+        }}
     </style>
 </head>
 <body>
 @app.get("/search", response_class=HTMLResponse)
 async def search_albums(query: str = ""):
+    query = query.lower()
+    db_albums = await get_albums_from_db()
     matching_albums = [
+        album for album in db_albums['data']
+        if query in album['name'].lower()
     ]
     results_html = ""
         <div class="album-item">
             <h3>{album['name']}</h3>
             <p>Created: {album['createdAt']}</p>
+            <p>Files: {len(album['files'])}</p>
             <a href="/album/{album['albumLink']}" class="button">View Album</a>
         </div>
         """
                     'uploaded_at': datetime.now().isoformat()
                 })
+    # Save to Deno KV database
     await save_album_to_db(album_name, album_id, album_files)
     base_url = str(request.base_url).rstrip('/')
     return RedirectResponse(url=f"{base_url}/album/{album_id}", status_code=303)
 @app.get("/album/{album_id}", response_class=HTMLResponse)
 async def view_album(album_id: str):
+    album = await get_album_from_db(album_id)
     if not album:
         return "Album not found", 404
     file_list_html = ""
+    for file in album['files']:
         file_url = f"/upload/{file['path']}"
         file_type = get_file_type(file['filename'])
 @app.get("/album/{album_id}/download")
 async def download_album(album_id: str):
+    album = await get_album_from_db(album_id)
     if not album:
         return {"error": "Album not found"}, 404