From ace8c48538e3710b3674b6c9b657dea18432f41e Mon Sep 17 00:00:00 2001
From: Swagnik02 <swagnik1234@gmail.com>
Date: Tue, 5 Oct 2021 15:18:41 +0530
Subject: [PATCH 1/4] fixed issue #16

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 8909681..568ae7f 100644
--- a/index.html
+++ b/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(event)>
             <small id="photohelp" class="form-text text-muted">Please provide a photograph of yourself in JPEG or PNG formats.</small>
             <br><br>
             </div>

From 80d1061264291704b620bd91b80fca8fae59f460 Mon Sep 17 00:00:00 2001
From: Swagnik02 <swagnik1234@gmail.com>
Date: Tue, 5 Oct 2021 19:49:47 +0530
Subject: [PATCH 2/4] issue 16 fixed

---
 index.html |  2 +-
 main.js    | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 568ae7f..ea6013b 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,7 @@
 
             <div class="form-group">
             <label for="inputphoto">Photo</label>
-            <input id="inputphoto" class="form-control" type="file" accept="image/png,.jpg,.jpeg" 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>
diff --git a/main.js b/main.js
index e67c44e..6e76a66 100644
--- a/main.js
+++ b/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) => {

From 5f2c3147618a2662c8699b9f2e963626a11a52fd Mon Sep 17 00:00:00 2001
From: Swagnik02 <swagnik1234@gmail.com>
Date: Sat, 30 Oct 2021 00:12:31 +0530
Subject: [PATCH 3/4] Removed the alert, and have put the error under the
 upload option

---
 index.html |  4 ++--
 main.js    | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index ea6013b..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" 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 6e76a66..af423da 100644
--- a/main.js
+++ b/main.js
@@ -6,8 +6,18 @@ var loadFile = () => {
 	    image.src = URL.createObjectURL(inputFile.files[0]);
     }
     else{
-        alert ("Unsupported Image File");
         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'));
+        imageInput.insertBefore(document.createElement('br'), newElement);
     }
 };
 

From a12d06169e02cc295402eff23f1144a749de3f81 Mon Sep 17 00:00:00 2001
From: Swagnik02 <swagnik1234@gmail.com>
Date: Sat, 30 Oct 2021 19:19:40 +0530
Subject: [PATCH 4/4] issue fixed #17

---
 main.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index af423da..7ceaa2c 100644
--- a/main.js
+++ b/main.js
@@ -2,6 +2,11 @@ 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]);
     }
@@ -17,7 +22,9 @@ var loadFile = () => {
         newElement.classList.add('form-text');
         newElement.classList.add('text-danger');
         imageInput.insertBefore(newElement, document.getElementById('insertBefore'));
-        imageInput.insertBefore(document.createElement('br'), newElement);
+        let brTag = document.createElement('br');
+        brTag.setAttribute('id', 'tem-br');
+        imageInput.insertBefore(brTag, newElement);
     }
 };