JAVASCRIPT   43

pekeUpload

Guest on 29th April 2022 01:35:48 AM

  1. /*
  2.  *  PekeUpload 2.0 - jQuery plugin
  3.  *  written by Pedro Molina
  4.  *
  5.  *  Copyright (c) Pedro Molina
  6.  *  Dual licensed under the MIT (MIT-LICENSE.txt)
  7.  *  and GPL (GPL-LICENSE.txt) licenses.
  8.  *
  9.  *  Built for jQuery library
  10.  *
  11.  */
  12. (function($) {
  13.     $.fn.pekeUpload = function(options) {
  14.         // default configuration properties
  15.         var defaults = {
  16.             dragMode: false,
  17.             dragText: "Drag and Drop your files here",
  18.             bootstrap: false,
  19.             btnText: "Browse files...",
  20.             allowedExtensions: "",
  21.             invalidExtError: "Invalid File Type",
  22.             maxSize: 0,
  23.             sizeError: "Size of the file is greather than allowed",
  24.             showPreview: true,
  25.             showFilename: true,
  26.             showPercent: true,
  27.             showErrorAlerts: true,
  28.             errorOnResponse: "There has been an error uploading your file",
  29.             onSubmit: false,
  30.             url: "upload.php",
  31.             data: null,
  32.             limit: 0,
  33.             limitError: "You have reached the limit of files that you can upload",
  34.             delfiletext: "Remove from queue",
  35.             onFileError: function(file, error) {},
  36.             onFileSuccess: function(file, data) {}
  37.         };
  38.         var options = $.extend(defaults, options);
  39.         var pekeUpload = {
  40.             obj: $(this),
  41.             files: [],
  42.             uparea: null,
  43.             container: null,
  44.             uploadedfiles: 0,
  45.             hasErrors: false,
  46.             init: function() {
  47.                 this.replacehtml();
  48.                 this.uparea.on("click", function() {
  49.                     pekeUpload.selectfiles();
  50.                 });
  51.                 ///Handle events when drag
  52.                 if (options.dragMode) {
  53.                     this.handledragevents();
  54.                 }
  55.                 this.handlebuttonevents();
  56.                 //Dismiss all warnings
  57.                 $(document).on("click", ".pkwrncl", function() {
  58.                     $(this).parent("div").remove();
  59.                 });
  60.                 //Bind event if is on Submit
  61.                 if (options.onSubmit) {
  62.                     this.handleFormSubmission();
  63.                 }
  64.             },
  65.             replacehtml: function() {
  66.                 var html = null;
  67.                 switch (options.dragMode) {
  68.                   case true:
  69.                     switch (options.bootstrap) {
  70.                       case true:
  71.                         html = '<div class="well well-lg pkuparea pkdragarea" style="cursor:pointer"><h4>' + options.dragText + "</h4></div>";
  72.                         break;
  73.  
  74.                       case false:
  75.                         html = '<div class="pekeupload-drag-area pkuparea pkdragarea" style="cursor:pointer"><h4>' + options.dragText + "</h4></div>";
  76.                         break;
  77.                     }
  78.                     break;
  79.  
  80.                   case false:
  81.                     switch (options.bootstrap) {
  82.                       case true:
  83.                         html = '<a href="javascript:void(0)" class="btn btn-primary btn-upload pkuparea"> <i class="glyphicon glyphicon-upload"></i> ' + options.btnText + "</a>";
  84.                         break;
  85.  
  86.                       case false:
  87.                         html = '<a href="javascript:void(0)" class="pekeupload-btn-file pkuparea">' + options.btnText + "</a>";
  88.                         break;
  89.                     }
  90.                     break;
  91.                 }
  92.                 this.obj.hide();
  93.                 this.uparea = $(html).insertAfter(this.obj);
  94.                 this.container = $('<div class="pekecontainer"><ul></ul></div>').insertAfter(this.uparea);
  95.             },
  96.             selectfiles: function() {
  97.                 this.obj.click();
  98.             },
  99.             handlebuttonevents: function() {
  100.                 $(document).on("change", this.obj.selector, function() {
  101.                     pekeUpload.checkFile(pekeUpload.obj[0].files[0]);
  102.                 });
  103.                 $(document).on('click','.pkdel',function(){
  104.                     var parent = $(this).parent('div').parent('div');
  105.                     pekeUpload.delAndRearrange(parent);
  106.                 });
  107.             },
  108.             handledragevents: function() {
  109.                 $(document).on("dragenter", function(e) {
  110.                     e.stopPropagation();
  111.                     e.preventDefault();
  112.                 });
  113.                 $(document).on("dragover", function(e) {
  114.                     e.stopPropagation();
  115.                     e.preventDefault();
  116.                 });
  117.                 $(document).on("drop", function(e) {
  118.                     e.stopPropagation();
  119.                     e.preventDefault();
  120.                 });
  121.                 this.uparea.on("dragenter", function(e) {
  122.                     e.stopPropagation();
  123.                     e.preventDefault();
  124.                     $(this).css("border", "2px solid #0B85A1");
  125.                 });
  126.                 this.uparea.on("dragover", function(e) {
  127.                     e.stopPropagation();
  128.                     e.preventDefault();
  129.                 });
  130.                 this.uparea.on("drop", function(e) {
  131.                     $(this).css("border", "2px dotted #0B85A1");
  132.                     e.preventDefault();
  133.                     var files = e.originalEvent.dataTransfer.files;
  134.                     for (var i = 0; i < files.length; i++) {
  135.                         pekeUpload.checkFile(files[i]);
  136.                     }
  137.                 });
  138.             },
  139.             checkFile: function(file) {
  140.                 error = this.validateFile(file);
  141.                 if (error) {
  142.                     if (options.showErrorAlerts) {
  143.                         this.addWarning(error);
  144.                     }
  145.                     this.hasErrors = true;
  146.                     options.onFileError(file, error);
  147.                 } else {
  148.                     this.files.push(file);
  149.                     if (this.files.length > options.limit && options.limit > 0) {
  150.                         this.files.splice(this.files.length - 1, 1);
  151.                         if (options.showErrorAlerts) {
  152.                             this.addWarning(options.limitError, this.obj);
  153.                         }
  154.                         this.hasErrors = true;
  155.                         options.onFileError(file, error);
  156.                     } else {
  157.                         this.addRow(file);
  158.                         if (options.onSubmit == false) {
  159.                             this.upload(file, this.files.length - 1);
  160.                         }
  161.                     }
  162.                 }
  163.             },
  164.             addWarning: function(error, c) {
  165.                 var html = null;
  166.                 switch (options.bootstrap) {
  167.                   case true:
  168.                     html = '<div class="alert alert-danger"><button type="button" class="close pkwrncl" data-dismiss="alert">&times;</button> ' + error + "</div>";
  169.                     break;
  170.  
  171.                   case false:
  172.                     html = '<div class="alert-pekeupload"><button type="button" class="close pkwrncl" data-dismiss="alert">&times;</button> ' + error + "</div>";
  173.                     break;
  174.                 }
  175.                 if (!c) {
  176.                     this.container.append(html);
  177.                 } else {
  178.                     $(html).insertBefore(c);
  179.                 }
  180.             },
  181.             validateFile: function(file) {
  182.                 if (!this.checkExtension(file)) {
  183.                     return options.invalidExtError;
  184.                 }
  185.                 if (!this.checkSize(file)) {
  186.                     return options.sizeError;
  187.                 }
  188.                 return null;
  189.             },
  190.             checkExtension: function(file) {
  191.                 if (options.allowedExtensions == "") {
  192.                     return true;
  193.                 }
  194.                 var ext = file.name.split(".").pop().toLowerCase();
  195.                 var allowed = options.allowedExtensions.split("|");
  196.                 if ($.inArray(ext, allowed) == -1) {
  197.                     return false;
  198.                 } else {
  199.                     return true;
  200.                 }
  201.             },
  202.             checkSize: function(file) {
  203.                 if (options.maxSize == 0) {
  204.                     return true;
  205.                 }
  206.                 if (file.size > options.maxSize) {
  207.                     return false;
  208.                 } else {
  209.                     return true;
  210.                 }
  211.             },
  212.             addRow: function(file) {
  213.                 var i = this.files.length - 1;
  214.                 switch (options.bootstrap) {
  215.                   case true:
  216.                     var newRow = $('<div class="row pkrw" rel="' + i + '"></div>').appendTo(this.container);
  217.                     if (options.showPreview) {
  218.                         var prev = $('<div class="col-lg-2 col-md-2 col-xs-4"></div>').appendTo(newRow);
  219.                         this.previewFile(prev, file);
  220.                     }
  221.                     var finfo = $('<div class="col-lg-8 col-md-8 col-xs-8"></div>').appendTo(newRow);
  222.                     if (options.showFilename) {
  223.                         finfo.append('<div class="filename">' + file.name + "</div>");
  224.                     }
  225.                     if (options.notAjax == false){
  226.                         var progress = $('<div class="progress"><div class="pkuppbr progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"></div></div>').appendTo(finfo);
  227.                         if (options.showPercent) {
  228.                             progress.find("div.progress-bar").text("0%");
  229.                         }
  230.                     }
  231.                     var dismiss = $('<div class="col-lg-2 col-md-2 col-xs-2"></div>').appendTo(newRow);
  232.                     $('<a href="javascript:void(0);" class="btn btn-danger pkdel">'+options.delfiletext+'</a>').appendTo(dismiss);
  233.                     break;
  234.  
  235.                   case false:
  236.                     var newRow = $('<div class="pekerow pkrw" rel="' + i + '"></div>').appendTo(this.container);
  237.                     if (options.showPreview) {
  238.                         var prev = $('<div class="pekeitem_preview"></div>').appendTo(newRow);
  239.                         this.previewFile(prev, file);
  240.                     }
  241.                     var finfo = $('<div class="file"></div>').appendTo(newRow);
  242.                     if (options.showFilename) {
  243.                         finfo.append('<div class="filename">' + file.name + "</div>");
  244.                     }
  245.                     if (options.notAjax == false){
  246.                         var progress = $('<div class="progress-pekeupload"><div class="pkuppbr bar-pekeupload pekeup-progress-bar" style="min-width: 2em;width:0%"><span></span></div></div>').appendTo(finfo);
  247.                         if (options.showPercent) {
  248.                             progress.find("div.bar-pekeupload").text("0%");
  249.                         }
  250.                     }
  251.                     var dismiss = $('<div class="pkdelfile"></div>').appendTo(newRow);
  252.                     $('<a href="javascript:void(0);" class="delbutton pkdel">'+options.delfiletext+'</a>').appendTo(dismiss);
  253.                     break;
  254.                 }
  255.             },
  256.             previewFile: function(container, file) {
  257.                 var type = file.type.split("/")[0];
  258.                 switch (type) {
  259.                   case "image":
  260.                     var fileUrl = window.URL.createObjectURL(file);
  261.                     var prev = $('<img class="thumbnail" src="' + fileUrl + '" height="64" />').appendTo(container);
  262.                     break;
  263.  
  264.                   case "video":
  265.                     var fileUrl = window.URL.createObjectURL(file);
  266.                     var prev = $('<video src="' + fileUrl + '" width="100%" controls></video>').appendTo(container);
  267.                     break;
  268.  
  269.                   case "audio":
  270.                     var fileUrl = window.URL.createObjectURL(file);
  271.                     var prev = $('<audio src="' + fileUrl + '" width="100%" controls></audio>').appendTo(container);
  272.                     break;
  273.  
  274.                   default:
  275.                     if (options.bootstrap) {
  276.                         var prev = $('<i class="glyphicon glyphicon-file"></i>').appendTo(container);
  277.                     } else {
  278.                         var prev = $('<div class="pekeupload-item-file"></div>').appendTo(container);
  279.                     }
  280.                     break;
  281.                 }
  282.             },
  283.             upload: function(file, pos) {
  284.                 var formData = new FormData();
  285.                 formData.append(this.obj.attr("name"), file);
  286.                 for (var key in options.data) {
  287.                     formData.append(key, options.data[key]);
  288.                 }
  289.                 $.ajax({
  290.                     url: options.url,
  291.                     type: "POST",
  292.                     data: formData,
  293.                     dataType: "json",
  294.                     success: function(data) {
  295.                         if (data == 1 || data.success == 1) {
  296.                             pekeUpload.files[pos] = null;
  297.                             $('div.row[rel="' + pos + '"]').find(".pkuppbr").css("width", "100%");
  298.                             options.onFileSuccess(file, data);
  299.                         } else {
  300.                             pekeUpload.files.splice(pos, 1);
  301.                             var err = null;
  302.                             if (error in data) {
  303.                                 err = null;
  304.                             } else {
  305.                                 err = options.errorOnResponse;
  306.                             }
  307.                             if (options.showErrorAlerts) {
  308.                                 pekeUpload.addWarning(err, $('div.row[rel="' + pos + '"]'));
  309.                             }
  310.                             $('div.row[rel="' + pos + '"]').remove();
  311.                             pekeUpload.hasErrors = true;
  312.                             options.onFileError(file, err);
  313.                         }
  314.                     },
  315.                     error: function(xhr, ajaxOptions, thrownError) {
  316.                         pekeUpload.files.splice(pos, 1);
  317.                         if (options.showErrorAlerts) {
  318.                             pekeUpload.addWarning(thrownError, $('div.pkrw[rel="' + pos + '"]'));
  319.                         }
  320.                         pekeUpload.hasErrors = true;
  321.                         options.onFileError(file, thrownError);
  322.                         $('div.pkrw[rel="' + pos + '"]').remove();
  323.                     },
  324.                     xhr: function() {
  325.                         myXhr = $.ajaxSettings.xhr();
  326.                         if (myXhr.upload) {
  327.                             myXhr.upload.addEventListener("progress", function(e) {
  328.                                 pekeUpload.handleProgress(e, pos);
  329.                             }, false);
  330.                         }
  331.                         return myXhr;
  332.                     },
  333.                     complete: function() {
  334.                         if (options.onSubmit) {
  335.                             pekeUpload.uploadedfiles++;
  336.                             if (pekeUpload.uploadedfiles == pekeUpload.files.length && pekeUpload.hasErrors == false) {
  337.                                 pekeUpload.obj.remove();
  338.                                 pekeUpload.obj.parent("form").submit();
  339.                             }
  340.                         }
  341.                     },
  342.                     cache: false,
  343.                     contentType: false,
  344.                     processData: false
  345.                 });
  346.             },
  347.             handleProgress: function(e, pos) {
  348.                 if (e.lengthComputable) {
  349.                     var total = e.total;
  350.                     var loaded = e.loaded;
  351.                     var percent = Number((e.loaded * 100 / e.total).toFixed(2));
  352.                     var progressbar = $('div.pkrw[rel="' + pos + '"]').find(".pkuppbr");
  353.                     progressbar.css("width", percent + "%");
  354.                     if (options.showPercent) {
  355.                         progressbar.text(percent + "%");
  356.                     }
  357.                 }
  358.             },
  359.             handleFormSubmission: function() {
  360.                 var form = this.obj.parent("form");
  361.                 form.submit(function() {
  362.                     pekeUpload.hasErrors = false;
  363.                     pekeUpload.uploadedfiles = 0;
  364.                     for (var i = 0; i < pekeUpload.files.length; i++) {
  365.                         if (pekeUpload.files[i]) {
  366.                             pekeUpload.upload(pekeUpload.files[i], i);
  367.                         } else {
  368.                             pekeUpload.uploadedfiles++;
  369.                             if (pekeUpload.uploadedfiles == pekeUpload.files.length && pekeUpload.hasErrors == false) {
  370.                                 pekeUpload.obj.remove();
  371.                                 return true;
  372.                             }
  373.                         }
  374.                     }
  375.                     return false;
  376.                 });
  377.             },
  378.             delAndRearrange: function(parent){
  379.                 var id = parent.attr('rel');
  380.                 pekeUpload.files.splice(parseInt(id), 1);
  381.                 parent.remove();
  382.                 pekeUpload.container.find('div.pkrw').each(function(index){
  383.                     $(this).attr('rel',index);
  384.                 });
  385.             }
  386.         };
  387.         pekeUpload.init();
  388.     };
  389. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.