Client-side validation of uploaded profile image

Author: chriscarrollsmith

templates/users/profile.html

@@ -112,5 +112,53 @@ <h1 class="mb-4">User Profile</h1>
             editProfile.style.display = 'block';
         }
     }
+
+    document.getElementById('avatar_file').addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        // Get constraints from your template variables
+        const maxSizeMB = "{{ max_file_size_mb }}";
+        const minDimension = "{{ min_dimension }}";
+        const maxDimension = "{{ max_dimension }}";
+        const allowedFormats = "{{ allowed_formats }}";
+
+
+        // Check file size
+        const fileSizeMB = file.size / (1024 * 1024);
+        if (fileSizeMB > maxSizeMB) {
+            alert(`File size must be less than ${maxSizeMB}MB`);
+            this.value = '';
+            return;
+        }
+
+        // Check file format
+        const fileFormat = file.type.split('/')[1];
+        if (!allowedFormats.includes(fileFormat)) {
+            alert(`File format must be one of: ${allowedFormats.join(', ')}`);
+            this.value = '';
+            return;
+        }
+
+        // Check dimensions
+        const img = new Image();
+        img.src = URL.createObjectURL(file);
+        
+        img.onload = function() {
+            URL.revokeObjectURL(this.src);
+            
+            if (this.width < minDimension || this.height < minDimension) {
+                alert(`Image dimensions must be at least ${minDimension}x${minDimension} pixels`);
+                e.target.value = '';
+                return;
+            }
+            
+            if (this.width > maxDimension || this.height > maxDimension) {
+                alert(`Image dimensions must not exceed ${maxDimension}x${maxDimension} pixels`);
+                e.target.value = '';
+                return;
+            }
+        };
+    });
 </script>
 {% endblock %}