some styling for photo uploads

lib/helpers.php

@@ -261,7 +261,7 @@ function validate_photo(&$file) {
     }
 
     // You should also check filesize here.
-    if ($file['size'] > 1000000) {
+    if ($file['size'] > 4000000) {
         throw new RuntimeException('Exceeded filesize limit.');
     }
 

public/css/style.css

@@ -179,6 +179,23 @@ body {
     border-bottom-left-radius: 4px;
   }
 
+  .uploadBtn {
+      position: relative;
+      overflow: hidden;
+      margin: 10px;
+  }
+  .uploadBtn input {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      font-size: 20px;
+      cursor: pointer;
+      opacity: 0;
+      filter: alpha(opacity=0);
+  }  
+
   .callout {
     border-left: 4px #5bc0de solid;
     background-color: #f4f8fa;

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>
+  <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>