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);
+ }
+ });
+});