Browse Source

some styling for photo uploads

pull/25/head
Aaron Parecki 6 years ago
parent
commit
92b55f2636
3 changed files with 41 additions and 6 deletions
  1. +1
    -1
      lib/helpers.php
  2. +17
    -0
      public/css/style.css
  3. +23
    -5
      views/photo.php

+ 1
- 1
lib/helpers.php View File

@ -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.');
}

+ 17
- 0
public/css/style.css View File

@ -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;

+ 23
- 5
views/photo.php View File

@ -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>
</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>

Loading…
Cancel
Save