diff options
| -rw-r--r-- | lib/helpers.php | 2 | ||||
| -rw-r--r-- | public/css/style.css | 17 | ||||
| -rw-r--r-- | views/photo.php | 28 |
3 files changed, 41 insertions, 6 deletions
diff --git a/lib/helpers.php b/lib/helpers.php index eb8994c..a4dc22e 100644 --- a/lib/helpers.php +++ b/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.'); } diff --git a/public/css/style.css b/public/css/style.css index 7cb152c..d806c62 100644 --- a/public/css/style.css +++ b/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; 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 |