some styling for photo uploads

1 files changed, 23 insertions, 5 deletions

diff --git a/views/photo.php b/views/photo.php
index 364a55d..ab2a364 100644
--- a/views/photo.php
+++ b/views/photo.php
@@ -1,11 +1,17 @@
   <div class="narrow">
     <?= partial('partials/header') ?>
 
-      <form method="POST" role="form" style="margin-top: 20px;" id="note_form" enctype="multipart/form-data">
+      <form method="POST" action="/photo" role="form" style="margin-top: 20px;" id="note_form" enctype="multipart/form-data">
 
         <div class="form-group">
           <label for="note_photo"><code>photo</code></label>
-          <input type="file" name="note_photo" id="note_photo" accept="image/jpg,image/jpeg,image/gif,image/png">
+          <div class="uploadBtn btn btn-default">
+            <span>Choose File</span>
+            <input type="file" name="note_photo" id="note_photo" accept="image/jpg,image/jpeg,image/gif,image/png">
+          </div>
+          <div class="hidden" id="photo_filename_container">
+            <input type="text" class="form-control" disabled="disabled" id="photo_filename">
+          </div>
           <p class="help-block">Photo JPEG, GIF or PNG.</p>
         </div> 
 
@@ -15,6 +21,8 @@
         </div>
 
         <button class="btn btn-success" id="btn_post">Post</button>
+
+        <div style="clear:both;"></div>
       </form>
 
       <? if(!empty($this->location)): ?>
@@ -33,6 +41,16 @@
         <h4>Response:</h4>
         <pre><?= $this->response ?></pre>
       <? endif ?>
-
-
-  </div>
\ No newline at end of file
+  </div>
+  <script>
+  $(function(){
+    document.getElementById("note_photo").onchange = function () {
+      var filename = this.value;
+      if(filename.match(/[^\\]+$/)) {
+        filename = filename.match(/[^\\]+$/)[0];
+      }
+      $("#photo_filename").val(filename);
+      $("#photo_filename_container").removeClass("hidden");
+    };
+  });
+  </script>
\ No newline at end of file