Add button to allow selecting files in browser

application/views/upload.php

@@ -1,3 +1,7 @@
 		<div id="dropbox">
-			<span class="message">Drop images here to upload.</span>
-		</div>
+			<span class="message">Drop images here to upload or click below to select.</span>
+			<div class="button">
+				Select Images
+				<input type="file" id="file-input" name="file" multiple>
+			</div>
+		</div>

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

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