diff --git a/application/views/upload.php b/application/views/upload.php index 8b14993..dcc646d 100644 --- a/application/views/upload.php +++ b/application/views/upload.php @@ -1,3 +1,7 @@
- Drop images here to upload. -
\ No newline at end of file + Drop images here to upload or click below to select. +
+ Select Images + +
+ diff --git a/css/style.css b/css/style.css index cc4e62b..6572332 100644 --- a/css/style.css +++ b/css/style.css @@ -117,6 +117,33 @@ h1{ border-radius: 3px 3px 0 0; } +#dropbox .button { + background-color: #333; + border-radius: 3px; + color: #ddd; + font-size: 13px; + width: 120px; + height: 28px; + line-height: 28px; + padding: 0 8px; + margin: 1em auto; + overflow: hidden; + position: relative; + text-align: center; +} + +#dropbox #file-input { + font-size: 460px; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + opacity: 0; + right: 0; + top: 0; + z-index: 10000; +} + /*------------------------- @@ -403,4 +430,4 @@ h1{ .success { color: green; -} \ No newline at end of file +} diff --git a/js/upload.js b/js/upload.js index c2e8d0b..5e608f3 100644 --- a/js/upload.js +++ b/js/upload.js @@ -1,6 +1,7 @@ $(function(){ var dropbox = $('#dropbox'), - message = $('.message', dropbox); + message = $('.message', dropbox), + button = $('#file-input'); dropbox.filedrop({ // The name of the $_FILES entry: @@ -114,4 +115,18 @@ $(function(){ message.html(msg); } -}); \ No newline at end of file + // Button upload support + button.change(function(){ + var fileList = this.files; + + if (fileList.length > 0) { + // Send this as if it were dropped + var e = $.Event("drop", { + dataTransfer: { + files: fileList, + }, + }); + dropbox.trigger(e); + } + }); +});