Merge pull request #49 from 01bps/en1.0

Add file type validation for image uploads
KathiraveluLab · Feb 3, 2025 · ef67b60 · ef67b60
2 parents df47b1e + af60131
commit ef67b60
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/app.py b/app.py
@@ -37,6 +37,10 @@
 
 from OAuth.config import ALLOWED_EMAILS, GOOGLE_CLIENT_ID
 
+ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf'}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
 app = Flask(__name__)
 app.secret_key = 'beehive'
@@ -148,7 +152,7 @@ def upload_image():
     title = request.form['title']
     description = request.form['description']
 
-    if file:
+    if file and allowed_file(file.filename):
         filename = file.filename
         filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
         os.makedirs(os.path.dirname(filepath), exist_ok=True)
@@ -157,7 +161,7 @@ def upload_image():
         save_image(user['username'], filename, title, description, time_created)
         flash('Image uploaded successfully!', 'success')
     else:
-        flash('No file selected.', 'danger')
+        flash('Invalid file type. Allowed types are: jpg, jpeg, png, gif, webp, heif, pdf', 'danger')
 
     return redirect(url_for('profile'))
 

diff --git a/templates/profile.html b/templates/profile.html
@@ -35,6 +35,7 @@
             }
         }
 
+
         function previewImage(imageSrc) {
             var modal = document.getElementById('imagePreviewModal');
             var previewImg = document.getElementById('previewImage');
@@ -61,6 +62,28 @@
         setTimeout(() => flashMessages.style.display = "none", 500);
       }
     }, 5000);
+
+        function validateFile(input) {
+            const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/heif', 'application/pdf'];
+            const uploadButton = document.getElementById('uploadButton');
+            const fileError = document.getElementById('fileError');
+
+            if (input.files && input.files[0]) {
+                const file = input.files[0];
+                const fileExtension = file.name.split('.').pop().toLowerCase();
+
+                if (!allowedTypes.includes(file.type) || 
+                    !['jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf'].includes(fileExtension)) {
+                    uploadButton.disabled = true;
+                    fileError.style.display = 'block';
+                    input.value = ''; // Clear the file input
+                } else {
+                    uploadButton.disabled = false;
+                    fileError.style.display = 'none';
+                }
+            }
+        }
+
     </script>
 </head>
 <body>
@@ -88,10 +111,11 @@ <h1>{{ username }}</h1>
     <div class="toggle-container">
         <div id="uploadForm" style="display: none;">
             <form action="{{ url_for('upload_image') }}" method="post" enctype="multipart/form-data">
-                <input class="file-button" type="file" name="file" required><br>
+                <input class="file-button" type="file" name="file" id="fileInput" accept=".jpg,.jpeg,.png,.gif,.webp,.heif,.pdf" required onchange="validateFile(this)"><br>
                 <input class="title-area" type="text" name="title" placeholder="Title" required><br>
                 <textarea class="description-area" name="description" placeholder="Description" required></textarea><br>
-                <button class="upload-button" type="submit">Upload</button>
+                <button class="upload-button" type="submit" id="uploadButton">Upload</button>
+                <div id="fileError" style="color: red; display: none;">Invalid file type. Only jpg, jpeg, png, gif, webp,heif and pdf files are allowed.</div>
             </form>
         </div>
     </div>