Skip to content

Commit

Permalink
Preliminar version
Browse files Browse the repository at this point in the history 
A lot of options added
  • Loading branch information
@pekebyte
pekebyte committed Jan 30, 2013
1 parent 940cf27 commit 787cfef
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 21 deletions.
4 changes: 1 addition & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
pekeUpload
==========

Jquery HTML5 plugin
==========`
7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<script type="text/javascript" src="js/pekeUpload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file").pekeUpload();
$("#file").pekeUpload({onSubmit: true, allowedExtensions: "jpeg|jpg|gif|png"});
});
</script>

Expand All @@ -22,9 +22,10 @@ <h1>PekeUpload jQuery Plugin</h1>
</div>

<div id="content">

<form method="post">
<input id="file" type="file" name="file" />

<input type="submit" value="hola" />
</form>
</div>

</div>
Expand Down
135 changes: 120 additions & 15 deletions js/pekeUpload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,29 @@
url: "upload.php",
theme: "bootstrap",
field: "file",
multi: true,
showFilename: true,
showPercent: true,
showErrorAlerts: true,
allowedExtensions: "",
invalidExtError: "Invalid File Type",
maxSize: 0,
sizeError: "Size of the file is greather than allowed",
onFileError: function(file,error){},
onFileSuccess: function(file,data){},
};

var options = $.extend(defaults, options);

//Main function
var obj;
var file = new Object();
var fileinput = this;
this.each(function() {
var obj = $(this);
obj = $(this);
//HTML code depends of theme
if (options.theme == "bootstrap"){
var html = '<a href="javascript:void(0)" class="btn btn-primary btn-upload"> <span class="icon-upload icon-white"></span> '+options.btnText+'</a>';
var htmlprogress = '<div class="filename"></div><div class="progress progress-striped"><div class="bar pekeup-progress-bar" style="width: 0%;"><span class="badge badge-info"></span></div></div>';
var html = '<a href="javascript:void(0)" class="btn btn-primary btn-upload"> <span class="icon-upload icon-white"></span> '+options.btnText+'</a><div class="pekecontainer"></div>';
}
obj.after(html);
obj.hide();
Expand All @@ -42,23 +54,50 @@
});
//Event when user select a file
obj.change(function(){
var formData = new FormData();
formData.append(options.field, obj[0].files[0]);
obj.next('a').after(htmlprogress);
UploadFile(formData);
file.name = obj.val().split('\\').pop();
file.size = (obj[0].files[0].size/1024)/1024;
if (validateresult()==true){
if (options.onSubmit==false){
UploadFile();
}
else{
obj.next('a').next('div').prepend('<br /><span class="filename">'+file.name+'</span>');
obj.parent('form').bind('submit',function(){
obj.next('a').next('div').html('');
UploadFile();
});
}
}
});
});

function UploadFile(formData){
//Function that uploads a file
function UploadFile(){
var error = true;
if (options.theme=="bootstrap"){
var htmlprogress = '<div class="file"><div class="filename"></div><div class="progress progress-striped"><div class="bar pekeup-progress-bar" style="width: 0%;"><span class="badge badge-info"></span></div></div></div>';
}
obj.next('a').next('div').prepend(htmlprogress);
var formData = new FormData();
formData.append(options.field, obj[0].files[0]);
$.ajax({
url: options.url,
type: 'POST',
data: formData,
// dataType: 'json',
success: function(data){
var percent = 100;
$('.pekeup-progress-bar:first').width(percent+'%');
$('.pekeup-progress-bar:first').text(percent+"%");
obj.next('a').next('div').find('.pekeup-progress-bar:first').width(percent+'%');
obj.next('a').next('div').find('.pekeup-progress-bar:first').text(percent+"%");
if (data==1){
if (options.multi==false){
obj.attr('disabled','disabled');
}
options.onFileSuccess(file,data);
}
else{
options.onFileError(file,data);
error = false;
}
},
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
Expand All @@ -71,16 +110,82 @@
contentType: false,
processData: false
});
return error;
}

//Function that updates bars progress
function progressHandlingFunction(e){
if(e.lengthComputable){
var total = e.total;
var loaded = e.loaded;
var percent = (e.loaded * 100)/e.total;
$('.pekeup-progress-bar:first').width(percent+'%');
$('.pekeup-progress-bar:first').text(percent+"%");
if (options.showFilename==true){
obj.next('a').next('div').find('.file').first().find('.filename:first').text(file.name);
}
if (options.showPercent==true){
var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
obj.next('a').next('div').find('.file').first().find('.pekeup-progress-bar:first').width(percent+'%');
}
obj.next('a').next('div').find('.file').first().find('.pekeup-progress-bar:first').text(percent+"%");
}
}
//Validate master
function validateresult(){
var canUpload = true;
if (options.allowedExtensions!=""){
var validationresult = validateExtension();
if (validationresult == false){
canUpload = false;
if((options.theme == "bootstrap")&&(options.showErrorAlerts==true)){
obj.next('a').next('div').prepend('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> '+options.invalidExtError+'</div>');
bootstrapclosenotification();
}
options.onFileError(file,options.invalidExtError);
}
else{
canUpload = true;
}
}
if (options.maxSize>0){
var validationresult = validateSize();
if (validationresult == false){
canUpload = false;
if((options.theme == "bootstrap")&&(options.showErrorAlerts==true)){
obj.next('a').next('div').prepend('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> '+options.sizeError+'</div>');
bootstrapclosenotification();
}
options.onFileError(file,options.sizeError);
}
else{
canUpload = true;
}
}
return canUpload
}
//Validate extension of file
function validateExtension(){
var ext = obj.val().split('.').pop().toLowerCase();
var allowed = options.allowedExtensions.split("|");
if($.inArray(ext, allowed) == -1) {
return false;
}
else{
return true;
}
}
//Validate Size of the file
function validateSize(){
if (file.size > options.maxSize){
return false;
alert('aqui hay un error bitch');
}
else{
return true;
}
}
//Function that allows close alerts of bootstap
function bootstrapclosenotification(){
obj.next('a').next('div').find('.alert-error').click(function(){
$(this).remove();
})
}
};

Expand Down

0 comments on commit 787cfef

Please sign in to comment.