atomaka/NCA-Screens
1
0
Fork 0
Code Releases Activity

Merge pull request #1 from dpatti/button-upload

Browse source 
Add button to allow selecting files in browser
This commit is contained in:
Andrew Tomaka 2012-01-02 00:13:24 -08:00
commit 6d91b5ebe6
3 changed files with 51 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
application/views/upload.php
View file

@ -1,3 +1,7 @@
<div id="dropbox"> <div id="dropbox">
<span class="message">Drop images here to upload.</span> <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> </div>

27
css/style.css
View file

@ -117,6 +117,33 @@ h1{
border-radius: 3px 3px 0 0; 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;
}
/*------------------------- /*-------------------------

17
js/upload.js
View file

@ -1,6 +1,7 @@
$(function(){ $(function(){
var dropbox = $('#dropbox'), var dropbox = $('#dropbox'),
message = $('.message', dropbox); message = $('.message', dropbox),
button = $('#file-input');
dropbox.filedrop({ dropbox.filedrop({
// The name of the $_FILES entry: // The name of the $_FILES entry:
@ -114,4 +115,18 @@ $(function(){
message.html(msg); 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);
}
});
}); });