Spaces:

abhicodes
/

file-storage-system

Sleeping

App Files Files Community

abhicodes commited on May 21

Commit

2ace788

•

1 Parent(s): 950048d

Upload 6 files

Browse files

Files changed (6) hide show

Dockerfile +11 -0
app.py +79 -0
requirements.txt +6 -0
templates/files.html +38 -0
templates/index.html +140 -0
templates/upload.html +99 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,11 @@

+FROM python:3.11
+WORKDIR /code
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --upgrade -r requirements.txt
+COPY . /code
+CMD ["gunicorn", "app:app", "-b", "0.0.0.0:7860"]

app.py ADDED Viewed

	@@ -0,0 +1,79 @@

+from flask import Flask, request, redirect, url_for, send_file, render_template, flash
+from flask_cors import CORS
+from werkzeug.utils import secure_filename
+from pymongo.mongo_client import MongoClient
+from pymongo.server_api import ServerApi
+import urllib.parse
+import os
+import io
+app = Flask(__name__)
+app.secret_key = os.getenv('SECRET_KEY')
+CORS(app,resources={r"/*":{"origins":"*"}})
+username = urllib.parse.quote_plus(os.getenv('MONGO_USERNAME'))
+password = urllib.parse.quote_plus(os.getenv('MONGO_PASSWORD'))
+restUri = os.getenv('REST_URI')
+uri = f'mongodb+srv://{username}:{password}{restUri}'
+client = MongoClient(uri, server_api=ServerApi('1'))
+db = client['file_storage']
+files_collection = db['files']
+def allowed_file(filename):
+    return True
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/upload', methods=['GET', 'POST'])
+def upload_file():
+    if request.method == 'POST':
+        if 'file' not in request.files:
+            flash('No file part')
+            return redirect(request.url)
+        files = request.files.getlist('file')
+        for file in files:
+            if file.filename == '':
+                flash('No selected file')
+                return redirect(request.url)
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                file_data = {
+                    'filename': filename,
+                    'data': file.read()
+                }
+                files_collection.insert_one(file_data)
+        flash('Files successfully uploaded')
+        return redirect(url_for('list_files'))
+    return render_template('upload.html')
+@app.route('/uploads/<filename>')
+def uploaded_file(filename):
+    file_data = files_collection.find_one({'filename': filename})
+    if file_data:
+        return send_file(
+            io.BytesIO(file_data['data']),
+            mimetype='application/octet-stream'
+        )
+    else:
+        return 'File not found'
+@app.route('/files')
+def list_files():
+    files = [file_data['filename'] for file_data in files_collection.find({}, {'_id': 1, 'filename': 1})]
+    return render_template('files.html', files=files)
+@app.route('/delete/<filename>', methods=['POST'])
+def delete_file(filename):
+    file_data = files_collection.find_one({'filename': filename})
+    if file_data:
+        files_collection.delete_one({'filename': filename})
+        flash('File successfully deleted')
+    else:
+        flash('File not found')
+    return redirect(url_for('list_files'))
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+flask
+Flask-Cors
+Werkzeug
+gunicorn
+pymongo[srv]
+python-dotenv

templates/files.html ADDED Viewed

	@@ -0,0 +1,38 @@

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            padding: 20px;
+            box-sizing: border-box;
+        }
+    </style>
+    <title>Uploaded Files</title>
+</head>
+<body>
+    <h2 style="text-align: center; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;">Uploaded Files</h2>
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <ul>
+            {% for message in messages %}
+                <li>{{ message }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+    {% endwith %}
+    <ol type="1">
+        {% for file in files %}
+            <li>
+                <div style="display: flex; justify-content: space-between;">
+                    <a style="text-decoration: none; color: green; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;" href="{{ url_for('uploaded_file', filename=file) }}"> &nbsp;&nbsp;{{ file }} ⬇️</a>
+                    <form action="{{ url_for('delete_file', filename=file) }}" method="post" style="display:inline;">
+                        <input style="cursor: pointer; background-color: rgb(255, 0, 0); border: none; padding: 10px; color: aliceblue; font-weight: bold; border-radius: 12px;" type="submit" value="Delete 🗑️">
+                    </form>
+                </div>
+            </li>
+        {% endfor %}
+    </ol>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,140 @@

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        @property --rotate {
+            syntax: "<angle>";
+            initial-value: 132deg;
+            inherits: false;
+        }
+        :root {
+            --card-height: 65vh;
+            --card-width: calc(var(--card-height) / 1.5);
+        }
+        body {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+        .card {
+        background: #6882f7;
+        width: var(--card-width);
+        height: var(--card-height);
+        padding: 3px;
+        position: relative;
+        border-radius: 6px;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        display: flex;
+        font-size: 1.5em;
+        color: rgb(88 199 250 / 0%);
+        cursor: pointer;
+        font-family: cursive;
+        }
+        .card:hover {
+        color: rgb(0, 238, 255);
+        transition: color 1s;
+        }
+        .card:hover:before, .card:hover:after {
+        animation: none;
+        opacity: 0;
+        }
+        .card::before {
+        content: "";
+        width: 104%;
+        height: 102%;
+        border-radius: 8px;
+        background-image: linear-gradient(
+            var(--rotate)
+            , #5ddcff, #3c67e3 43%, #4e00c2);
+            position: absolute;
+            z-index: -1;
+            top: -1%;
+            left: -2%;
+            animation: spin 2.5s linear infinite;
+        }
+        .card::after {
+        position: absolute;
+        content: "";
+        top: calc(var(--card-height) / 6);
+        left: 0;
+        right: 0;
+        z-index: -1;
+        height: 100%;
+        width: 100%;
+        margin: 0 auto;
+        transform: scale(0.8);
+        filter: blur(calc(var(--card-height) / 6));
+        background-image: linear-gradient(
+            var(--rotate)
+            , #5ddcff, #3c67e3 43%, #4e00c2);
+            opacity: 1;
+        transition: opacity .5s;
+        animation: spin 2.5s linear infinite;
+        }
+        @keyframes spin {
+        0% {
+            --rotate: 0deg;
+        }
+        100% {
+            --rotate: 360deg;
+        }
+        }
+        a {
+        color: #212534;
+        text-decoration: none;
+        font-family: sans-serif;
+        font-weight: bold;
+        margin-top: 2rem;
+        }
+        .container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            width: 80%;
+        }
+        @media only screen and (max-width: 600px) {
+            .container {
+                width: 100%;
+            }
+            .card::before {
+                content: "";
+                width: 104%;
+                height: 102%;
+            }
+            :root {
+                --card-height: 30vh;
+                --card-width: calc(var(--card-height) / 1.5);
+            }
+        }
+    </style>
+    <title>File Storage</title>
+</head>
+<body>
+    <h1 style="text-align: center; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;">File Storage System</h1>
+    <div class="container">
+        <a href="{{ url_for('upload_file') }}">
+            <div class="card">
+                Upload a file
+            </div>
+        </a>
+        <a href="{{ url_for('list_files') }}">
+            <div class="card">
+                View uploaded files
+            </div>
+        </a>
+    </div>
+</body>
+</html>

templates/upload.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .button1 {
+            background-color: #00eaff;
+            border: none;
+            border-radius: 24px;
+            padding: 10px;
+            width: 100%;
+            margin: auto;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            font-weight: bolder;
+        }
+        .form-control-file {
+            position: relative;
+            width: 100%;
+            margin: 10px;
+            height: 81dvh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            justify-items: center;
+            outline: none;
+            visibility: hidden;
+            cursor: pointer;
+            background-color: blueviolet;
+            box-shadow: 0 0 5px solid blueviolet;
+        }
+        .form-control-file:before {
+            content: attr(data-title);
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            justify-items: center;
+            font-size: large;
+            font-weight: bolder;
+            top: 0;
+            left: 0;
+            width: 95%;
+            height: 80dvh;
+            opacity: 1;
+            visibility: visible;
+            text-align: center;
+            border: 0.25em blueviolet dashed;
+            border-radius: 24px;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        .form-control-file:hover:before {
+            border-style: solid;
+            box-shadow: inset blueviolet 0px 0px 0px 0.25em;
+        }
+        body {
+            background-color: #f7f7f9;
+        }
+    </style>
+    <title>Upload Files</title>
+</head>
+<body>
+    <h2 style="text-align: center; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;">Upload New Files</h2>
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <ul>
+            {% for message in messages %}
+                <li>{{ message }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+    {% endwith %}
+    <form method="post" class="container" enctype="multipart/form-data">
+        <input type="file" name="file" multiple class="form-control-file" id="inputFile" onchange="readUrl(this)" data-title="Drag and drop a file">
+        <input type="submit" class="button1" style="cursor: pointer;" value="Upload">
+    </form>
+    <script>
+        function readUrl(input) {
+            if (input.files && input.files[0]) {
+                let reader = new FileReader();
+                reader.onload = (e) => {
+                    let imgData = e.target.result;
+                    let imgName = input.files[0].name;
+                    input.setAttribute("data-title", imgName);
+                    console.log(e.target.result);
+                }
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+    </script>
+</body>
+</html>