Aztecks

index.html

@@ -79,7 +79,7 @@
 
             <div class="form-group">
             <label for="inputphoto">Photo</label>
-            <input id="inputphoto" class="form-control" type="file" placeholder="Enter your photo" required onchange=loadFile(event)>
+            <input id="inputphoto" class="form-control" type="file" accept="image/png,.jpg,.jpeg" placeholder="Enter your photo" required onchange="loadFile()">
             <small id="photohelp" class="form-text text-muted">Please provide a photograph of yourself in JPEG or PNG formats.</small>
             <br><br>
             </div>

main.js

@@ -1,6 +1,14 @@
-var loadFile = (event) => {
-	let image = document.getElementById('photo');
-	image.src = URL.createObjectURL(event.target.files[0]);
+var loadFile = () => {
+    let inputFile = document.getElementById('inputphoto');  
+    let file = inputFile.files[0];
+    if(file.name.endsWith('.png') || file.name.endsWith('.jpg') || file.name.endsWith('.jpeg')){
+	    let image = document.getElementById('photo');
+	    image.src = URL.createObjectURL(inputFile.files[0]);
+    }
+    else{
+        alert ("Unsupported Image File");
+        inputFile.value = "";
+    }
 };
 
 var loadName = (event) => {