Image upload added

Added temporary fix to loading images on the home page
Fix api.py for requesting images
Minor tweaks to default theme

gallery/__init__.py

@@ -26,11 +26,13 @@ def create_app(test_config=None):
     
     # Get environment variables
     load_dotenv(os.path.join(app.root_path, 'user', '.env'))
-    
+
+    # App configuration    
     app.config.from_mapping(
         SECRET_KEY=os.environ.get('FLASK_SECRET'),
         DATABASE=os.path.join(app.instance_path, 'gallery.sqlite'),
         UPLOAD_FOLDER=os.path.join(app.root_path, 'user', 'uploads'),
+        ALLOWED_EXTENSIONS=['png', 'jpg', 'jpeg', 'webp'],
     )
     
     if test_config is None:
@@ -91,14 +93,13 @@ def create_app(test_config=None):
     from . import auth
     app.register_blueprint(auth.blueprint)
     
-    # Load apis
-    from . import api
-    app.register_blueprint(api.blueprint)
-    
     # Load routes for home and images
     from . import gallery
     app.register_blueprint(gallery.blueprint)
     app.add_url_rule('/', endpoint='index')
-
+    
+    # Load APIs
+    from . import api
+    app.register_blueprint(api.blueprint)
 
     return app

gallery/api.py

@@ -1,28 +1,13 @@
-import functools
+from flask import Blueprint, render_template, current_app, send_from_directory
-from flask import (
-    Blueprint, flash, g, redirect, render_template, request, session, url_for, abort, jsonify, send_from_directory
-)
-from werkzeug.security import check_password_hash, generate_password_hash
 from werkzeug.utils import secure_filename
-from gallery.db import get_db
+import os
 
-blueprint = Blueprint('api', __name__, url_prefix='/api')
+blueprint = Blueprint('viewsbp', __name__, url_prefix='/')
 
 
-@blueprint.route('/uploads/<quality>/<request_file>', methods=['POST'])
+@blueprint.route('/uploads/<quality>/<file>')
-def uploads(quality, request_file):
+def uploads(quality, file):
-    if request.method != 'POST':
+    dir = os.path.join(current_app.config['UPLOAD_FOLDER'], secure_filename(quality))
-        abort(405)
+    file = secure_filename(file)
 
-    #quality = secure_filename(quality)
+    return send_from_directory(dir, file, as_attachment=True)
-    #quality_dir = os.path.join(app.config['UPLOAD_FOLDER'], quality)
-    #if not os.path.isdir(quality_dir):
-    #    abort(404)
-
-    #request_file = secure_filename(request_file)
-
-    #if not os.path.isfile(os.path.join(quality_dir, request_file)):
-    #    abort(404)
-
-    #return send_from_directory(quality_dir, request_file)
-    abort(404)

gallery/auth.py

@@ -1,7 +1,5 @@
 import functools
-from flask import (
+from flask import Blueprint, flash, g, redirect, render_template, request, session, url_for
-    Blueprint, flash, g, redirect, render_template, request, session, url_for
-)
 from werkzeug.security import check_password_hash, generate_password_hash
 from gallery.db import get_db
 

gallery/gallery.py

@@ -1,30 +1,38 @@
-from flask import (
+from flask import Blueprint, flash, g, redirect, render_template, request, url_for, jsonify, current_app
-    Blueprint, flash, g, redirect, render_template, request, url_for, jsonify, current_app
-)
 from werkzeug.exceptions import abort
 from werkzeug.utils import secure_filename
 from gallery.auth import login_required
 from gallery.db import get_db
-import json
 import os
+import datetime
+dt = datetime.datetime.now()
+
 blueprint = Blueprint('gallery', __name__)
 
 
 @blueprint.route('/')
 def index():
-    return render_template('index.html')
+    db = get_db()
+    images = db.execute(
+        'SELECT * FROM posts'
+        ' ORDER BY created_at DESC'
+    ).fetchall()
+    
+    return render_template('index.html', images=images)
 
-@blueprint.route('/image/<request_id>')
+@blueprint.route('/image/<int:id>')
-def image(request_id):
+def image(id):    
-    # Check if request_id is valid
+    db = get_db()
-    try:
+    post = db.execute(
-        request_id = int(request_id)
+        'SELECT * FROM posts'
-    except ValueError:
+        ' WHERE id = ?',
+        (id,)
+    ).fetchone()
+    
+    if post is None:
         abort(404)
     
-    result = onlylegsDB.getImage(request_id)
+    return render_template('image.html', fileName=post['file_name'], id=id)
-    
-    return render_template('image.html', fileName=result[1], id=request_id)
 
 
 @blueprint.route('/group')
@@ -46,10 +54,19 @@ def upload():
         if not file:
             flash('No selected file')
             return abort(404)
+        if secure_filename(file.filename).lower().split('.')[-1] in current_app.config['ALLOWED_EXTENSIONS']:
+            file_name = f"GWAGWA_{dt.year}{dt.month}{dt.day}-{dt.microsecond}.{secure_filename(file.filename).lower().split('.')[-1]}"
+            file.save(os.path.join(current_app.config['UPLOAD_FOLDER']+'/original', file_name))
+            
+        db = get_db()
+        db.execute(
+            'INSERT INTO posts (file_name, author_id, description, alt)'
+            ' VALUES (?, ?, ?, ?)',
+            (file_name, g.user['id'], form['description'], form['alt'])
+        )
+        db.commit()
         
-        file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], secure_filename(file.filename)))
+        return 'Gwa Gwa'
-        
-        return json.dumps({'filename': secure_filename(file.filename), 'form': form})
            
     return render_template('upload.html')
 

gallery/templates/image.html

@@ -1,13 +1,17 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="/uploads/original/{{ fileName }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
 {% endblock %}
 
 {% block content %}
     <div class="app">
         <div class="image__container">
-            <img class="image__item" src="/uploads/original/{{ fileName }}" onload="imgFade(this)" style="display:none;"/>
+            <img
+                class="image__item"
+                src="/uploads/original/{{ fileName }}"
+                onload="imgFade(this)" style="display:none;"
+            />
         </div>
         <div class="image__info">
             <h2>{{ fileName }}</h2>

gallery/templates/index.html

@@ -7,7 +7,18 @@
 {% block content %}
     <div class="app">
         <h1>Gallery</h1>
-        <div id="gallery" class="gallery"></div>
+        <div id="gallery" class="gallery">
+            {% for image in images %}
+                <a class="gallery__item" href="/image/{{ image['id'] }}">
+                    <div class="gallery__item-info">
+                        <p>{{ image['id'] }}</p>
+                        <h2>{{ image['file_name'] }}</h2>
+                    </div>
+                    <span class="gallery__item-filter"></span>
+                    <img class="gallery__item-image" src="/uploads/original/{{ image['file_name'] }}" onload="imgFade(this)" style="display:none;">
+                </a>
+            {% endfor %}
+        </div>
     </div>
     <script>
         let imageList = [];

gallery/templates/upload.html

@@ -29,22 +29,6 @@
                         <path d="M11.586 15.071L13 13.657l1.414 1.414 6.165-6.165 1.09-3.552-2.484-2.483-1.079.336-1.598-1.598L18.591.96a2 2 0 0 1 2.008.496l2.483 2.483a2 2 0 0 1 .498 2L22.345 9.97l-7.93 7.93-2.83-2.828zM14.236.75l2.482 2.483a2 2 0 0 1 .498 2l-1.235 4.028-7.93 7.931-7.78-7.778L8.17 1.516 12.227.254a2 2 0 0 1 2.008.496zM3.1 9.414l4.95 4.95 6.164-6.165 1.09-3.552-2.484-2.483-3.585 1.115L3.1 9.414zm7.424-2.475a1.5 1.5 0 1 1 2.121-2.121 1.5 1.5 0 0 1-2.12 2.121zm6.886 1.022l.782-2.878c.45.152.755.325.917.518a1.5 1.5 0 0 1-.185 2.113c-.29.244-.795.326-1.514.247z"></path>
                     </svg>
                     <input type="text" name="tags" placeholder="tags" id="tags"/>
-
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="24" fill="currentColor">
-                        <path d="M10.83 2H17a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h5c1.306 0 2.417.835 2.83 2zM17 4H9.415l-.471-1.334A1.001 1.001 0 0 0 8 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path><path d="M1 5h18v2H1z"></path>
-                    </svg>
-                    <span>group1</span>
-                    <input type="checkbox" name="group1" placeholder="group"/>
-
-                    <span>group2</span>
-                    <input type="checkbox" name="group2" placeholder="group"/>
-
-                    <span>group3</span>
-                    <input type="checkbox" name="group3" placeholder="group"/>
-
-                    <span>group4</span>
-                    <input type="checkbox" name="group4" placeholder="group"/>
-
                 <input type="submit" value="Upload" name="submit" id="submit"/>
             </form>
         </div>
@@ -83,7 +67,6 @@
                 $("#alt").val("");
                 $("#description").val("");
                 $("#tags").val("");
-                $("#submit").val("");
             }
 		});
     </script>

gallery/user/themes/default/style.scss

@@ -68,6 +68,7 @@
         font-size: 5rem;
         font-weight: 900;
         line-height: 1;
+        text-align: center;
 
         color: $green;
     }
@@ -79,6 +80,7 @@
         font-size: 2rem;
         font-weight: 600;
         line-height: 1;
+        text-align: center;
 
         color: $white100;
     }
@@ -208,7 +210,7 @@
 }
 
 .image__container {
-    margin: 0;
+    margin: -40vh 0 0 0;
     padding: 0;
 
     width: 100%;