diff --git a/index.html b/index.html
index 8909681..fbbb18b 100644
--- a/index.html
+++ b/index.html
@@ -77,11 +77,11 @@
             </div>
 
 
-            <div class="form-group">
+            <div class="form-group" id="image-input">
             <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>
+            <br id="insertBefore"/><br/>
             </div>
         </form>
         <div class="text-center mb-3">
diff --git a/main.js b/main.js
index e67c44e..7ceaa2c 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,31 @@
-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 errorElement = document.getElementById('imageError')
+        if (errorElement!==null) {
+            errorElement.remove();
+            document.getElementById('tem-br').remove();
+        }
+	    let image = document.getElementById('photo');
+	    image.src = URL.createObjectURL(inputFile.files[0]);
+    }
+    else{
+        inputFile.value = "";
+        if(document.getElementById('imageError')!==null) {
+            return;
+        }
+        let imageInput = document.getElementById('image-input');
+        let newElement = document.createElement('small');
+        newElement.innerText = 'Unsupported File Format';
+        newElement.setAttribute("id", "imageError");
+        newElement.classList.add('form-text');
+        newElement.classList.add('text-danger');
+        imageInput.insertBefore(newElement, document.getElementById('insertBefore'));
+        let brTag = document.createElement('br');
+        brTag.setAttribute('id', 'tem-br');
+        imageInput.insertBefore(brTag, newElement);
+    }
 };
 
 var loadName = (event) => {