diff --git a/assets/js/edit.js b/assets/js/edit.js
index 2b0c2cbdf2db9d2bad2938409734f54328c66b37..c9e65dd780931f45b09c9449ec8d8d411a381d68 100644
--- a/assets/js/edit.js
+++ b/assets/js/edit.js
@@ -1,4 +1,23 @@
-window.onload = function() {
+window.addEventListener('load', function() {
+    var input = document.getElementById('field_data');
+    var infoArea = document.getElementById('filename');
+    var image = document.getElementById('prof_pic');
+
+    input.addEventListener('change', function ( event ) {
+        
+        // the change event gives us the input it occurred in 
+        var input = event.srcElement;
+        
+        // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
+        var fileName = input.files[0].name;
+        
+        // use fileName however fits your app best, i.e. add it into a div
+        infoArea.value = fileName;
+
+        var imagePath = URL.createObjectURL(event.target.files[0]);
+        image.src = imagePath;
+    });
+
     // Add validator for the fields below.
     var name = document.getElementById('field_name');
     var address = document.getElementById('field_address');
@@ -6,7 +25,7 @@ window.onload = function() {
     // let pic_id = document.getElementById('field_image_id');
     //let image = document.getElementById('field_data');
     name.onchange = function(e) {
-        if (this.value !== "") {
+        if (this.value.match(nameRE)) {
             name_ok = true;
         } else {
             name_ok = false;
@@ -20,7 +39,7 @@ window.onload = function() {
         }
     }
     phone.onchange = function(e) {
-        if (this.value !== "") {
+        if (this.value.match(phoneRE)) {
             phone_ok = true;
         } else {
             phone_ok = false;
@@ -49,4 +68,7 @@ window.onload = function() {
         }
         document.getElementById("edit_form").submit();
     });
-}
+});
+
+nameRE = /^(\w+)(\s\w+)*$/g;
+phoneRE = /^\d{9,12}$/g;
\ No newline at end of file