From fd562533fe046be1a2f148b99465bba547dffdd1 Mon Sep 17 00:00:00 2001 From: zorg Date: Thu, 7 May 2015 13:48:44 +0500 Subject: [PATCH 01/18] Optimization of multiple uploads file for ASP.NET MVC and localization of message "Remove this file" --- README.md | 4 ++++ jquery.simpleFilePreview.js | 13 +++++++++++-- jquery.simpleFilePreview.min.js | 2 +- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4bc1ea9..395ff6f 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,10 @@ simple and the UI allows for easy CSS styling. (default value includes most common file types in this format: {'png': 'preview_png.png', ...} 'limit': INTEGER On multiple files, set a limit +'removeMessagePrefix': STRING Prefix for remove message + (defaults to "Remove") +'removeMessageStub': STRING Stub instead of the file name for remove message + (defaults to "this file") ``` ### Basic Usage diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index e4f0d0a..e0f32e8 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -34,6 +34,8 @@ $('input[type=file]').simpleFilePreview({ 'defaultIcon': 'preview_file.png', // String The file name to use for the defualt preview icon (when a proper file-type-specific icon cannot be found) 'icons': {'png': 'preview_png.png', ...} // Object A mapping of file type (second half of mime type) to icon image file (used in combination with the "iconPath" option) 'limit': 0 // Limit files on multiple option + 'removeMessagePrefix': 'Remove' // Prefix for remove message + 'removeMessageStub': 'this file' // Stub instead of the file name for remove message }); * * TODO: @@ -100,6 +102,11 @@ $('input[type=file]').simpleFilePreview({ $newN.find('input.simpleFilePreview_formInput') .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) + .attr('name', function (index, previousValue) { + var previousName = $parents.find('input.simpleFilePreview_formInput').attr('name'); + var inputIndex = parseInt(previousName.substring(previousName.indexOf('[') + 1, previousName.indexOf(']'))); + return (!isNaN(inputIndex)) ? previousName.substring(0, previousName.indexOf('[') + 1) + ++inputIndex + previousName.substring(previousName.indexOf(']')) : previousValue; + }) .val(''); $parents.after($newN); @@ -399,10 +406,10 @@ $('input[type=file]').simpleFilePreview({ $parents.append("" + (filename ? filename : "); + + " title='" + options.removeMessagePrefix + ' ' + (filename ? filename : options.removeMessageStub) + "' />"); // for tooltips - $parents.find('input.simpleFilePreview_formInput').attr('title', "Remove " + (filename ? filename : 'this file')); + $parents.find('input.simpleFilePreview_formInput').attr('title', options.removeMessagePrefix + " " + (filename ? filename : options.removeMessageStub)); } limit($parents, options); @@ -452,6 +459,8 @@ $('input[type=file]').simpleFilePreview({ 'iconPath': '', 'defaultIcon': 'preview_file.png', 'limit': 0, + 'removeMessagePrefix': 'Remove', + 'removeMessageStub': 'this file', 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 4a87b07..9184bb8 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(a){"use strict";a.fn.simpleFilePreview=function(g){if(!this||!this.length)return this;if(g=g?g:{},g=a.extend({},a.simpleFilePreview.defaults,g),this.each(function(){c(a(this),g)}),a.simpleFilePreview.init)return this;var h=a("body");return a.simpleFilePreview.init=!0,h.on("click",".simpleFilePreview_input",function(b){a(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),b.preventDefault()}),h.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(b){return a(this).val().length?(a(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void b.preventDefault()):this}),h.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(b){var c=a(this).closest(".simpleFilePreview");if(1==c.attr("data-sfpallowmultiple")&&!c.find(".simpleFilePreview_preview").length){var h=a.simpleFilePreview.uid++,i=c.clone(!0).attr("id","simpleFilePreview_"+h);i.find("input.simpleFilePreview_formInput").attr("id",i.find("input.simpleFilePreview_formInput").attr("id")+"_"+h).val(""),c.after(i);var j=c.closest(".simpleFilePreview_multi").width("+="+i.outerWidth(!0)).width();j>c.closest(".simpleFilePreview_multiClip").width()&&c.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var k=new RegExp("^image/("+a.simpleFilePreview.previewFileTypes+")$");if(k.test(this.files[0].type.toLowerCase())&&window.FileReader){var l=new FileReader;l.onload=function(a){d(c,a.target.result,"",g)},l.readAsDataURL(this.files[0])}else{var m=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);m&&m[1]&&g.icons[m[1]]?d(c,g.icons[m[1]],e(this.value),g):d(c,g.defaultIcon,e(this.value),g)}return this}var k=new RegExp("^("+a.simpleFilePreview.previewFileTypes+")$"),n=f(this.value);n=n?n.toLowerCase():null,n&&!/fakepath/.test(this.value.toLowerCase())&&k.test(b)?d(c,"file://"+this.value,"",g):g.icons[n]?d(c,g.icons[n],e(this.value),g):d(c,g.defaultIcon,e(this.value),g)}),h.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){var b=a(this).closest(".simpleFilePreview");b.find(".simpleFilePreview_preview").is(":visible")&&b.find(".simpleFilePreview_remove").show()}),h.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){a(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),h.on("click",".simpleFilePreview_preview",function(){var c=a(this),d=c.closest(".simpleFilePreview");if(1==d.attr("data-sfpallowmultiple")&&d.siblings(".simpleFilePreview").length)return d.hasClass("simpleFilePreview_existing")&&d.parent().append(""),b(c,g,1),d.closest(".simpleFilePreview_multi").width("-="+d.width()),d.remove(),this;d.hasClass("simpleFilePreview_existing")&&(d.find("input.simpleFilePreview_formInput").show(),d.append(""),d.removeClass("simpleFilePreview_existing")),b(c,g,1);var e=d.find("input.simpleFilePreview_formInput").val("");if(e&&e.length&&e.val().length){for(var f=e.get(0).attributes,h="",i=0,j=f.length;i'),e.remove()}c.remove(),d.find(".simpleFilePreview_filename").remove(),d.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}),h.on("click",".simpleFilePreview_shiftRight",function(){var b=a(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),c=parseInt(b.css("left"))+b.width();if(c>b.parent().width()){var d=b.find("li:first");b.animate({left:"-="+d.outerWidth(!0)})}}),h.on("click",".simpleFilePreview_shiftLeft",function(){var b=a(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),c=parseInt(b.css("left"));if(c<0){var d=b.find("li:first").outerWidth(!0);b.animate({left:c+d<1?"+="+d:0})}}),this};var b=function(a,b,c){if(!b.limit)return!1;var d=a.closest(".simpleFilePreview_multi").find("> li");c=c?c:0,d.length>b.limit+c?d.last().hide():d.last().show()},c=function(b,c){var g=b.is("[multiple]");b=b.removeAttr("multiple").addClass("simpleFilePreview_formInput");var h=a("<"+(g?"li":"div")+" id='simpleFilePreview_"+a.simpleFilePreview.uid++ +"' class='simpleFilePreview' data-sfpallowmultiple='"+(g?1:0)+"'>"+c.buttonContent+""+c.removeContent+"");b.before(h),h.append(b),b.css({width:h.width()+"px",height:h.height()+"px"}),g&&(h.wrap("
    "),h.closest(".simpleFilePreview_multiUI").prepend(""+c.shiftRight+"").append(""+c.shiftLeft+""));var i=c.existingFiles;if(!i)return g&&a(".simpleFilePreview_multi").width(h.outerWidth(!0)*h.parent().find(".simpleFilePreview").length),b;var j=new RegExp("^("+a.simpleFilePreview.previewFileTypes+")$");if(g){var k=a.isArray(i)?1:0;for(var l in i){var m=a.simpleFilePreview.uid++,n=h.clone(!0).attr("id","simpleFilePreview_"+m);n.addClass("simpleFilePreview_existing").attr("data-sfprid",k?i[l]:l).find("input.simpleFilePreview_formInput").remove(),h.before(n);var o=f(i[l]);o=o?o.toLowerCase():null,o&&j.test(o)?d(n,i[l],"",c):c.icons[o]?d(n,c.icons[o],e(i[l]),c):d(n,c.defaultIcon,e(i[l]),c)}return a(".simpleFilePreview_multi").width(h.outerWidth(!0)*h.parent().find(".simpleFilePreview").length),b}var p=null,k=a.isArray(i)?1:0;for(var l in i)p={id:k?i[l]:l,file:i[l]};if(!p)return b;h.attr("data-sfprid",p.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var o=f(p.file);return o=o?o.toLowerCase():null,o&&j.test(o)?d(h,p.file,"",c):c.icons[o]?d(h,c.icons[o],e(p.file),c):d(h,c.defaultIcon,e(p.file),c),b},d=function(a,c,d,e){d=d?d:null,c=(new RegExp("[/\\\\]").test(c)?"":e.iconPath)+c,a.find(".simpleFilePreview_input").hide();var f=a.find(".simpleFilePreview_preview");if(f&&f.length?f.attr("src",c):(a.append(""+(d?d:"File Preview")+""),a.find("input.simpleFilePreview_formInput").attr("title","Remove "+(d?d:"this file"))),b(a,e),!d)return null;var g=a.find(".simpleFilePreview_filename");g&&g.length?g.text(d):a.append(""+d+"").find(".simpleFilePreview_filename")},e=function(a){var b=a.match(/[\/\\]([^\/\\]+)$/);return b&&b[1]&&b[1].length?b[1]:null},f=function(a){var b=a.match(/[\.]([^\/\\\.]+)$/);return b&&b[1]&&b[1].length?b[1]:null};a.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,v=l.clone(!0).attr("id","simpleFilePreview_"+n);v.find("input.simpleFilePreview_formInput").attr("id",v.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),s=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(s)?i:t.substring(0,t.indexOf("[")+1)+ ++s+t.substring(t.indexOf("]"))}).val(""),l.after(v);var a=l.closest(".simpleFilePreview_multi").width("+="+v.outerWidth(!0)).width();a>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(l,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var o=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);o&&o[1]&&p.icons[o[1]]?t(l,p.icons[o[1]],s(this.value),p):t(l,p.defaultIcon,s(this.value),p)}return this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),f=r(this.value);f=f?f.toLowerCase():null,f&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[f]?t(l,p.icons[f],s(this.value),p):t(l,p.defaultIcon,s(this.value),p)}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var s=t.find("input.simpleFilePreview_formInput").val("");if(s&&s.length&&s.val().length){for(var r=s.get(0).attributes,n="",v=0,a=r.length;a>v;++v)"value"!=r[v].name&&"title"!=r[v].name&&(n+=r[v].name+"='"+s.attr(r[v].name)+"' ");s.before(''),s.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput");var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+"");i.before(n),n.append(i),i.css({width:n.width()+"px",height:n.height()+"px"}),p&&(n.wrap("
      "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var v=l.existingFiles;if(!v)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var a=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(v)?1:0;for(var w in v){var o=e.simpleFilePreview.uid++,f=n.clone(!0).attr("id","simpleFilePreview_"+o);f.addClass("simpleFilePreview_existing").attr("data-sfprid",m?v[w]:w).find("input.simpleFilePreview_formInput").remove(),n.before(f);var u=r(v[w]);u=u?u.toLowerCase():null,u&&a.test(u)?t(f,v[w],"",l):l.icons[u]?t(f,l.icons[u],s(v[w]),l):t(f,l.defaultIcon,s(v[w]),l)}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i}var d=null,m=e.isArray(v)?1:0;for(var w in v)d={id:m?v[w]:w,file:v[w]};if(!d)return i;n.attr("data-sfprid",d.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var u=r(d.file);return u=u?u.toLowerCase():null,u&&a.test(u)?t(n,d.file,"",l):l.icons[u]?t(n,l.icons[u],s(d.file),l):t(n,l.defaultIcon,s(d.file),l),i},t=function(e,l,t,s){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":s.iconPath)+l,e.find(".simpleFilePreview_input").hide();var r=e.find(".simpleFilePreview_preview");if(r&&r.length?r.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",s.removeMessagePrefix+" "+(t?t:s.removeMessageStub))),i(e,s),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},r=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From 733633e10238a96ad68ae78fedb18c3ca5346e80 Mon Sep 17 00:00:00 2001 From: zorg Date: Fri, 8 May 2015 12:42:36 +0500 Subject: [PATCH 02/18] Add the radio buttons to mark one of the files --- README.md | 2 ++ jquery.simpleFilePreview.js | 21 ++++++++++++++++----- jquery.simpleFilePreview.min.js | 2 +- simpleFilePreview.css | 14 ++++++++++++-- simpleFilePreview.min.css | 2 +- 5 files changed, 32 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 395ff6f..f2c5308 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,8 @@ simple and the UI allows for easy CSS styling. (defaults to "Remove") 'removeMessageStub': STRING Stub instead of the file name for remove message (defaults to "this file") +'radioName': STRING Display the radio buttons (if necessary) to mark one of the files + (defaults to null (no display the radio buttons)) ``` ### Basic Usage diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index e0f32e8..cfed379 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -36,6 +36,7 @@ $('input[type=file]').simpleFilePreview({ 'limit': 0 // Limit files on multiple option 'removeMessagePrefix': 'Remove' // Prefix for remove message 'removeMessageStub': 'this file' // Stub instead of the file name for remove message + 'radioName': STRING // Display the radio buttons (if necessary) to mark one of the files }); * * TODO: @@ -72,14 +73,14 @@ $('input[type=file]').simpleFilePreview({ $.simpleFilePreview.init = true; // open file browser dialog on click of styled "button" - $body.on('click', '.simpleFilePreview_input', function(e) { + $body.on('click', '.simpleFilePreview_input', function (e) { $(this).closest('.simpleFilePreview').find('input.simpleFilePreview_formInput').trigger('click'); e.preventDefault(); }); // on click of the actual input (which is invisible), check to see if // we need to clear the input (which is the default action for this plugin) - $body.on('click', '.simpleFilePreview input.simpleFilePreview_formInput', function(e) { + $body.on('click', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { if (!$(this).val().length) { return this; } @@ -116,6 +117,10 @@ $('input[type=file]').simpleFilePreview({ if (nw > $parents.closest('.simpleFilePreview_multiClip').width()) { $parents.closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_shiftRight').trigger('click'); } + + if (options.radioName) { + $parents.find('input.simpleFilePreview_radio').val($newN.context.files[0].name); + } } if (this.files && this.files[0]) { @@ -291,10 +296,11 @@ $('input[type=file]').simpleFilePreview({ // wrap input with necessary structure var $html = $("<" + (isMulti ? 'li' : 'div') + " id='simpleFilePreview_" + ($.simpleFilePreview.uid++) + "'" - + " class='simpleFilePreview' data-sfpallowmultiple='" + (isMulti ? 1 : 0) + "'>" + + " class='simpleFilePreview" + ((options.radioName) ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (isMulti ? 1 : 0) + "'>" + "" + options.buttonContent + "" + "" + options.removeContent + "" + + ((options.radioName) ? "" : "") + ""); these.before($html); @@ -304,12 +310,12 @@ $('input[type=file]').simpleFilePreview({ // opacity 0, and z-indexed above other elements within the preview container these.css({ width: ($html.width() + 'px'), - height: ($html.height() + 'px') + height: (($html.height() - ((options.radioName) ? 20 : 0)) + 'px') }); // if it's a multi-select we use multiple separate inputs instead to support file preview if (isMulti) { - $html.wrap("
        "); + $html.wrap("
          "); $html.closest('.simpleFilePreview_multiUI') .prepend("" + options.shiftRight + "") .append("" + options.shiftLeft + ""); @@ -351,6 +357,10 @@ $('input[type=file]').simpleFilePreview({ } else { addOrChangePreview(nn, options.defaultIcon, getFilename(exists[i]), options); } + + if (options.radioName) { + nn.find('input.simpleFilePreview_radio').val(nn.attr('data-sfprid')); + } } $('.simpleFilePreview_multi').width($html.outerWidth(true) * $html.parent().find('.simpleFilePreview').length); @@ -461,6 +471,7 @@ $('input[type=file]').simpleFilePreview({ 'limit': 0, 'removeMessagePrefix': 'Remove', 'removeMessageStub': 'this file', + 'radioName': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 9184bb8..aaa0eb4 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,v=l.clone(!0).attr("id","simpleFilePreview_"+n);v.find("input.simpleFilePreview_formInput").attr("id",v.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),s=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(s)?i:t.substring(0,t.indexOf("[")+1)+ ++s+t.substring(t.indexOf("]"))}).val(""),l.after(v);var a=l.closest(".simpleFilePreview_multi").width("+="+v.outerWidth(!0)).width();a>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(l,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var o=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);o&&o[1]&&p.icons[o[1]]?t(l,p.icons[o[1]],s(this.value),p):t(l,p.defaultIcon,s(this.value),p)}return this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),f=r(this.value);f=f?f.toLowerCase():null,f&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[f]?t(l,p.icons[f],s(this.value),p):t(l,p.defaultIcon,s(this.value),p)}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var s=t.find("input.simpleFilePreview_formInput").val("");if(s&&s.length&&s.val().length){for(var r=s.get(0).attributes,n="",v=0,a=r.length;a>v;++v)"value"!=r[v].name&&"title"!=r[v].name&&(n+=r[v].name+"='"+s.attr(r[v].name)+"' ");s.before(''),s.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput");var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+"");i.before(n),n.append(i),i.css({width:n.width()+"px",height:n.height()+"px"}),p&&(n.wrap("
            "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var v=l.existingFiles;if(!v)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var a=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(v)?1:0;for(var w in v){var o=e.simpleFilePreview.uid++,f=n.clone(!0).attr("id","simpleFilePreview_"+o);f.addClass("simpleFilePreview_existing").attr("data-sfprid",m?v[w]:w).find("input.simpleFilePreview_formInput").remove(),n.before(f);var u=r(v[w]);u=u?u.toLowerCase():null,u&&a.test(u)?t(f,v[w],"",l):l.icons[u]?t(f,l.icons[u],s(v[w]),l):t(f,l.defaultIcon,s(v[w]),l)}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i}var d=null,m=e.isArray(v)?1:0;for(var w in v)d={id:m?v[w]:w,file:v[w]};if(!d)return i;n.attr("data-sfprid",d.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var u=r(d.file);return u=u?u.toLowerCase():null,u&&a.test(u)?t(n,d.file,"",l):l.icons[u]?t(n,l.icons[u],s(d.file),l):t(n,l.defaultIcon,s(d.file),l),i},t=function(e,l,t,s){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":s.iconPath)+l,e.find(".simpleFilePreview_input").hide();var r=e.find(".simpleFilePreview_preview");if(r&&r.length?r.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",s.removeMessagePrefix+" "+(t?t:s.removeMessageStub))),i(e,s),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},r=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,v=l.clone(!0).attr("id","simpleFilePreview_"+n);v.find("input.simpleFilePreview_formInput").attr("id",v.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(r)?i:t.substring(0,t.indexOf("[")+1)+ ++r+t.substring(t.indexOf("]"))}).val(""),l.after(v);var a=l.closest(".simpleFilePreview_multi").width("+="+v.outerWidth(!0)).width();a>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click"),p.radioName&&l.find("input.simpleFilePreview_radio").val(v.context.files[0].name)}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(l,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var o=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);o&&o[1]&&p.icons[o[1]]?t(l,p.icons[o[1]],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}return this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),f=s(this.value);f=f?f.toLowerCase():null,f&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[f]?t(l,p.icons[f],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",v=0,a=s.length;a>v;++v)"value"!=s[v].name&&"title"!=s[v].name&&(n+=s[v].name+"='"+r.attr(s[v].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput");var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(n),n.append(i),i.css({width:n.width()+"px",height:n.height()-(l.radioName?20:0)+"px"}),p&&(n.wrap("
              "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var v=l.existingFiles;if(!v)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var a=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(v)?1:0;for(var w in v){var o=e.simpleFilePreview.uid++,f=n.clone(!0).attr("id","simpleFilePreview_"+o);f.addClass("simpleFilePreview_existing").attr("data-sfprid",m?v[w]:w).find("input.simpleFilePreview_formInput").remove(),n.before(f);var d=s(v[w]);d=d?d.toLowerCase():null,d&&a.test(d)?t(f,v[w],"",l):l.icons[d]?t(f,l.icons[d],r(v[w]),l):t(f,l.defaultIcon,r(v[w]),l),l.radioName&&f.find("input.simpleFilePreview_radio").val(f.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i}var u=null,m=e.isArray(v)?1:0;for(var w in v)u={id:m?v[w]:w,file:v[w]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var d=s(u.file);return d=d?d.toLowerCase():null,d&&a.test(d)?t(n,u.file,"",l):l.icons[d]?t(n,l.icons[d],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file diff --git a/simpleFilePreview.css b/simpleFilePreview.css index 3a5b4c9..b43a9e6 100644 --- a/simpleFilePreview.css +++ b/simpleFilePreview.css @@ -44,7 +44,6 @@ background-color: #f7f7f7; text-align: center; cursor: pointer; - overflow: hidden; box-shadow: 0 0 4px 0 #555; } @@ -65,7 +64,7 @@ background-color: #ddd; } -.simpleFilePreview input { +.simpleFilePreview input[type="file"] { position: absolute; top: 0; right: 0; @@ -105,3 +104,14 @@ right: 5px; z-index: 4; } + +.simpleFilePreview_withRadio { + height: 140px; +} + +.simpleFilePreview_radio { + position: absolute; + top: 110px; + right: 48px; + z-index: 4; +} \ No newline at end of file diff --git a/simpleFilePreview.min.css b/simpleFilePreview.min.css index 83064fa..9a8155e 100644 --- a/simpleFilePreview.min.css +++ b/simpleFilePreview.min.css @@ -1 +1 @@ -.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;overflow:hidden;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4} \ No newline at end of file +.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4} \ No newline at end of file From 1be8d17245e392219e6d449a8b6648674c9db711 Mon Sep 17 00:00:00 2001 From: zorg Date: Fri, 8 May 2015 17:32:34 +0500 Subject: [PATCH 03/18] Read only mode and preselect radiobutton --- README.md | 6 +- jquery.simpleFilePreview.js | 259 ++++++++++++++++++-------------- jquery.simpleFilePreview.min.js | 2 +- simpleFilePreview.css | 5 + simpleFilePreview.min.css | 2 +- 5 files changed, 158 insertions(+), 116 deletions(-) diff --git a/README.md b/README.md index f2c5308..29557cc 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,12 @@ simple and the UI allows for easy CSS styling. (defaults to "Remove") 'removeMessageStub': STRING Stub instead of the file name for remove message (defaults to "this file") -'radioName': STRING Display the radio buttons (if necessary) to mark one of the files +'radioName': STRING Display the radio buttons (if necessary) to mark one of the files (only multiple mode). Name of radio button elements (defaults to null (no display the radio buttons)) +'radioCheckedItem': STRING Preselect radio button + (defaults to null) +'readOnly': BOOLEAN Display with no possibility of modification + (defaults to false) ``` ### Basic Usage diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index cfed379..31b3258 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -1,7 +1,7 @@ /* Copyright (c) 2012 Jordan Kasper * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * Copyright notice and license must remain intact for legal use -* Requires: jQuery 1.2+ +* Requires: jQuery 1.7+ * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF @@ -36,7 +36,9 @@ $('input[type=file]').simpleFilePreview({ 'limit': 0 // Limit files on multiple option 'removeMessagePrefix': 'Remove' // Prefix for remove message 'removeMessageStub': 'this file' // Stub instead of the file name for remove message - 'radioName': STRING // Display the radio buttons (if necessary) to mark one of the files + 'radioName': null // Display the radio buttons (if necessary) to mark one of the files (only multiple mode) + 'radioCheckedItem': null // Preselect radio button + 'readOnly': false // Display with no possibility of modification }); * * TODO: @@ -59,6 +61,12 @@ $('input[type=file]').simpleFilePreview({ options = options ? options : {}; options = $.extend({}, $.simpleFilePreview.defaults, options); + // read only mode and radio button incompatible + if (options.readOnly) { + options.radioName = null; + options.radioCheckedItem = null; + } + this.each(function() { setup($(this), options); }); @@ -85,102 +93,108 @@ $('input[type=file]').simpleFilePreview({ return this; } - $(this).closest('.simpleFilePreview').find('.simpleFilePreview_preview').trigger('click'); + if (!options.readOnly) { + $(this).closest('.simpleFilePreview').find('.simpleFilePreview_preview').trigger('click'); + } e.preventDefault(); }); // when file input changes, get file contents and show preview (if it's an image) - $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function(e) { - var $parents = $(this).closest('.simpleFilePreview'); - - // if it's a multi-select, add another selection box to the end - // NOTE: this is done first since we clone the previous input - // NOTE: the second check is there because IE 8 fires multiple change events for no good reason - if (($parents.attr('data-sfpallowmultiple') == 1) && !$parents.find('.simpleFilePreview_preview').length) { - var newId = $.simpleFilePreview.uid++; - var $newN = $parents.clone(true).attr('id', "simpleFilePreview_" + newId); - - $newN.find('input.simpleFilePreview_formInput') - .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) - .attr('name', function (index, previousValue) { - var previousName = $parents.find('input.simpleFilePreview_formInput').attr('name'); - var inputIndex = parseInt(previousName.substring(previousName.indexOf('[') + 1, previousName.indexOf(']'))); - return (!isNaN(inputIndex)) ? previousName.substring(0, previousName.indexOf('[') + 1) + ++inputIndex + previousName.substring(previousName.indexOf(']')) : previousValue; - }) - .val(''); - - $parents.after($newN); - - var nw = $parents.closest('.simpleFilePreview_multi').width('+=' + $newN.outerWidth(true)).width(); - - if (nw > $parents.closest('.simpleFilePreview_multiClip').width()) { - $parents.closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_shiftRight').trigger('click'); - } - - if (options.radioName) { - $parents.find('input.simpleFilePreview_radio').val($newN.context.files[0].name); + $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { + if (!options.readOnly) { + var $parents = $(this).closest('.simpleFilePreview'); + + // if it's a multi-select, add another selection box to the end + // NOTE: this is done first since we clone the previous input + // NOTE: the second check is there because IE 8 fires multiple change events for no good reason + if (($parents.attr('data-sfpallowmultiple') == 1) && !$parents.find('.simpleFilePreview_preview').length) { + var newId = $.simpleFilePreview.uid++; + var $newN = $parents.clone(true).attr('id', "simpleFilePreview_" + newId); + + $newN.find('input.simpleFilePreview_formInput') + .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) + .attr('name', function (index, previousValue) { + var previousName = $parents.find('input.simpleFilePreview_formInput').attr('name'); + var inputIndex = parseInt(previousName.substring(previousName.indexOf('[') + 1, previousName.indexOf(']'))); + return (!isNaN(inputIndex)) ? previousName.substring(0, previousName.indexOf('[') + 1) + ++inputIndex + previousName.substring(previousName.indexOf(']')) : previousValue; + }) + .val(''); + + $parents.after($newN); + + var nw = $parents.closest('.simpleFilePreview_multi').width('+=' + $newN.outerWidth(true)).width(); + + if (nw > $parents.closest('.simpleFilePreview_multiClip').width()) { + $parents.closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_shiftRight').trigger('click'); + } } - } - if (this.files && this.files[0]) { - var exp = new RegExp("^image\/(" + $.simpleFilePreview.previewFileTypes + ")$"); + if (this.files && this.files[0]) { + var exp = new RegExp("^image\/(" + $.simpleFilePreview.previewFileTypes + ")$"); - if (exp.test(this.files[0].type.toLowerCase()) && window.FileReader) { - // show preview of image file - var $FR = new FileReader(); + if (exp.test(this.files[0].type.toLowerCase()) && window.FileReader) { + // show preview of image file + var $FR = new FileReader(); - $FR.onload = function(e) { - addOrChangePreview($parents, e.target.result, '', options); - }; + $FR.onload = function (e) { + addOrChangePreview($parents, e.target.result, '', options); + }; - $FR.readAsDataURL(this.files[0]); - } else { - // show icon if not an image upload - var m = this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); - - if (m && m[1] && options.icons[m[1]]) { - addOrChangePreview($parents, options.icons[m[1]], getFilename(this.value), options); + $FR.readAsDataURL(this.files[0]); } else { - addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); + // show icon if not an image upload + var m = this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); + + if (m && m[1] && options.icons[m[1]]) { + addOrChangePreview($parents, options.icons[m[1]], getFilename(this.value), options); + } else { + addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); + } } - } - return this; - } + if (options.radioName) { + $parents.find('input.simpleFilePreview_radio').val($parents.context.files[0].name); + } - // Any browser not supporting the File API (and FileReader) + return this; + } - // Some versions of IE don't have real paths, and can't support - // any other way to do file preview without uploading to the server - // If a browser does report a valid path (IE or otherwise), then - // we'll try to get the file preview + // Any browser not supporting the File API (and FileReader) - var exp = new RegExp("^(" + $.simpleFilePreview.previewFileTypes + ")$"); + // Some versions of IE don't have real paths, and can't support + // any other way to do file preview without uploading to the server + // If a browser does report a valid path (IE or otherwise), then + // we'll try to get the file preview - var ext = getFileExt(this.value); - ext = ext ? ext.toLowerCase() : null; + var exp = new RegExp("^(" + $.simpleFilePreview.previewFileTypes + ")$"); - if (ext && !(/fakepath/.test(this.value.toLowerCase())) && exp.test(e)) { - // older versions of IE (and some other browsers) report the local - // file path, so try to get a preview that way - addOrChangePreview($parents, "file://" + this.value, '', options); - } else { - // not an image (or using fakepath), so no preview anyway - if (options.icons[ext]) { - addOrChangePreview($parents, options.icons[ext], getFilename(this.value), options); + var ext = getFileExt(this.value); + ext = ext ? ext.toLowerCase() : null; + + if (ext && !(/fakepath/.test(this.value.toLowerCase())) && exp.test(e)) { + // older versions of IE (and some other browsers) report the local + // file path, so try to get a preview that way + addOrChangePreview($parents, "file://" + this.value, '', options); } else { - addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); + // not an image (or using fakepath), so no preview anyway + if (options.icons[ext]) { + addOrChangePreview($parents, options.icons[ext], getFilename(this.value), options); + } else { + addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); + } } } }); // show or hide "remove" icon for file preview/icon - $body.on('mouseover', '.simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput', function() { - var $parents = $(this).closest('.simpleFilePreview'); + $body.on('mouseover', '.simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput', function () { + if (!options.readOnly) { + var $parents = $(this).closest('.simpleFilePreview'); - if ($parents.find('.simpleFilePreview_preview').is(':visible')) { - $parents.find('.simpleFilePreview_remove').show(); + if ($parents.find('.simpleFilePreview_preview').is(':visible')) { + $parents.find('.simpleFilePreview_remove').show(); + } } }); @@ -189,58 +203,60 @@ $('input[type=file]').simpleFilePreview({ }) // remove file when preview/icon is clicked - $body.on('click', '.simpleFilePreview_preview', function() { - var $this = $(this); - var $parents = $this.closest('.simpleFilePreview'); - - if ($parents.attr('data-sfpallowmultiple') == 1 && $parents.siblings('.simpleFilePreview').length) { - if ($parents.hasClass('simpleFilePreview_existing')) { - $parents.parent().append(""); - } + $body.on('click', '.simpleFilePreview_preview', function () { + if (!options.readOnly) { + var $this = $(this); + var $parents = $this.closest('.simpleFilePreview'); + + if ($parents.attr('data-sfpallowmultiple') == 1 && $parents.siblings('.simpleFilePreview').length) { + if ($parents.hasClass('simpleFilePreview_existing')) { + $parents.parent().append(""); + } - limit($this, options, 1); + limit($this, options, 1); - $parents.closest('.simpleFilePreview_multi').width('-=' + $parents.width()); - $parents.remove(); + $parents.closest('.simpleFilePreview_multi').width('-=' + $parents.width()); + $parents.remove(); - return this; - } + return this; + } - // if it was an existing file, show file input and add "removeFiles" hidden input - if ($parents.hasClass('simpleFilePreview_existing')) { - $parents.find('input.simpleFilePreview_formInput').show(); - $parents.append(""); - $parents.removeClass('simpleFilePreview_existing'); // no longer needed - } + // if it was an existing file, show file input and add "removeFiles" hidden input + if ($parents.hasClass('simpleFilePreview_existing')) { + $parents.find('input.simpleFilePreview_formInput').show(); + $parents.append(""); + $parents.removeClass('simpleFilePreview_existing'); // no longer needed + } - limit($this, options, 1); + limit($this, options, 1); - // kill value in the input - var $input = $parents.find('input.simpleFilePreview_formInput').val(''); + // kill value in the input + var $input = $parents.find('input.simpleFilePreview_formInput').val(''); - // Some browsers (*cough*IE*cough*) do not allow us to set val() - // on a file input, so we have to clone it without the value - if ($input && $input.length && $input.val().length) { - var attr = $input.get(0).attributes; - var a = ""; + // Some browsers (*cough*IE*cough*) do not allow us to set val() + // on a file input, so we have to clone it without the value + if ($input && $input.length && $input.val().length) { + var attr = $input.get(0).attributes; + var a = ""; - for (var j = 0, l = attr.length; j < l; ++j) { - if (attr[j].name != 'value' && attr[j].name != 'title') { - a += attr[j].name + "='" + $input.attr(attr[j].name) + "' "; + for (var j = 0, l = attr.length; j < l; ++j) { + if (attr[j].name != 'value' && attr[j].name != 'title') { + a += attr[j].name + "='" + $input.attr(attr[j].name) + "' "; + } } - } - $input.before(''); - $input.remove(); - } + $input.before(''); + $input.remove(); + } - // remove the preview element - $this.remove(); - $parents.find('.simpleFilePreview_filename').remove(); + // remove the preview element + $this.remove(); + $parents.find('.simpleFilePreview_filename').remove(); - // show styled input "button" - $parents.find('.simpleFilePreview_remove').hide().end() - .find('.simpleFilePreview_input').show(); + // show styled input "button" + $parents.find('.simpleFilePreview_remove').hide().end() + .find('.simpleFilePreview_input').show(); + } }); // shift buttons for multi-selects @@ -293,6 +309,12 @@ $('input[type=file]').simpleFilePreview({ // "multiple" removed because it's handled later manually these = these.removeAttr('multiple').addClass('simpleFilePreview_formInput'); + // multiple mode and radio button incompatible + if (!isMulti) { + options.radioName = null; + options.radioCheckedItem = null; + } + // wrap input with necessary structure var $html = $("<" + (isMulti ? 'li' : 'div') + " id='simpleFilePreview_" + ($.simpleFilePreview.uid++) + "'" @@ -306,6 +328,10 @@ $('input[type=file]').simpleFilePreview({ these.before($html); $html.append(these); + if (options.readOnly) { + $html.hide(); + } + // mostly for IE, the file input must be sized the same as the container, // opacity 0, and z-indexed above other elements within the preview container these.css({ @@ -344,6 +370,7 @@ $('input[type=file]').simpleFilePreview({ nn.addClass('simpleFilePreview_existing') .attr('data-sfprid', arr ? exists[i] : i) .find('input.simpleFilePreview_formInput').remove(); + nn.show(); $html.before(nn); @@ -365,6 +392,10 @@ $('input[type=file]').simpleFilePreview({ $('.simpleFilePreview_multi').width($html.outerWidth(true) * $html.parent().find('.simpleFilePreview').length); + if (options.radioName) { + $html.closest('.simpleFilePreview_multi').find("input[type='radio'][value='" + options.radioCheckedItem + "']").prop("checked", true); + } + return these; } @@ -472,6 +503,8 @@ $('input[type=file]').simpleFilePreview({ 'removeMessagePrefix': 'Remove', 'removeMessageStub': 'this file', 'radioName': null, + 'radioCheckedItem': null, + 'readOnly': false, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index aaa0eb4..e3341c8 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,v=l.clone(!0).attr("id","simpleFilePreview_"+n);v.find("input.simpleFilePreview_formInput").attr("id",v.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(r)?i:t.substring(0,t.indexOf("[")+1)+ ++r+t.substring(t.indexOf("]"))}).val(""),l.after(v);var a=l.closest(".simpleFilePreview_multi").width("+="+v.outerWidth(!0)).width();a>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click"),p.radioName&&l.find("input.simpleFilePreview_radio").val(v.context.files[0].name)}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(l,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var o=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);o&&o[1]&&p.icons[o[1]]?t(l,p.icons[o[1]],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}return this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),f=s(this.value);f=f?f.toLowerCase():null,f&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[f]?t(l,p.icons[f],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",v=0,a=s.length;a>v;++v)"value"!=s[v].name&&"title"!=s[v].name&&(n+=s[v].name+"='"+r.attr(s[v].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput");var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(n),n.append(i),i.css({width:n.width()+"px",height:n.height()-(l.radioName?20:0)+"px"}),p&&(n.wrap("
                "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var v=l.existingFiles;if(!v)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var a=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(v)?1:0;for(var w in v){var o=e.simpleFilePreview.uid++,f=n.clone(!0).attr("id","simpleFilePreview_"+o);f.addClass("simpleFilePreview_existing").attr("data-sfprid",m?v[w]:w).find("input.simpleFilePreview_formInput").remove(),n.before(f);var d=s(v[w]);d=d?d.toLowerCase():null,d&&a.test(d)?t(f,v[w],"",l):l.icons[d]?t(f,l.icons[d],r(v[w]),l):t(f,l.defaultIcon,r(v[w]),l),l.radioName&&f.find("input.simpleFilePreview_radio").val(f.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i}var u=null,m=e.isArray(v)?1:0;for(var w in v)u={id:m?v[w]:w,file:v[w]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var d=s(u.file);return d=d?d.toLowerCase():null,d&&a.test(d)?t(n,u.file,"",l):l.icons[d]?t(n,l.icons[d],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radioName=null,p.radioCheckedItem=null),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,a=l.clone(!0).attr("id","simpleFilePreview_"+n);a.find("input.simpleFilePreview_formInput").attr("id",a.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(r)?i:t.substring(0,t.indexOf("[")+1)+ ++r+t.substring(t.indexOf("]"))}).val(""),l.after(a);var v=l.closest(".simpleFilePreview_multi").width("+="+a.outerWidth(!0)).width();v>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var o=new FileReader;o.onload=function(e){t(l,e.target.result,"",p)},o.readAsDataURL(this.files[0])}else{var w=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);w&&w[1]&&p.icons[w[1]]?t(l,p.icons[w[1]],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}return p.radioName&&l.find("input.simpleFilePreview_radio").val(l.context.files[0].name),this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),d=s(this.value);d=d?d.toLowerCase():null,d&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[d]?t(l,p.icons[d],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radioName=null,l.radioCheckedItem=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radioName?20:0)+"px"}),p&&(n.wrap("
                  "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(a)?1:0;for(var o in a){var w=e.simpleFilePreview.uid++,d=n.clone(!0).attr("id","simpleFilePreview_"+w);d.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),d.show(),n.before(d);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(d,a[o],"",l):l.icons[f]?t(d,l.icons[f],r(a[o]),l):t(d,l.defaultIcon,r(a[o]),l),l.radioName&&d.find("input.simpleFilePreview_radio").val(d.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radioName&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radioCheckedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,radioCheckedItem:null,readOnly:!1,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file diff --git a/simpleFilePreview.css b/simpleFilePreview.css index b43a9e6..f66ddc5 100644 --- a/simpleFilePreview.css +++ b/simpleFilePreview.css @@ -114,4 +114,9 @@ top: 110px; right: 48px; z-index: 4; + display: none; +} + +.simpleFilePreview_input[style="display: none;"] ~ .simpleFilePreview_radio{ + display: inherit; } \ No newline at end of file diff --git a/simpleFilePreview.min.css b/simpleFilePreview.min.css index 9a8155e..ffdc398 100644 --- a/simpleFilePreview.min.css +++ b/simpleFilePreview.min.css @@ -1 +1 @@ -.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4} \ No newline at end of file +.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4;display:none}.simpleFilePreview_input[style="display: none;"]~.simpleFilePreview_radio{display:inherit} \ No newline at end of file From e67bf0d2f19209cdef456adc52a61119adb55837 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 20 May 2015 19:18:20 +0500 Subject: [PATCH 04/18] Upload file via AJAX and fix bug with li tag --- README.md | 2 ++ jquery.simpleFilePreview.js | 27 +++++++++++++++++++++++++++ jquery.simpleFilePreview.min.js | 2 +- simpleFilePreview.css | 1 + simpleFilePreview.min.css | 2 +- 5 files changed, 32 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 29557cc..fe85a12 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,8 @@ simple and the UI allows for easy CSS styling. (defaults to null) 'readOnly': BOOLEAN Display with no possibility of modification (defaults to false) +'ajaxUploadUrl': STRING URL for upload file via AJAX + (defaults to null) ``` ### Basic Usage diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 31b3258..b227eed 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -39,6 +39,7 @@ $('input[type=file]').simpleFilePreview({ 'radioName': null // Display the radio buttons (if necessary) to mark one of the files (only multiple mode) 'radioCheckedItem': null // Preselect radio button 'readOnly': false // Display with no possibility of modification + 'ajaxUploadUrl': null // URL for upload file via AJAX }); * * TODO: @@ -103,6 +104,31 @@ $('input[type=file]').simpleFilePreview({ // when file input changes, get file contents and show preview (if it's an image) $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { if (!options.readOnly) { + if (options.ajaxUploadUrl) { + var fd = new FormData(); + var cutNameToken = e.target.name.indexOf('['); + if (cutNameToken > -1) { + fd.append(e.target.name.substr(0, cutNameToken), e.target.files[0]); + } else { + fd.append(e.target.name, e.target.files[0]); + } + + $.ajax({ + url: options.ajaxUploadUrl, + type: "POST", + data: fd, + dataType: 'json', + contentType: false, + processData: false, + success: function (res) { + console.log('simpleFilePreview', 'success', res); + }, + error: function (res) { + console.log('simpleFilePreview', 'error', res); + } + }); + } + var $parents = $(this).closest('.simpleFilePreview'); // if it's a multi-select, add another selection box to the end @@ -505,6 +531,7 @@ $('input[type=file]').simpleFilePreview({ 'radioName': null, 'radioCheckedItem': null, 'readOnly': false, + 'ajaxUploadUrl': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index e3341c8..6e8eea6 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;if(p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radioName=null,p.radioCheckedItem=null),this.each(function(){l(e(this),p)}),e.simpleFilePreview.init)return this;var n=e("body");return e.simpleFilePreview.init=!0,n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){var l=e(this).closest(".simpleFilePreview");if(1==l.attr("data-sfpallowmultiple")&&!l.find(".simpleFilePreview_preview").length){var n=e.simpleFilePreview.uid++,a=l.clone(!0).attr("id","simpleFilePreview_"+n);a.find("input.simpleFilePreview_formInput").attr("id",a.find("input.simpleFilePreview_formInput").attr("id")+"_"+n).attr("name",function(e,i){var t=l.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(r)?i:t.substring(0,t.indexOf("[")+1)+ ++r+t.substring(t.indexOf("]"))}).val(""),l.after(a);var v=l.closest(".simpleFilePreview_multi").width("+="+a.outerWidth(!0)).width();v>l.closest(".simpleFilePreview_multiClip").width()&&l.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var m=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(m.test(this.files[0].type.toLowerCase())&&window.FileReader){var o=new FileReader;o.onload=function(e){t(l,e.target.result,"",p)},o.readAsDataURL(this.files[0])}else{var w=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);w&&w[1]&&p.icons[w[1]]?t(l,p.icons[w[1]],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}return p.radioName&&l.find("input.simpleFilePreview_radio").val(l.context.files[0].name),this}var m=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),d=s(this.value);d=d?d.toLowerCase():null,d&&!/fakepath/.test(this.value.toLowerCase())&&m.test(i)?t(l,"file://"+this.value,"",p):p.icons[d]?t(l,p.icons[d],r(this.value),p):t(l,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radioName=null,l.radioCheckedItem=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radioName?20:0)+"px"}),p&&(n.wrap("
                    "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(a)?1:0;for(var o in a){var w=e.simpleFilePreview.uid++,d=n.clone(!0).attr("id","simpleFilePreview_"+w);d.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),d.show(),n.before(d);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(d,a[o],"",l):l.icons[f]?t(d,l.icons[f],r(a[o]),l):t(d,l.defaultIcon,r(a[o]),l),l.radioName&&d.find("input.simpleFilePreview_radio").val(d.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radioName&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radioCheckedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,radioCheckedItem:null,readOnly:!1,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(n){if(!this||!this.length)return this;if(n=n?n:{},n=e.extend({},e.simpleFilePreview.defaults,n),n.readOnly&&(n.radioName=null,n.radioCheckedItem=null),this.each(function(){l(e(this),n)}),e.simpleFilePreview.init)return this;var p=e("body");return e.simpleFilePreview.init=!0,p.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),p.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(n.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),p.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!n.readOnly){if(n.ajaxUploadUrl){var l=new FormData,p=i.target.name.indexOf("[");p>-1?l.append(i.target.name.substr(0,p),i.target.files[0]):l.append(i.target.name,i.target.files[0]),e.ajax({url:n.ajaxUploadUrl,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e){console.log("simpleFilePreview","success",e)},error:function(e){console.log("simpleFilePreview","error",e)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=a.clone(!0).attr("id","simpleFilePreview_"+v);m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(m);var o=a.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();o>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",n)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&n.icons[f[1]]?t(a,n.icons[f[1]],r(this.value),n):t(a,n.defaultIcon,r(this.value),n)}return n.radioName&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",n):n.icons[u]?t(a,n.icons[u],r(this.value),n):t(a,n.defaultIcon,r(this.value),n)}}),p.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!n.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),p.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),p.on("click",".simpleFilePreview_preview",function(){if(!n.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,n,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,n,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,p="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(p+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),p.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),p.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var n=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),n||(l.radioName=null,l.radioCheckedItem=null);var p=e("<"+(n?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(n?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(p),p.append(i),l.readOnly&&p.hide(),i.css({width:p.width()+"px",height:p.height()-(l.radioName?20:0)+"px"}),n&&(p.wrap("
                      "),p.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var a=l.existingFiles;if(!a)return n&&e(".simpleFilePreview_multi").width(p.outerWidth(!0)*p.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(n){var m=e.isArray(a)?1:0;for(var o in a){var d=e.simpleFilePreview.uid++,w=p.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),w.show(),p.before(w);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[o],"",l):l.icons[f]?t(w,l.icons[f],r(a[o]),l):t(w,l.defaultIcon,r(a[o]),l),l.radioName&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(p.outerWidth(!0)*p.parent().find(".simpleFilePreview").length),l.radioName&&p.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radioCheckedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;p.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(p,u.file,"",l):l.icons[f]?t(p,l.icons[f],r(u.file),l):t(p,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var n=e.find(".simpleFilePreview_filename");n&&n.length?n.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,radioCheckedItem:null,readOnly:!1,ajaxUploadUrl:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file diff --git a/simpleFilePreview.css b/simpleFilePreview.css index f66ddc5..c142a1a 100644 --- a/simpleFilePreview.css +++ b/simpleFilePreview.css @@ -13,6 +13,7 @@ padding: 0; position: relative; left: 0; + list-style-type: none; } .simpleFilePreview_shifter { diff --git a/simpleFilePreview.min.css b/simpleFilePreview.min.css index ffdc398..555e19c 100644 --- a/simpleFilePreview.min.css +++ b/simpleFilePreview.min.css @@ -1 +1 @@ -.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4;display:none}.simpleFilePreview_input[style="display: none;"]~.simpleFilePreview_radio{display:inherit} \ No newline at end of file +.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0;list-style-type:none}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4;display:none}.simpleFilePreview_input[style="display: none;"]~.simpleFilePreview_radio{display:inherit} \ No newline at end of file From 6ec0ec9860206a8a4bbbbd59f8f76ea834e2afa5 Mon Sep 17 00:00:00 2001 From: zorg Date: Fri, 22 May 2015 18:58:20 +0500 Subject: [PATCH 05/18] Options are encapsulated in objects, FormData in AJAX upload passed to callback function, parameters 'error' and 'success' in AJAX upload accept callback functions, events are subscribed within the parent element --- README.md | 24 ++++++--- jquery.simpleFilePreview.js | 91 ++++++++++++++++++--------------- jquery.simpleFilePreview.min.js | 2 +- 3 files changed, 70 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index fe85a12..d7e9d7e 100644 --- a/README.md +++ b/README.md @@ -47,18 +47,30 @@ simple and the UI allows for easy CSS styling. (default value includes most common file types in this format: {'png': 'preview_png.png', ...} 'limit': INTEGER On multiple files, set a limit -'removeMessagePrefix': STRING Prefix for remove message +'removeMessage': { + 'prefix': STRING Prefix for remove message (defaults to "Remove") -'removeMessageStub': STRING Stub instead of the file name for remove message - (defaults to "this file") -'radioName': STRING Display the radio buttons (if necessary) to mark one of the files (only multiple mode). Name of radio button elements + 'stub': STRING Stub instead of the file name for remove message +} (defaults to "this file") +'radio': { Display the radio buttons (if necessary) to mark one of the files (only multiple mode) (defaults to null (no display the radio buttons)) -'radioCheckedItem': STRING Preselect radio button + 'name': STRING Name of input element (defaults to null) + 'checkedItem': STRING Preselect radio button +} (defaults to null) 'readOnly': BOOLEAN Display with no possibility of modification (defaults to false) -'ajaxUploadUrl': STRING URL for upload file via AJAX +'ajaxUpload': { Upload file via AJAX (defaults to null) + 'url': STRING URL for upload file + (defaults to null) + 'success': FUNCTION callback for ajax success function + (defaults to null) + 'error': FUNCTION callback for ajax error function + (defaults to null) + 'compose': FUNCTION callback for before send FormData customization +} (defaults to null) + ``` ### Basic Usage diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index b227eed..3d32d2d 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -33,13 +33,22 @@ $('input[type=file]').simpleFilePreview({ 'iconPath': '', // String The path to the folder containing icon images (when a preview is unavailable) - should be absolute, but if relative, must be relative to the page the file input is on 'defaultIcon': 'preview_file.png', // String The file name to use for the defualt preview icon (when a proper file-type-specific icon cannot be found) 'icons': {'png': 'preview_png.png', ...} // Object A mapping of file type (second half of mime type) to icon image file (used in combination with the "iconPath" option) - 'limit': 0 // Limit files on multiple option - 'removeMessagePrefix': 'Remove' // Prefix for remove message - 'removeMessageStub': 'this file' // Stub instead of the file name for remove message - 'radioName': null // Display the radio buttons (if necessary) to mark one of the files (only multiple mode) - 'radioCheckedItem': null // Preselect radio button - 'readOnly': false // Display with no possibility of modification - 'ajaxUploadUrl': null // URL for upload file via AJAX + 'limit': 0, // Limit files on multiple option + 'removeMessage': { + 'prefix': 'Remove', // Prefix for remove message + 'stub': 'this file' // Stub instead of the file name for remove message + }, + 'radio': { // Display the radio buttons (if necessary) to mark one of the files (only multiple mode) + 'name': string, // Name of input element + 'checkedItem': string // Preselect radio button + }, + 'readOnly': false, // Display with no possibility of modification + 'ajaxUpload': { // Upload file via AJAX + 'url': string, // URL for upload file + 'success': function (data, textStatus, jqXHR, inputFileElement), // callback for ajax success function + 'error': function (jqXHR, textStatus, errorThrown, inputFileElement), // callback for ajax error function + 'compose': function (formData) // callback for before send FormData customization + } }); * * TODO: @@ -64,22 +73,14 @@ $('input[type=file]').simpleFilePreview({ // read only mode and radio button incompatible if (options.readOnly) { - options.radioName = null; - options.radioCheckedItem = null; + options.radio = null; } this.each(function() { setup($(this), options); }); - // set up global events - if ($.simpleFilePreview.init) { - return this; - } - - var $body = $('body'); - - $.simpleFilePreview.init = true; + var $body = $(this).closest('.simpleFilePreview_body'); // open file browser dialog on click of styled "button" $body.on('click', '.simpleFilePreview_input', function (e) { @@ -104,7 +105,7 @@ $('input[type=file]').simpleFilePreview({ // when file input changes, get file contents and show preview (if it's an image) $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { if (!options.readOnly) { - if (options.ajaxUploadUrl) { + if (options.ajaxUpload) { var fd = new FormData(); var cutNameToken = e.target.name.indexOf('['); if (cutNameToken > -1) { @@ -113,18 +114,26 @@ $('input[type=file]').simpleFilePreview({ fd.append(e.target.name, e.target.files[0]); } + if (options.ajaxUpload.compose) { + options.ajaxUpload.compose(fd); + } + $.ajax({ - url: options.ajaxUploadUrl, + url: options.ajaxUpload.url, type: "POST", data: fd, dataType: 'json', contentType: false, processData: false, - success: function (res) { - console.log('simpleFilePreview', 'success', res); + success: function (data, textStatus, jqXHR) { + if (options.ajaxUpload.success) { + options.ajaxUpload.success(data, textStatus, jqXHR, e.target); + } }, - error: function (res) { - console.log('simpleFilePreview', 'error', res); + error: function (jqXHR, textStatus, errorThrown) { + if (options.ajaxUpload.error) { + options.ajaxUpload.error(jqXHR, textStatus, errorThrown, e.target); + } } }); } @@ -179,7 +188,7 @@ $('input[type=file]').simpleFilePreview({ } } - if (options.radioName) { + if (options.radio) { $parents.find('input.simpleFilePreview_radio').val($parents.context.files[0].name); } @@ -337,18 +346,17 @@ $('input[type=file]').simpleFilePreview({ // multiple mode and radio button incompatible if (!isMulti) { - options.radioName = null; - options.radioCheckedItem = null; + options.radio = null; } // wrap input with necessary structure var $html = $("<" + (isMulti ? 'li' : 'div') + " id='simpleFilePreview_" + ($.simpleFilePreview.uid++) + "'" - + " class='simpleFilePreview" + ((options.radioName) ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (isMulti ? 1 : 0) + "'>" + + " class='simpleFilePreview" + ((options.radio) ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (isMulti ? 1 : 0) + "'>" + "" + options.buttonContent + "" + "" + options.removeContent + "" - + ((options.radioName) ? "" : "") + + ((options.radio) ? "" : "") + ""); these.before($html); @@ -362,15 +370,17 @@ $('input[type=file]').simpleFilePreview({ // opacity 0, and z-indexed above other elements within the preview container these.css({ width: ($html.width() + 'px'), - height: (($html.height() - ((options.radioName) ? 20 : 0)) + 'px') + height: (($html.height() - ((options.radio) ? 20 : 0)) + 'px') }); // if it's a multi-select we use multiple separate inputs instead to support file preview if (isMulti) { - $html.wrap("
                        "); + $html.wrap("
                          "); $html.closest('.simpleFilePreview_multiUI') .prepend("" + options.shiftRight + "") .append("" + options.shiftLeft + ""); + } else { + $html.wrap("
                          "); } var exists = options.existingFiles; @@ -411,15 +421,15 @@ $('input[type=file]').simpleFilePreview({ addOrChangePreview(nn, options.defaultIcon, getFilename(exists[i]), options); } - if (options.radioName) { + if (options.radio) { nn.find('input.simpleFilePreview_radio').val(nn.attr('data-sfprid')); } } $('.simpleFilePreview_multi').width($html.outerWidth(true) * $html.parent().find('.simpleFilePreview').length); - if (options.radioName) { - $html.closest('.simpleFilePreview_multi').find("input[type='radio'][value='" + options.radioCheckedItem + "']").prop("checked", true); + if (options.radio) { + $html.closest('.simpleFilePreview_multi').find("input[type='radio'][value='" + options.radio.checkedItem + "']").prop("checked", true); } return these; @@ -473,10 +483,10 @@ $('input[type=file]').simpleFilePreview({ $parents.append("" + (filename ? filename : "); + + " title='" + options.removeMessage.prefix + ' ' + (filename ? filename : options.removeMessage.stub) + "' />"); // for tooltips - $parents.find('input.simpleFilePreview_formInput').attr('title', options.removeMessagePrefix + " " + (filename ? filename : options.removeMessageStub)); + $parents.find('input.simpleFilePreview_formInput').attr('title', options.removeMessage.prefix + " " + (filename ? filename : options.removeMessage.stub)); } limit($parents, options); @@ -526,12 +536,13 @@ $('input[type=file]').simpleFilePreview({ 'iconPath': '', 'defaultIcon': 'preview_file.png', 'limit': 0, - 'removeMessagePrefix': 'Remove', - 'removeMessageStub': 'this file', - 'radioName': null, - 'radioCheckedItem': null, + 'removeMessage': { + 'prefix': 'Remove', + 'stub': 'this file', + }, + 'radio': null, 'readOnly': false, - 'ajaxUploadUrl': null, + 'ajaxUpload': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 6e8eea6..4435583 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(n){if(!this||!this.length)return this;if(n=n?n:{},n=e.extend({},e.simpleFilePreview.defaults,n),n.readOnly&&(n.radioName=null,n.radioCheckedItem=null),this.each(function(){l(e(this),n)}),e.simpleFilePreview.init)return this;var p=e("body");return e.simpleFilePreview.init=!0,p.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),p.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(n.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),p.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!n.readOnly){if(n.ajaxUploadUrl){var l=new FormData,p=i.target.name.indexOf("[");p>-1?l.append(i.target.name.substr(0,p),i.target.files[0]):l.append(i.target.name,i.target.files[0]),e.ajax({url:n.ajaxUploadUrl,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e){console.log("simpleFilePreview","success",e)},error:function(e){console.log("simpleFilePreview","error",e)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=a.clone(!0).attr("id","simpleFilePreview_"+v);m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(m);var o=a.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();o>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",n)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&n.icons[f[1]]?t(a,n.icons[f[1]],r(this.value),n):t(a,n.defaultIcon,r(this.value),n)}return n.radioName&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",n):n.icons[u]?t(a,n.icons[u],r(this.value),n):t(a,n.defaultIcon,r(this.value),n)}}),p.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!n.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),p.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),p.on("click",".simpleFilePreview_preview",function(){if(!n.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,n,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,n,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,p="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(p+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),p.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),p.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var n=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),n||(l.radioName=null,l.radioCheckedItem=null);var p=e("<"+(n?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radioName?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(n?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radioName?"":"")+"");i.before(p),p.append(i),l.readOnly&&p.hide(),i.css({width:p.width()+"px",height:p.height()-(l.radioName?20:0)+"px"}),n&&(p.wrap("
                            "),p.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+""));var a=l.existingFiles;if(!a)return n&&e(".simpleFilePreview_multi").width(p.outerWidth(!0)*p.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(n){var m=e.isArray(a)?1:0;for(var o in a){var d=e.simpleFilePreview.uid++,w=p.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),w.show(),p.before(w);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[o],"",l):l.icons[f]?t(w,l.icons[f],r(a[o]),l):t(w,l.defaultIcon,r(a[o]),l),l.radioName&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(p.outerWidth(!0)*p.parent().find(".simpleFilePreview").length),l.radioName&&p.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radioCheckedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;p.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(p,u.file,"",l):l.icons[f]?t(p,l.icons[f],r(u.file),l):t(p,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessagePrefix+" "+(t?t:r.removeMessageStub))),i(e,r),!t)return null;var n=e.find(".simpleFilePreview_filename");n&&n.length?n.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessagePrefix:"Remove",removeMessageStub:"this file",radioName:null,radioCheckedItem:null,readOnly:!1,ajaxUploadUrl:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=new FormData,n=i.target.name.indexOf("[");n>-1?l.append(i.target.name.substr(0,n),i.target.files[0]):l.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(l),e.ajax({url:p.ajaxUpload.url,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e,l,t){p.ajaxUpload.success&&p.ajaxUpload.success(e,l,t,i.target)},error:function(e,l,t){p.ajaxUpload.error&&p.ajaxUpload.error(e,l,t,i.target)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=a.clone(!0).attr("id","simpleFilePreview_"+v);m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(m);var o=a.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();o>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&p.icons[f[1]]?t(a,p.icons[f[1]],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}return p.radio&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",p):p.icons[u]?t(a,p.icons[u],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                              "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                              ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(a)?1:0;for(var o in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[o],"",l):l.icons[f]?t(w,l.icons[f],r(a[o]),l):t(w,l.defaultIcon,r(a[o]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessage.prefix+" "+(t?t:r.removeMessage.stub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From 58848268f7bf65543fd03886017410ed1e257242 Mon Sep 17 00:00:00 2001 From: zorg Date: Tue, 26 May 2015 12:27:51 +0500 Subject: [PATCH 06/18] add callback for before remove element --- README.md | 2 ++ jquery.simpleFilePreview.js | 8 +++++++- jquery.simpleFilePreview.min.js | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d7e9d7e..da44acb 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,8 @@ simple and the UI allows for easy CSS styling. (defaults to null) 'compose': FUNCTION callback for before send FormData customization } (defaults to null) +'beforeRemove' callback for before remove element + (defaults to null) ``` diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 3d32d2d..f05ecbf 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -48,7 +48,8 @@ $('input[type=file]').simpleFilePreview({ 'success': function (data, textStatus, jqXHR, inputFileElement), // callback for ajax success function 'error': function (jqXHR, textStatus, errorThrown, inputFileElement), // callback for ajax error function 'compose': function (formData) // callback for before send FormData customization - } + }, + 'beforeRemove': function (element), // callback for before remove element }); * * TODO: @@ -243,6 +244,10 @@ $('input[type=file]').simpleFilePreview({ var $this = $(this); var $parents = $this.closest('.simpleFilePreview'); + if (options.beforeRemove != null) { + options.beforeRemove($parents); + } + if ($parents.attr('data-sfpallowmultiple') == 1 && $parents.siblings('.simpleFilePreview').length) { if ($parents.hasClass('simpleFilePreview_existing')) { $parents.parent().append(""); @@ -543,6 +548,7 @@ $('input[type=file]').simpleFilePreview({ 'radio': null, 'readOnly': false, 'ajaxUpload': null, + 'beforeRemove': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 4435583..cfe372a 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=new FormData,n=i.target.name.indexOf("[");n>-1?l.append(i.target.name.substr(0,n),i.target.files[0]):l.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(l),e.ajax({url:p.ajaxUpload.url,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e,l,t){p.ajaxUpload.success&&p.ajaxUpload.success(e,l,t,i.target)},error:function(e,l,t){p.ajaxUpload.error&&p.ajaxUpload.error(e,l,t,i.target)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=a.clone(!0).attr("id","simpleFilePreview_"+v);m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(m);var o=a.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();o>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&p.icons[f[1]]?t(a,p.icons[f[1]],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}return p.radio&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",p):p.icons[u]?t(a,p.icons[u],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var m=e.isArray(a)?1:0;for(var o in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",m?a[o]:o).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[o]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[o],"",l):l.icons[f]?t(w,l.icons[f],r(a[o]),l):t(w,l.defaultIcon,r(a[o]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,m=e.isArray(a)?1:0;for(var o in a)u={id:m?a[o]:o,file:a[o]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessage.prefix+" "+(t?t:r.removeMessage.stub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=new FormData,n=i.target.name.indexOf("[");n>-1?l.append(i.target.name.substr(0,n),i.target.files[0]):l.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(l),e.ajax({url:p.ajaxUpload.url,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e,l,t){p.ajaxUpload.success&&p.ajaxUpload.success(e,l,t,i.target)},error:function(e,l,t){p.ajaxUpload.error&&p.ajaxUpload.error(e,l,t,i.target)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,o=a.clone(!0).attr("id","simpleFilePreview_"+v);o.find("input.simpleFilePreview_formInput").attr("id",o.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(o);var m=a.closest(".simpleFilePreview_multi").width("+="+o.outerWidth(!0)).width();m>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&p.icons[f[1]]?t(a,p.icons[f[1]],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}return p.radio&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",p):p.icons[u]?t(a,p.icons[u],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(null!=p.beforeRemove&&p.beforeRemove(t),1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                  "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                  ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var o=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",o?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[m]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[m],"",l):l.icons[f]?t(w,l.icons[f],r(a[m]),l):t(w,l.defaultIcon,r(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,o=e.isArray(a)?1:0;for(var m in a)u={id:o?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessage.prefix+" "+(t?t:r.removeMessage.stub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From 495bebc5d4814cb27093f6a3ec247970f9f857b2 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 May 2015 12:42:15 +0500 Subject: [PATCH 07/18] progressbar for ajax upload --- README.md | 5 ++++- jquery.simpleFilePreview.js | 32 +++++++++++++++++++++++++++++++- jquery.simpleFilePreview.min.js | 2 +- simpleFilePreview.css | 8 ++++++++ simpleFilePreview.min.css | 2 +- 5 files changed, 45 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index da44acb..db52615 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,8 @@ SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling. -**Requires jQuery 1.7+** +**Requires: jQuery 1.9.1+** +**Requires: Bootstrap 3.3.4+ (for progressbar only)** ### Main Features @@ -64,6 +65,8 @@ simple and the UI allows for easy CSS styling. (defaults to null) 'url': STRING URL for upload file (defaults to null) + 'progressbar': BOOLEAN progressbar for upload file (required Bootstrap) + (defaults to false) 'success': FUNCTION callback for ajax success function (defaults to null) 'error': FUNCTION callback for ajax error function diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index f05ecbf..be0554b 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -1,7 +1,8 @@ /* Copyright (c) 2012 Jordan Kasper * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * Copyright notice and license must remain intact for legal use -* Requires: jQuery 1.7+ +* Requires: jQuery 1.9.1+ +* Bootstrap 3.3.4+ (for progressbar only) * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF @@ -45,6 +46,7 @@ $('input[type=file]').simpleFilePreview({ 'readOnly': false, // Display with no possibility of modification 'ajaxUpload': { // Upload file via AJAX 'url': string, // URL for upload file + 'progressbar': false, // progressbar for upload file (required Bootstrap) 'success': function (data, textStatus, jqXHR, inputFileElement), // callback for ajax success function 'error': function (jqXHR, textStatus, errorThrown, inputFileElement), // callback for ajax error function 'compose': function (formData) // callback for before send FormData customization @@ -107,6 +109,7 @@ $('input[type=file]').simpleFilePreview({ $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { if (!options.readOnly) { if (options.ajaxUpload) { + var $this = $(this); var fd = new FormData(); var cutNameToken = e.target.name.indexOf('['); if (cutNameToken > -1) { @@ -119,6 +122,10 @@ $('input[type=file]').simpleFilePreview({ options.ajaxUpload.compose(fd); } + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').show(); + } + $.ajax({ url: options.ajaxUpload.url, type: "POST", @@ -127,14 +134,32 @@ $('input[type=file]').simpleFilePreview({ contentType: false, processData: false, success: function (data, textStatus, jqXHR) { + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').hide(); + } if (options.ajaxUpload.success) { options.ajaxUpload.success(data, textStatus, jqXHR, e.target); } }, error: function (jqXHR, textStatus, errorThrown) { + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').hide(); + } if (options.ajaxUpload.error) { options.ajaxUpload.error(jqXHR, textStatus, errorThrown, e.target); } + }, + xhr: function () { + var xhr = new window.XMLHttpRequest(); + //Upload progress + xhr.upload.addEventListener("progress", function (evt) { + if (evt.lengthComputable && options.ajaxUpload.progressbar) { + var percentComplete = evt.loaded * 100 / evt.total; + var progressbar = $this.parent().find('.simpleFilePreview_progress div'); + progressbar.css({ width: percentComplete + '%' }).attr('aria-valuenow', percentComplete); + } + }, false); + return xhr; } }); } @@ -148,6 +173,10 @@ $('input[type=file]').simpleFilePreview({ var newId = $.simpleFilePreview.uid++; var $newN = $parents.clone(true).attr('id', "simpleFilePreview_" + newId); + if (options.ajaxUpload.progressbar) { + $newN.find('.simpleFilePreview_progress').hide(); + } + $newN.find('input.simpleFilePreview_formInput') .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) .attr('name', function (index, previousValue) { @@ -362,6 +391,7 @@ $('input[type=file]').simpleFilePreview({ + options.buttonContent + "" + "" + options.removeContent + "" + ((options.radio) ? "" : "") + + ((options.ajaxUpload.progressbar) ? "
                                  " : "") + ""); these.before($html); diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index cfe372a..2ae77ef 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012 Jordan Kasper * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=new FormData,n=i.target.name.indexOf("[");n>-1?l.append(i.target.name.substr(0,n),i.target.files[0]):l.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(l),e.ajax({url:p.ajaxUpload.url,type:"POST",data:l,dataType:"json",contentType:!1,processData:!1,success:function(e,l,t){p.ajaxUpload.success&&p.ajaxUpload.success(e,l,t,i.target)},error:function(e,l,t){p.ajaxUpload.error&&p.ajaxUpload.error(e,l,t,i.target)}})}var a=e(this).closest(".simpleFilePreview");if(1==a.attr("data-sfpallowmultiple")&&!a.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,o=a.clone(!0).attr("id","simpleFilePreview_"+v);o.find("input.simpleFilePreview_formInput").attr("id",o.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=a.find("input.simpleFilePreview_formInput").attr("name"),t=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(t)?i:l.substring(0,l.indexOf("[")+1)+ ++t+l.substring(l.indexOf("]"))}).val(""),a.after(o);var m=a.closest(".simpleFilePreview_multi").width("+="+o.outerWidth(!0)).width();m>a.closest(".simpleFilePreview_multiClip").width()&&a.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var d=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(d.test(this.files[0].type.toLowerCase())&&window.FileReader){var w=new FileReader;w.onload=function(e){t(a,e.target.result,"",p)},w.readAsDataURL(this.files[0])}else{var f=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);f&&f[1]&&p.icons[f[1]]?t(a,p.icons[f[1]],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}return p.radio&&a.find("input.simpleFilePreview_radio").val(a.context.files[0].name),this}var d=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),u=s(this.value);u=u?u.toLowerCase():null,u&&!/fakepath/.test(this.value.toLowerCase())&&d.test(i)?t(a,"file://"+this.value,"",p):p.icons[u]?t(a,p.icons[u],r(this.value),p):t(a,p.defaultIcon,r(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),t=l.closest(".simpleFilePreview");if(null!=p.beforeRemove&&p.beforeRemove(t),1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),i(l,p,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),i(l,p,1);var r=t.find("input.simpleFilePreview_formInput").val("");if(r&&r.length&&r.val().length){for(var s=r.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+r.attr(s[a].name)+"' ");r.before(''),r.remove()}l.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var t=i.find("li:first");i.animate({left:"-="+t.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var t=i.find("li:first").outerWidth(!0);i.animate({left:1>l+t?"+="+t:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var t=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,t.length>i.limit+l?t.last().hide():t.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                    "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                    ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var o=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",o?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[m]);f=f?f.toLowerCase():null,f&&v.test(f)?t(w,a[m],"",l):l.icons[f]?t(w,l.icons[f],r(a[m]),l):t(w,l.defaultIcon,r(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,o=e.isArray(a)?1:0;for(var m in a)u={id:o?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],r(u.file),l):t(n,l.defaultIcon,r(u.file),l),i},t=function(e,l,t,r){t=t?t:null,l=(new RegExp("[/\\\\]").test(l)?"":r.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",r.removeMessage.prefix+" "+(t?t:r.removeMessage.stub))),i(e,r),!t)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},r=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=e(this),n=new FormData,a=i.target.name.indexOf("[");a>-1?n.append(i.target.name.substr(0,a),i.target.files[0]):n.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(n),p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(),e.ajax({url:p.ajaxUpload.url,type:"POST",data:n,dataType:"json",contentType:!1,processData:!1,success:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.success&&p.ajaxUpload.success(e,r,t,i.target)},error:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.error&&p.ajaxUpload.error(e,r,t,i.target)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&p.ajaxUpload.progressbar){var i=100*e.loaded/e.total,r=l.parent().find(".simpleFilePreview_progress div");r.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var v=e(this).closest(".simpleFilePreview");if(1==v.attr("data-sfpallowmultiple")&&!v.find(".simpleFilePreview_preview").length){var o=e.simpleFilePreview.uid++,m=v.clone(!0).attr("id","simpleFilePreview_"+o);p.ajaxUpload.progressbar&&m.find(".simpleFilePreview_progress").hide(),m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+o).attr("name",function(e,i){var l=v.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(r)?i:l.substring(0,l.indexOf("[")+1)+ ++r+l.substring(l.indexOf("]"))}).val(""),v.after(m);var d=v.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();d>v.closest(".simpleFilePreview_multiClip").width()&&v.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var w=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(w.test(this.files[0].type.toLowerCase())&&window.FileReader){var f=new FileReader;f.onload=function(e){r(v,e.target.result,"",p)},f.readAsDataURL(this.files[0])}else{var u=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);u&&u[1]&&p.icons[u[1]]?r(v,p.icons[u[1]],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}return p.radio&&v.find("input.simpleFilePreview_radio").val(v.context.files[0].name),this}var w=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),g=s(this.value);g=g?g.toLowerCase():null,g&&!/fakepath/.test(this.value.toLowerCase())&&w.test(i)?r(v,"file://"+this.value,"",p):p.icons[g]?r(v,p.icons[g],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),r=l.closest(".simpleFilePreview");if(null!=p.beforeRemove&&p.beforeRemove(r),1==r.attr("data-sfpallowmultiple")&&r.siblings(".simpleFilePreview").length)return r.hasClass("simpleFilePreview_existing")&&r.parent().append(""),i(l,p,1),r.closest(".simpleFilePreview_multi").width("-="+r.width()),r.remove(),this;r.hasClass("simpleFilePreview_existing")&&(r.find("input.simpleFilePreview_formInput").show(),r.append(""),r.removeClass("simpleFilePreview_existing")),i(l,p,1);var t=r.find("input.simpleFilePreview_formInput").val("");if(t&&t.length&&t.val().length){for(var s=t.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+t.attr(s[a].name)+"' ");t.before(''),t.remove()}l.remove(),r.find(".simpleFilePreview_filename").remove(),r.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var r=i.find("li:first");i.animate({left:"-="+r.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var r=i.find("li:first").outerWidth(!0);i.animate({left:1>l+r?"+="+r:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var r=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,r.length>i.limit+l?r.last().hide():r.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+(l.ajaxUpload.progressbar?"
                                    ":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                      "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                      ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var o=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",o?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[m]);f=f?f.toLowerCase():null,f&&v.test(f)?r(w,a[m],"",l):l.icons[f]?r(w,l.icons[f],t(a[m]),l):r(w,l.defaultIcon,t(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,o=e.isArray(a)?1:0;for(var m in a)u={id:o?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?r(n,u.file,"",l):l.icons[f]?r(n,l.icons[f],t(u.file),l):r(n,l.defaultIcon,t(u.file),l),i},r=function(e,l,r,t){r=r?r:null,l=(new RegExp("[/\\\\]").test(l)?"":t.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(r?r:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",t.removeMessage.prefix+" "+(r?r:t.removeMessage.stub))),i(e,t),!r)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(r):e.append(""+r+"").find(".simpleFilePreview_filename")},t=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file diff --git a/simpleFilePreview.css b/simpleFilePreview.css index c142a1a..118ec61 100644 --- a/simpleFilePreview.css +++ b/simpleFilePreview.css @@ -120,4 +120,12 @@ .simpleFilePreview_input[style="display: none;"] ~ .simpleFilePreview_radio{ display: inherit; +} + +.simpleFilePreview_progress { + z-index: 10; + position: absolute; + width: 100%; + top: 60px; + display: none; } \ No newline at end of file diff --git a/simpleFilePreview.min.css b/simpleFilePreview.min.css index 555e19c..655faf5 100644 --- a/simpleFilePreview.min.css +++ b/simpleFilePreview.min.css @@ -1 +1 @@ -.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0;list-style-type:none}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4;display:none}.simpleFilePreview_input[style="display: none;"]~.simpleFilePreview_radio{display:inherit} \ No newline at end of file +.simpleFilePreview_multiUI{padding:0 30px;position:relative}.simpleFilePreview_multiClip{overflow:hidden}.simpleFilePreview_multi{display:block;height:120px;padding:0;position:relative;left:0;list-style-type:none}.simpleFilePreview_shifter{position:absolute;top:62px;cursor:pointer}.simpleFilePreview_shiftLeft{left:3px}.simpleFilePreview_shiftRight{right:3px}.imageHolder{margin:10px 15px}.simpleFilePreview{position:relative;display:block;width:120px;height:120px;margin-left:10px;border:4px solid #fff;border-radius:3px;background-color:#f7f7f7;text-align:center;cursor:pointer;box-shadow:0 0 4px 0 #555}.simpleFilePreview_multi .simpleFilePreview{float:left}.simpleFilePreview_input{position:relative;overflow:hidden;display:inline-block;padding-top:40%;height:100%;width:100%}.simpleFilePreview:hover{background-color:#ddd}.simpleFilePreview input[type=file]{position:absolute;top:0;right:0;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:5}.simpleFilePreview_preview{max-width:112px;max-height:112px;z-index:3}.simpleFilePreview_preview.simpleFilePreview_hasFilename{max-width:120px;max-height:100px}.simpleFilePreview_filename{font-size:.8em;color:#666;width:95%;height:1.15em;overflow:hidden;display:inline-block}.simpleFilePreview_remove{display:none;color:#c33;font-weight:700;position:absolute;top:5px;right:5px;z-index:4}.simpleFilePreview_withRadio{height:140px}.simpleFilePreview_radio{position:absolute;top:110px;right:48px;z-index:4;display:none}.simpleFilePreview_input[style="display: none;"]~.simpleFilePreview_radio{display:inherit}.simpleFilePreview_progress{z-index:10;position:absolute;width:100%;top:60px;display:none} \ No newline at end of file From 688b3172111ae8d765390f2dd4555ee9a101e419 Mon Sep 17 00:00:00 2001 From: jbzorg Date: Wed, 27 May 2015 12:51:09 +0500 Subject: [PATCH 08/18] fix text --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index db52615..6f9b905 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,7 @@ SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling. -**Requires: jQuery 1.9.1+** -**Requires: Bootstrap 3.3.4+ (for progressbar only)** +**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only)** ### Main Features From a5616bec6002710026d16e253a860ed730b2d647 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 May 2015 19:33:33 +0500 Subject: [PATCH 09/18] Copyright, NuGet repository --- LICENSE | 2 +- README.md | 6 +++++- jquery.simpleFilePreview.js | 2 +- jquery.simpleFilePreview.min.js | 2 +- package.json | 2 +- 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/LICENSE b/LICENSE index 2c1a276..1365220 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Jordan Kasper +Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6f9b905..cf04be0 100644 --- a/README.md +++ b/README.md @@ -101,8 +101,12 @@ $('input[type=file]').simpleFilePreview(); You can see [more examples](http://jordankasper.com/jquery/preview/examples) on my personal site. -### Tested Browsers +### Tested Browsers * Firefox 16+ * Internet Explorer 8+ * Chrome 22+ + +### NuGet repository + +https://www.myget.org/F/zorg-public/api/v2 \ No newline at end of file diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index be0554b..b8210c0 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -1,4 +1,4 @@ -/* Copyright (c) 2012 Jordan Kasper +/* Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * Copyright notice and license must remain intact for legal use * Requires: jQuery 1.9.1+ diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 2ae77ef..dad6854 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -1,6 +1,6 @@ /*! * jquery.simpleFilePreview v0.1.0 (https://github.com/jakerella/jquerySimpleFilePreview) - * Copyright (c) 2012 Jordan Kasper + * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ !function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=e(this),n=new FormData,a=i.target.name.indexOf("[");a>-1?n.append(i.target.name.substr(0,a),i.target.files[0]):n.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(n),p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(),e.ajax({url:p.ajaxUpload.url,type:"POST",data:n,dataType:"json",contentType:!1,processData:!1,success:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.success&&p.ajaxUpload.success(e,r,t,i.target)},error:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.error&&p.ajaxUpload.error(e,r,t,i.target)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&p.ajaxUpload.progressbar){var i=100*e.loaded/e.total,r=l.parent().find(".simpleFilePreview_progress div");r.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var v=e(this).closest(".simpleFilePreview");if(1==v.attr("data-sfpallowmultiple")&&!v.find(".simpleFilePreview_preview").length){var o=e.simpleFilePreview.uid++,m=v.clone(!0).attr("id","simpleFilePreview_"+o);p.ajaxUpload.progressbar&&m.find(".simpleFilePreview_progress").hide(),m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+o).attr("name",function(e,i){var l=v.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(r)?i:l.substring(0,l.indexOf("[")+1)+ ++r+l.substring(l.indexOf("]"))}).val(""),v.after(m);var d=v.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();d>v.closest(".simpleFilePreview_multiClip").width()&&v.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var w=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(w.test(this.files[0].type.toLowerCase())&&window.FileReader){var f=new FileReader;f.onload=function(e){r(v,e.target.result,"",p)},f.readAsDataURL(this.files[0])}else{var u=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);u&&u[1]&&p.icons[u[1]]?r(v,p.icons[u[1]],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}return p.radio&&v.find("input.simpleFilePreview_radio").val(v.context.files[0].name),this}var w=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),g=s(this.value);g=g?g.toLowerCase():null,g&&!/fakepath/.test(this.value.toLowerCase())&&w.test(i)?r(v,"file://"+this.value,"",p):p.icons[g]?r(v,p.icons[g],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),r=l.closest(".simpleFilePreview");if(null!=p.beforeRemove&&p.beforeRemove(r),1==r.attr("data-sfpallowmultiple")&&r.siblings(".simpleFilePreview").length)return r.hasClass("simpleFilePreview_existing")&&r.parent().append(""),i(l,p,1),r.closest(".simpleFilePreview_multi").width("-="+r.width()),r.remove(),this;r.hasClass("simpleFilePreview_existing")&&(r.find("input.simpleFilePreview_formInput").show(),r.append(""),r.removeClass("simpleFilePreview_existing")),i(l,p,1);var t=r.find("input.simpleFilePreview_formInput").val("");if(t&&t.length&&t.val().length){for(var s=t.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+t.attr(s[a].name)+"' ");t.before(''),t.remove()}l.remove(),r.find(".simpleFilePreview_filename").remove(),r.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var r=i.find("li:first");i.animate({left:"-="+r.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var r=i.find("li:first").outerWidth(!0);i.animate({left:1>l+r?"+="+r:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var r=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,r.length>i.limit+l?r.last().hide():r.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+(l.ajaxUpload.progressbar?"
                                      ":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                        "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                        ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var o=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",o?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[m]);f=f?f.toLowerCase():null,f&&v.test(f)?r(w,a[m],"",l):l.icons[f]?r(w,l.icons[f],t(a[m]),l):r(w,l.defaultIcon,t(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,o=e.isArray(a)?1:0;for(var m in a)u={id:o?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?r(n,u.file,"",l):l.icons[f]?r(n,l.icons[f],t(u.file),l):r(n,l.defaultIcon,t(u.file),l),i},r=function(e,l,r,t){r=r?r:null,l=(new RegExp("[/\\\\]").test(l)?"":t.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(r?r:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",t.removeMessage.prefix+" "+(r?r:t.removeMessage.stub))),i(e,t),!r)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(r):e.append(""+r+"").find(".simpleFilePreview_filename")},t=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index 599fd13..e5da70f 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "form", "file upload" ], - "author": "Jordan Kasper", + "author": "Jordan Kasper, eusonlito, Alexei Ivashkevich", "license": "MIT", "bugs": { "url": "https://github.com/jakerella/jquerySimpleFilePreview/issues" From 1b22aa2f997af41e640f7519c905f7a065de8af4 Mon Sep 17 00:00:00 2001 From: zorg Date: Mon, 1 Jun 2015 19:16:41 +0500 Subject: [PATCH 10/18] add optional dialog before remove --- README.md | 26 +++-- jquery.simpleFilePreview.js | 166 ++++++++++++++++++++------------ jquery.simpleFilePreview.min.js | 2 +- 3 files changed, 128 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index cf04be0..755964d 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling. -**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only)** +**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only), jQuery UI 1.11.4+ (for remove dialog only)** ### Main Features @@ -64,16 +64,30 @@ simple and the UI allows for easy CSS styling. (defaults to null) 'url': STRING URL for upload file (defaults to null) - 'progressbar': BOOLEAN progressbar for upload file (required Bootstrap) + 'progressbar': BOOLEAN Progressbar for upload file (required Bootstrap) (defaults to false) - 'success': FUNCTION callback for ajax success function + 'success': FUNCTION Callback for ajax success function (defaults to null) - 'error': FUNCTION callback for ajax error function + 'error': FUNCTION Callback for ajax error function (defaults to null) - 'compose': FUNCTION callback for before send FormData customization + 'compose': FUNCTION Callback for before send FormData customization } (defaults to null) -'beforeRemove' callback for before remove element +'beforeRemove' Callback for before remove element (defaults to null) +'removeDialog': { Dialog for remove file (required jQuery UI) + (defaults to null) + 'id': STRING Dialog Id + (defaults to "***_remove_dialog") + 'title': STRING Title dialog + (defaults to "Remove") + 'text': STRING Body text + (defaults to "Are you sure?") + 'ok': STRING Text for OK button + (defaults to "Ok") + 'cancel': STRING Text for Cancel button + (defaults to "Cancel") +} + ``` diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index b8210c0..5025666 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -3,6 +3,7 @@ * Copyright notice and license must remain intact for legal use * Requires: jQuery 1.9.1+ * Bootstrap 3.3.4+ (for progressbar only) +* jQuery UI 1.11.4+ (for remove dialog only) * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF @@ -46,12 +47,19 @@ $('input[type=file]').simpleFilePreview({ 'readOnly': false, // Display with no possibility of modification 'ajaxUpload': { // Upload file via AJAX 'url': string, // URL for upload file - 'progressbar': false, // progressbar for upload file (required Bootstrap) - 'success': function (data, textStatus, jqXHR, inputFileElement), // callback for ajax success function - 'error': function (jqXHR, textStatus, errorThrown, inputFileElement), // callback for ajax error function - 'compose': function (formData) // callback for before send FormData customization + 'progressbar': false, // Progressbar for upload file (required Bootstrap) + 'success': function (data, textStatus, jqXHR, inputFileElement), // Callback for ajax success function + 'error': function (jqXHR, textStatus, errorThrown, inputFileElement), // Callback for ajax error function + 'compose': function (formData) // Callback for before send FormData customization + }, + 'beforeRemove': function (element), // Callback for before remove element + 'removeDialog': { // Dialog for remove file (required jQuery UI) + 'id': string, // Dialog Id + 'title': string, // Title dialog + 'text': string, // Body text + 'ok': string, // Text for OK button + 'cancel': string, // Text for Cancel button }, - 'beforeRemove': function (element), // callback for before remove element }); * * TODO: @@ -85,6 +93,23 @@ $('input[type=file]').simpleFilePreview({ var $body = $(this).closest('.simpleFilePreview_body'); + if (options.removeDialog) { + if (!options.removeDialog.id) { options.removeDialog.id = $(this).id + '_remove_dialog'; } + if (!options.removeDialog.title) { options.removeDialog.title = 'Remove'; } + if (!options.removeDialog.text) { options.removeDialog.text = 'Are you sure?'; } + if (!options.removeDialog.ok) { options.removeDialog.ok = 'Ok'; } + if (!options.removeDialog.cancel) { options.removeDialog.cancel = 'Cancel'; } + + $('

                                        ' + + '' + + options.removeDialog.text + + '

                                        ').dialog({ + autoOpen: false, + resizable: false, + modal: true, + }); + } + // open file browser dialog on click of styled "button" $body.on('click', '.simpleFilePreview_input', function (e) { $(this).closest('.simpleFilePreview').find('input.simpleFilePreview_formInput').trigger('click'); @@ -270,61 +295,26 @@ $('input[type=file]').simpleFilePreview({ // remove file when preview/icon is clicked $body.on('click', '.simpleFilePreview_preview', function () { if (!options.readOnly) { - var $this = $(this); - var $parents = $this.closest('.simpleFilePreview'); - - if (options.beforeRemove != null) { - options.beforeRemove($parents); - } - - if ($parents.attr('data-sfpallowmultiple') == 1 && $parents.siblings('.simpleFilePreview').length) { - if ($parents.hasClass('simpleFilePreview_existing')) { - $parents.parent().append(""); - } - - limit($this, options, 1); - - $parents.closest('.simpleFilePreview_multi').width('-=' + $parents.width()); - $parents.remove(); - - return this; - } - - // if it was an existing file, show file input and add "removeFiles" hidden input - if ($parents.hasClass('simpleFilePreview_existing')) { - $parents.find('input.simpleFilePreview_formInput').show(); - $parents.append(""); - $parents.removeClass('simpleFilePreview_existing'); // no longer needed - } - - limit($this, options, 1); - - // kill value in the input - var $input = $parents.find('input.simpleFilePreview_formInput').val(''); - - // Some browsers (*cough*IE*cough*) do not allow us to set val() - // on a file input, so we have to clone it without the value - if ($input && $input.length && $input.val().length) { - var attr = $input.get(0).attributes; - var a = ""; - - for (var j = 0, l = attr.length; j < l; ++j) { - if (attr[j].name != 'value' && attr[j].name != 'title') { - a += attr[j].name + "='" + $input.attr(attr[j].name) + "' "; - } - } - - $input.before(''); - $input.remove(); + var $pic = $(this); + if (!options.removeDialog) { + remove($pic, options); + } else { + var $dialog = $('#' + options.removeDialog.id); + $dialog.dialog('option', + 'buttons', [{ + text: options.removeDialog.ok, + click: function () { + remove($pic, options); + $(this).dialog("close"); + } + }, { + text: options.removeDialog.cancel, + click: function () { + $(this).dialog("close"); + } + }]); + $dialog.dialog("open"); } - - // remove the preview element - $this.remove(); - $parents.find('.simpleFilePreview_filename').remove(); - - // show styled input "button" - $parents.find('.simpleFilePreview_remove').hide().end() - .find('.simpleFilePreview_input').show(); } }); @@ -357,6 +347,63 @@ $('input[type=file]').simpleFilePreview({ return this; }; + var remove = function ($this, options) { + var $parents = $this.closest('.simpleFilePreview'); + + if (options.beforeRemove != null) { + options.beforeRemove($parents); + } + + if ($parents.attr('data-sfpallowmultiple') == 1 && $parents.siblings('.simpleFilePreview').length) { + if ($parents.hasClass('simpleFilePreview_existing')) { + $parents.parent().append(""); + } + + limit($this, options, 1); + + $parents.closest('.simpleFilePreview_multi').width('-=' + $parents.width()); + $parents.remove(); + + return this; + } + + // if it was an existing file, show file input and add "removeFiles" hidden input + if ($parents.hasClass('simpleFilePreview_existing')) { + $parents.find('input.simpleFilePreview_formInput').show(); + $parents.append(""); + $parents.removeClass('simpleFilePreview_existing'); // no longer needed + } + + limit($this, options, 1); + + // kill value in the input + var $input = $parents.find('input.simpleFilePreview_formInput').val(''); + + // Some browsers (*cough*IE*cough*) do not allow us to set val() + // on a file input, so we have to clone it without the value + if ($input && $input.length && $input.val().length) { + var attr = $input.get(0).attributes; + var a = ""; + + for (var j = 0, l = attr.length; j < l; ++j) { + if (attr[j].name != 'value' && attr[j].name != 'title') { + a += attr[j].name + "='" + $input.attr(attr[j].name) + "' "; + } + } + + $input.before(''); + $input.remove(); + } + + // remove the preview element + $this.remove(); + $parents.find('.simpleFilePreview_filename').remove(); + + // show styled input "button" + $parents.find('.simpleFilePreview_remove').hide().end() + .find('.simpleFilePreview_input').show(); + }; + var limit = function($this, options, add) { if (!options.limit) { return false; @@ -579,6 +626,7 @@ $('input[type=file]').simpleFilePreview({ 'readOnly': false, 'ajaxUpload': null, 'beforeRemove': null, + 'removeDialog': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index dad6854..c36822e 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(p){if(!this||!this.length)return this;p=p?p:{},p=e.extend({},e.simpleFilePreview.defaults,p),p.readOnly&&(p.radio=null),this.each(function(){l(e(this),p)});var n=e(this).closest(".simpleFilePreview_body");return n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(p.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!p.readOnly){if(p.ajaxUpload){var l=e(this),n=new FormData,a=i.target.name.indexOf("[");a>-1?n.append(i.target.name.substr(0,a),i.target.files[0]):n.append(i.target.name,i.target.files[0]),p.ajaxUpload.compose&&p.ajaxUpload.compose(n),p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(),e.ajax({url:p.ajaxUpload.url,type:"POST",data:n,dataType:"json",contentType:!1,processData:!1,success:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.success&&p.ajaxUpload.success(e,r,t,i.target)},error:function(e,r,t){p.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),p.ajaxUpload.error&&p.ajaxUpload.error(e,r,t,i.target)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&p.ajaxUpload.progressbar){var i=100*e.loaded/e.total,r=l.parent().find(".simpleFilePreview_progress div");r.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var v=e(this).closest(".simpleFilePreview");if(1==v.attr("data-sfpallowmultiple")&&!v.find(".simpleFilePreview_preview").length){var o=e.simpleFilePreview.uid++,m=v.clone(!0).attr("id","simpleFilePreview_"+o);p.ajaxUpload.progressbar&&m.find(".simpleFilePreview_progress").hide(),m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+o).attr("name",function(e,i){var l=v.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(r)?i:l.substring(0,l.indexOf("[")+1)+ ++r+l.substring(l.indexOf("]"))}).val(""),v.after(m);var d=v.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();d>v.closest(".simpleFilePreview_multiClip").width()&&v.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var w=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(w.test(this.files[0].type.toLowerCase())&&window.FileReader){var f=new FileReader;f.onload=function(e){r(v,e.target.result,"",p)},f.readAsDataURL(this.files[0])}else{var u=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);u&&u[1]&&p.icons[u[1]]?r(v,p.icons[u[1]],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}return p.radio&&v.find("input.simpleFilePreview_radio").val(v.context.files[0].name),this}var w=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),g=s(this.value);g=g?g.toLowerCase():null,g&&!/fakepath/.test(this.value.toLowerCase())&&w.test(i)?r(v,"file://"+this.value,"",p):p.icons[g]?r(v,p.icons[g],t(this.value),p):r(v,p.defaultIcon,t(this.value),p)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!p.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!p.readOnly){var l=e(this),r=l.closest(".simpleFilePreview");if(null!=p.beforeRemove&&p.beforeRemove(r),1==r.attr("data-sfpallowmultiple")&&r.siblings(".simpleFilePreview").length)return r.hasClass("simpleFilePreview_existing")&&r.parent().append(""),i(l,p,1),r.closest(".simpleFilePreview_multi").width("-="+r.width()),r.remove(),this;r.hasClass("simpleFilePreview_existing")&&(r.find("input.simpleFilePreview_formInput").show(),r.append(""),r.removeClass("simpleFilePreview_existing")),i(l,p,1);var t=r.find("input.simpleFilePreview_formInput").val("");if(t&&t.length&&t.val().length){for(var s=t.get(0).attributes,n="",a=0,v=s.length;v>a;++a)"value"!=s[a].name&&"title"!=s[a].name&&(n+=s[a].name+"='"+t.attr(s[a].name)+"' ");t.before(''),t.remove()}l.remove(),r.find(".simpleFilePreview_filename").remove(),r.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var r=i.find("li:first");i.animate({left:"-="+r.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var r=i.find("li:first").outerWidth(!0);i.animate({left:1>l+r?"+="+r:0})}}),this};var i=function(e,i,l){if(!i.limit)return!1;var r=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,r.length>i.limit+l?r.last().hide():r.last().show()},l=function(i,l){var p=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),p||(l.radio=null);var n=e("<"+(p?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(p?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+(l.ajaxUpload.progressbar?"
                                        ":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),p?(n.wrap("
                                          "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                          ");var a=l.existingFiles;if(!a)return p&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var v=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(p){var o=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",o?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=s(a[m]);f=f?f.toLowerCase():null,f&&v.test(f)?r(w,a[m],"",l):l.icons[f]?r(w,l.icons[f],t(a[m]),l):r(w,l.defaultIcon,t(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,o=e.isArray(a)?1:0;for(var m in a)u={id:o?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=s(u.file);return f=f?f.toLowerCase():null,f&&v.test(f)?r(n,u.file,"",l):l.icons[f]?r(n,l.icons[f],t(u.file),l):r(n,l.defaultIcon,t(u.file),l),i},r=function(e,l,r,t){r=r?r:null,l=(new RegExp("[/\\\\]").test(l)?"":t.iconPath)+l,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",l):(e.append(""+(r?r:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",t.removeMessage.prefix+" "+(r?r:t.removeMessage.stub))),i(e,t),!r)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(r):e.append(""+r+"").find(".simpleFilePreview_filename")},t=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},s=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.simpleFilePreview=function(l){if(!this||!this.length)return this;l=l?l:{},l=e.extend({},e.simpleFilePreview.defaults,l),l.readOnly&&(l.radio=null),this.each(function(){r(e(this),l)});var n=e(this).closest(".simpleFilePreview_body");return l.removeDialog&&(l.removeDialog.id||(l.removeDialog.id=e(this).id+"_remove_dialog"),l.removeDialog.title||(l.removeDialog.title="Remove"),l.removeDialog.text||(l.removeDialog.text="Are you sure?"),l.removeDialog.ok||(l.removeDialog.ok="Ok"),l.removeDialog.cancel||(l.removeDialog.cancel="Cancel"),e('

                                          '+l.removeDialog.text+"

                                          ").dialog({autoOpen:!1,resizable:!1,modal:!0})),n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(l.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!l.readOnly){if(l.ajaxUpload){var r=e(this),n=new FormData,a=i.target.name.indexOf("[");a>-1?n.append(i.target.name.substr(0,a),i.target.files[0]):n.append(i.target.name,i.target.files[0]),l.ajaxUpload.compose&&l.ajaxUpload.compose(n),l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").show(),e.ajax({url:l.ajaxUpload.url,type:"POST",data:n,dataType:"json",contentType:!1,processData:!1,success:function(e,t,s){l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").hide(),l.ajaxUpload.success&&l.ajaxUpload.success(e,t,s,i.target)},error:function(e,t,s){l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").hide(),l.ajaxUpload.error&&l.ajaxUpload.error(e,t,s,i.target)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&l.ajaxUpload.progressbar){var i=100*e.loaded/e.total,t=r.parent().find(".simpleFilePreview_progress div");t.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var o=e(this).closest(".simpleFilePreview");if(1==o.attr("data-sfpallowmultiple")&&!o.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=o.clone(!0).attr("id","simpleFilePreview_"+v);l.ajaxUpload.progressbar&&m.find(".simpleFilePreview_progress").hide(),m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=o.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(r)?i:l.substring(0,l.indexOf("[")+1)+ ++r+l.substring(l.indexOf("]"))}).val(""),o.after(m);var d=o.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();d>o.closest(".simpleFilePreview_multiClip").width()&&o.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var w=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(w.test(this.files[0].type.toLowerCase())&&window.FileReader){var f=new FileReader;f.onload=function(e){t(o,e.target.result,"",l)},f.readAsDataURL(this.files[0])}else{var u=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);u&&u[1]&&l.icons[u[1]]?t(o,l.icons[u[1]],s(this.value),l):t(o,l.defaultIcon,s(this.value),l)}return l.radio&&o.find("input.simpleFilePreview_radio").val(o.context.files[0].name),this}var w=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),g=p(this.value);g=g?g.toLowerCase():null,g&&!/fakepath/.test(this.value.toLowerCase())&&w.test(i)?t(o,"file://"+this.value,"",l):l.icons[g]?t(o,l.icons[g],s(this.value),l):t(o,l.defaultIcon,s(this.value),l)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!l.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!l.readOnly){var r=e(this);if(l.removeDialog){var t=e("#"+l.removeDialog.id);t.dialog("option","buttons",[{text:l.removeDialog.ok,click:function(){i(r,l),e(this).dialog("close")}},{text:l.removeDialog.cancel,click:function(){e(this).dialog("close")}}]),t.dialog("open")}else i(r,l)}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var r=i.find("li:first");i.animate({left:"-="+r.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var r=i.find("li:first").outerWidth(!0);i.animate({left:1>l+r?"+="+r:0})}}),this};var i=function(e,i){var r=e.closest(".simpleFilePreview");if(null!=i.beforeRemove&&i.beforeRemove(r),1==r.attr("data-sfpallowmultiple")&&r.siblings(".simpleFilePreview").length)return r.hasClass("simpleFilePreview_existing")&&r.parent().append(""),l(e,i,1),r.closest(".simpleFilePreview_multi").width("-="+r.width()),r.remove(),this;r.hasClass("simpleFilePreview_existing")&&(r.find("input.simpleFilePreview_formInput").show(),r.append(""),r.removeClass("simpleFilePreview_existing")),l(e,i,1);var t=r.find("input.simpleFilePreview_formInput").val("");if(t&&t.length&&t.val().length){for(var s=t.get(0).attributes,p="",n=0,a=s.length;a>n;++n)"value"!=s[n].name&&"title"!=s[n].name&&(p+=s[n].name+"='"+t.attr(s[n].name)+"' ");t.before(''),t.remove()}e.remove(),r.find(".simpleFilePreview_filename").remove(),r.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()},l=function(e,i,l){if(!i.limit)return!1;var r=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,r.length>i.limit+l?r.last().hide():r.last().show()},r=function(i,l){var r=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),r||(l.radio=null);var n=e("<"+(r?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(r?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+(l.ajaxUpload.progressbar?"
                                          ":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),r?(n.wrap("
                                            "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                            ");var a=l.existingFiles;if(!a)return r&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var o=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(r){var v=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",v?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=p(a[m]);f=f?f.toLowerCase():null,f&&o.test(f)?t(w,a[m],"",l):l.icons[f]?t(w,l.icons[f],s(a[m]),l):t(w,l.defaultIcon,s(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,v=e.isArray(a)?1:0;for(var m in a)u={id:v?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=p(u.file);return f=f?f.toLowerCase():null,f&&o.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],s(u.file),l):t(n,l.defaultIcon,s(u.file),l),i},t=function(e,i,r,t){r=r?r:null,i=(new RegExp("[/\\\\]").test(i)?"":t.iconPath)+i,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",i):(e.append(""+(r?r:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",t.removeMessage.prefix+" "+(r?r:t.removeMessage.stub))),l(e,t),!r)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(r):e.append(""+r+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},p=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,removeDialog:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From 2900da72665ea987b7073b33fdb9eb595b7fc219 Mon Sep 17 00:00:00 2001 From: zorg Date: Mon, 15 Jun 2015 20:12:44 +0500 Subject: [PATCH 11/18] Add open link function --- README.md | 25 +- jquery.simpleFilePreview.js | 432 ++++++++++++++++++++------------ jquery.simpleFilePreview.min.js | 2 +- 3 files changed, 291 insertions(+), 168 deletions(-) diff --git a/README.md b/README.md index 755964d..b0b6cbe 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling. -**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only), jQuery UI 1.11.4+ (for remove dialog only)** +**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only), jQuery UI 1.11.4+ (for dialog only)** ### Main Features @@ -87,6 +87,29 @@ simple and the UI allows for easy CSS styling. 'cancel': STRING Text for Cancel button (defaults to "Cancel") } +'contextMenu': { Context menu for select file source + (defaults to null) + 'fileText': STRING Text for file option + (defaults to "Open file") + 'linkText': STRING Text for link option + (defaults to "Open link") + 'id': STRING Dialog Id + (defaults to "***_openlink_dialog") + 'title': STRING Title dialog + (defaults to "Open link") + 'text': STRING Body text + (defaults to "Please enter link to file or image") + 'optionName': STRING Name of input link to image or file + (defaults to "Link") + 'ok': STRING Text for OK button + (defaults to "Ok") + 'cancel': STRING Text for Cancel button + (defaults to "Cancel") + 'inputName': STRING Name of hidden input element + (defaults to "input_openlink_dialog") +} +'parentSelector': STRING Parent selector for component + (defaults to null) ``` diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 5025666..e86cb05 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -3,7 +3,7 @@ * Copyright notice and license must remain intact for legal use * Requires: jQuery 1.9.1+ * Bootstrap 3.3.4+ (for progressbar only) -* jQuery UI 1.11.4+ (for remove dialog only) +* jQuery UI 1.11.4+ (for dialog only) * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF @@ -60,6 +60,18 @@ $('input[type=file]').simpleFilePreview({ 'ok': string, // Text for OK button 'cancel': string, // Text for Cancel button }, + 'contextMenu': { // Context menu for select file source + 'fileText': string, // Text for file option + 'linkText': string, // Text for link option + 'id': string, // Dialog Id + 'title': string, // Title dialog + 'text': string, // Body text + 'optionName': string, // Name of input link to image or file + 'ok': string, // Text for OK button + 'cancel': string, // Text for Cancel button + 'inputName': string // Name of hidden input element + }, + 'parentSelector': string, // Parent selector for component }); * * TODO: @@ -70,10 +82,10 @@ $('input[type=file]').simpleFilePreview({ * 0.1 Initial release * */ -;(function($) { +; (function ($) { 'use strict'; - $.fn.simpleFilePreview = function(options) { + $.fn.simpleFilePreview = function (options) { if (!this || !this.length) { return this; } @@ -87,12 +99,6 @@ $('input[type=file]').simpleFilePreview({ options.radio = null; } - this.each(function() { - setup($(this), options); - }); - - var $body = $(this).closest('.simpleFilePreview_body'); - if (options.removeDialog) { if (!options.removeDialog.id) { options.removeDialog.id = $(this).id + '_remove_dialog'; } if (!options.removeDialog.title) { options.removeDialog.title = 'Remove'; } @@ -101,7 +107,7 @@ $('input[type=file]').simpleFilePreview({ if (!options.removeDialog.cancel) { options.removeDialog.cancel = 'Cancel'; } $('

                                            ' + - '' + + '' + options.removeDialog.text + '

                                            ').dialog({ autoOpen: false, @@ -110,6 +116,54 @@ $('input[type=file]').simpleFilePreview({ }); } + if (options.contextMenu) { + if (!options.contextMenu.fileText) { options.contextMenu.fileText = 'Open file'; } + if (!options.contextMenu.linkText) { options.contextMenu.linkText = 'Open link'; } + if (!options.contextMenu.id) { options.contextMenu.id = $(this).id + '_openlink_dialog'; } + if (!options.contextMenu.title) { options.contextMenu.title = 'Open link'; } + if (!options.contextMenu.text) { options.contextMenu.text = 'Please enter link to file or image'; } + if (!options.contextMenu.optionName) { options.contextMenu.optionName = 'Link'; } + if (!options.contextMenu.ok) { options.contextMenu.ok = 'Ok'; } + if (!options.contextMenu.cancel) { options.contextMenu.cancel = 'Cancel'; } + if (!options.contextMenu.inputName) { options.contextMenu.inputName = 'input_openlink_dialog'; } + + $('

                                            ' + + options.contextMenu.text + + '

                                            ' + + '' + + '' + + '
                                            ' + + '

                                            ').dialog({ + autoOpen: false, + resizable: false, + modal: true, + }); + + var selector = ((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible)'; + context.init({ preventDoubleContext: false }); + context.settings({ compress: true }); + context.attach(selector, [ + { + text: options.contextMenu.fileText, + action: function (e) { + $(selector).find('.simpleFilePreview_input').trigger('click'); + } + }, + { + text: options.contextMenu.linkText, + action: function (e) { + openLinkDialog(e, options); + } + }, + ]); + } + + this.each(function () { + setup($(this), options); + }); + + var $body = ((options.parentSelector) ? $(options.parentSelector + ' .simpleFilePreview_body') : $(this).closest('.simpleFilePreview_body')); + // open file browser dialog on click of styled "button" $body.on('click', '.simpleFilePreview_input', function (e) { $(this).closest('.simpleFilePreview').find('input.simpleFilePreview_formInput').trigger('click'); @@ -132,149 +186,7 @@ $('input[type=file]').simpleFilePreview({ // when file input changes, get file contents and show preview (if it's an image) $body.on('change', '.simpleFilePreview input.simpleFilePreview_formInput', function (e) { - if (!options.readOnly) { - if (options.ajaxUpload) { - var $this = $(this); - var fd = new FormData(); - var cutNameToken = e.target.name.indexOf('['); - if (cutNameToken > -1) { - fd.append(e.target.name.substr(0, cutNameToken), e.target.files[0]); - } else { - fd.append(e.target.name, e.target.files[0]); - } - - if (options.ajaxUpload.compose) { - options.ajaxUpload.compose(fd); - } - - if (options.ajaxUpload.progressbar) { - $this.parent().find('.simpleFilePreview_progress').show(); - } - - $.ajax({ - url: options.ajaxUpload.url, - type: "POST", - data: fd, - dataType: 'json', - contentType: false, - processData: false, - success: function (data, textStatus, jqXHR) { - if (options.ajaxUpload.progressbar) { - $this.parent().find('.simpleFilePreview_progress').hide(); - } - if (options.ajaxUpload.success) { - options.ajaxUpload.success(data, textStatus, jqXHR, e.target); - } - }, - error: function (jqXHR, textStatus, errorThrown) { - if (options.ajaxUpload.progressbar) { - $this.parent().find('.simpleFilePreview_progress').hide(); - } - if (options.ajaxUpload.error) { - options.ajaxUpload.error(jqXHR, textStatus, errorThrown, e.target); - } - }, - xhr: function () { - var xhr = new window.XMLHttpRequest(); - //Upload progress - xhr.upload.addEventListener("progress", function (evt) { - if (evt.lengthComputable && options.ajaxUpload.progressbar) { - var percentComplete = evt.loaded * 100 / evt.total; - var progressbar = $this.parent().find('.simpleFilePreview_progress div'); - progressbar.css({ width: percentComplete + '%' }).attr('aria-valuenow', percentComplete); - } - }, false); - return xhr; - } - }); - } - - var $parents = $(this).closest('.simpleFilePreview'); - - // if it's a multi-select, add another selection box to the end - // NOTE: this is done first since we clone the previous input - // NOTE: the second check is there because IE 8 fires multiple change events for no good reason - if (($parents.attr('data-sfpallowmultiple') == 1) && !$parents.find('.simpleFilePreview_preview').length) { - var newId = $.simpleFilePreview.uid++; - var $newN = $parents.clone(true).attr('id', "simpleFilePreview_" + newId); - - if (options.ajaxUpload.progressbar) { - $newN.find('.simpleFilePreview_progress').hide(); - } - - $newN.find('input.simpleFilePreview_formInput') - .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) - .attr('name', function (index, previousValue) { - var previousName = $parents.find('input.simpleFilePreview_formInput').attr('name'); - var inputIndex = parseInt(previousName.substring(previousName.indexOf('[') + 1, previousName.indexOf(']'))); - return (!isNaN(inputIndex)) ? previousName.substring(0, previousName.indexOf('[') + 1) + ++inputIndex + previousName.substring(previousName.indexOf(']')) : previousValue; - }) - .val(''); - - $parents.after($newN); - - var nw = $parents.closest('.simpleFilePreview_multi').width('+=' + $newN.outerWidth(true)).width(); - - if (nw > $parents.closest('.simpleFilePreview_multiClip').width()) { - $parents.closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_shiftRight').trigger('click'); - } - } - - if (this.files && this.files[0]) { - var exp = new RegExp("^image\/(" + $.simpleFilePreview.previewFileTypes + ")$"); - - if (exp.test(this.files[0].type.toLowerCase()) && window.FileReader) { - // show preview of image file - var $FR = new FileReader(); - - $FR.onload = function (e) { - addOrChangePreview($parents, e.target.result, '', options); - }; - - $FR.readAsDataURL(this.files[0]); - } else { - // show icon if not an image upload - var m = this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); - - if (m && m[1] && options.icons[m[1]]) { - addOrChangePreview($parents, options.icons[m[1]], getFilename(this.value), options); - } else { - addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); - } - } - - if (options.radio) { - $parents.find('input.simpleFilePreview_radio').val($parents.context.files[0].name); - } - - return this; - } - - // Any browser not supporting the File API (and FileReader) - - // Some versions of IE don't have real paths, and can't support - // any other way to do file preview without uploading to the server - // If a browser does report a valid path (IE or otherwise), then - // we'll try to get the file preview - - var exp = new RegExp("^(" + $.simpleFilePreview.previewFileTypes + ")$"); - - var ext = getFileExt(this.value); - ext = ext ? ext.toLowerCase() : null; - - if (ext && !(/fakepath/.test(this.value.toLowerCase())) && exp.test(e)) { - // older versions of IE (and some other browsers) report the local - // file path, so try to get a preview that way - addOrChangePreview($parents, "file://" + this.value, '', options); - } else { - // not an image (or using fakepath), so no preview anyway - if (options.icons[ext]) { - addOrChangePreview($parents, options.icons[ext], getFilename(this.value), options); - } else { - addOrChangePreview($parents, options.defaultIcon, getFilename(this.value), options); - } - } - } + fileProcess(options, $(this), 'file'); }); // show or hide "remove" icon for file preview/icon @@ -288,7 +200,7 @@ $('input[type=file]').simpleFilePreview({ } }); - $body.on('mouseout', '.simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput', function() { + $body.on('mouseout', '.simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput', function () { $(this).closest('.simpleFilePreview').find('.simpleFilePreview_remove').hide(); }) @@ -319,7 +231,7 @@ $('input[type=file]').simpleFilePreview({ }); // shift buttons for multi-selects - $body.on('click', '.simpleFilePreview_shiftRight', function() { + $body.on('click', '.simpleFilePreview_shiftRight', function () { var ul = $(this).closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_multi'); var width = parseInt(ul.css('left')) + ul.width(); @@ -331,7 +243,7 @@ $('input[type=file]').simpleFilePreview({ } }); - $body.on('click', '.simpleFilePreview_shiftLeft', function() { + $body.on('click', '.simpleFilePreview_shiftLeft', function () { var ul = $(this).closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_multi'); var left = parseInt(ul.css('left')); @@ -404,7 +316,7 @@ $('input[type=file]').simpleFilePreview({ .find('.simpleFilePreview_input').show(); }; - var limit = function($this, options, add) { + var limit = function ($this, options, add) { if (!options.limit) { return false; } @@ -419,7 +331,7 @@ $('input[type=file]').simpleFilePreview({ } }; - var setup = function(these, options) { + var setup = function (these, options) { var isMulti = these.is('[multiple]'); // "multiple" removed because it's handled later manually @@ -439,6 +351,7 @@ $('input[type=file]').simpleFilePreview({ + "" + options.removeContent + "" + ((options.radio) ? "" : "") + ((options.ajaxUpload.progressbar) ? "
                                            " : "") + + ((options.contextMenu) ? '' : '') + ""); these.before($html); @@ -485,6 +398,10 @@ $('input[type=file]').simpleFilePreview({ var ni = $.simpleFilePreview.uid++; var nn = $html.clone(true).attr('id', "simpleFilePreview_" + ni); + if (options.contextMenu) { + nn.find('[name^="' + options.contextMenu.inputName + '"]').attr('name', options.contextMenu.inputName + '[' + ++$.simpleFilePreview.linkid + ']').val(''); + } + nn.addClass('simpleFilePreview_existing') .attr('data-sfprid', arr ? exists[i] : i) .find('input.simpleFilePreview_formInput').remove(); @@ -551,9 +468,9 @@ $('input[type=file]').simpleFilePreview({ return these; }; - var addOrChangePreview = function($parents, src, filename, options) { + var addOrChangePreview = function ($parents, src, filename, options) { filename = filename ? filename : null; - src = ((new RegExp('[/\\\\]')).test(src) ? '' : (options.iconPath)) + src + src = ((new RegExp('^(http|https)://').test(src)) ? src : (((new RegExp('[/\\\\]')).test(src) ? '' : (options.iconPath)) + src)); $parents.find('.simpleFilePreview_input').hide(); @@ -587,7 +504,7 @@ $('input[type=file]').simpleFilePreview({ } }; - var getFilename = function($parents) { + var getFilename = function ($parents) { var m = $parents.match(/[\/\\]([^\/\\]+)$/); if (m && m[1] && m[1].length) { @@ -597,7 +514,7 @@ $('input[type=file]').simpleFilePreview({ return null; }; - var getFileExt = function($parents) { + var getFileExt = function ($parents) { var m = $parents.match(/[\.]([^\/\\\.]+)$/); if (m && m[1] && m[1].length) { @@ -607,9 +524,189 @@ $('input[type=file]').simpleFilePreview({ return null; }; + var openLinkDialog = function (e, options) { + var $dialog = $('#' + options.contextMenu.id); + $dialog.dialog('option', + 'buttons', [{ + text: options.contextMenu.ok, + click: function () { + var $element = $(((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible) input[name^="' +options.contextMenu.inputName + '"]'); + $element.val($('#' + options.contextMenu.id + '_link').val()); + fileProcess(options, $element, 'link'); + $(this).dialog("close"); + } + }, { + text: options.contextMenu.cancel, + click: function () { + $(this).dialog("close"); + } + }]); + $dialog.dialog("open"); + }; + + var fileProcess = function (options, $this, type) { + if (!options.readOnly) { + var _this = $this.get()[0]; + if (options.ajaxUpload) { + var fd = new FormData(); + var cutNameToken = _this.name.indexOf('['); + var value = ((type == 'file') ? _this.files[0] : ((type == 'link') ? $this.val() : '')); + if (cutNameToken > -1) { + fd.append(_this.name.substr(0, cutNameToken), value); + } else { + fd.append(_this.name, value); + } + + if (options.ajaxUpload.compose) { + options.ajaxUpload.compose(fd); + } + + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').show(); + } + + $.ajax({ + url: options.ajaxUpload.url, + type: "POST", + data: fd, + dataType: 'json', + contentType: false, + processData: false, + success: function (data, textStatus, jqXHR) { + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').hide(); + } + if (options.ajaxUpload.success) { + options.ajaxUpload.success(data, textStatus, jqXHR, _this); + } + }, + error: function (jqXHR, textStatus, errorThrown) { + if (options.ajaxUpload.progressbar) { + $this.parent().find('.simpleFilePreview_progress').hide(); + } + if (options.ajaxUpload.error) { + options.ajaxUpload.error(jqXHR, textStatus, errorThrown, _this); + } + }, + xhr: function () { + var xhr = new window.XMLHttpRequest(); + //Upload progress + xhr.upload.addEventListener("progress", function (evt) { + if (evt.lengthComputable && options.ajaxUpload.progressbar) { + var percentComplete = evt.loaded * 100 / evt.total; + var progressbar = $this.parent().find('.simpleFilePreview_progress div'); + progressbar.css({ width: percentComplete + '%' }).attr('aria-valuenow', percentComplete); + } + }, false); + return xhr; + } + }); + } + + var $parents = $this.closest('.simpleFilePreview'); + + // if it's a multi-select, add another selection box to the end + // NOTE: this is done first since we clone the previous input + // NOTE: the second check is there because IE 8 fires multiple change events for no good reason + if (($parents.attr('data-sfpallowmultiple') == 1) && !$parents.find('.simpleFilePreview_preview').length) { + var newId = $.simpleFilePreview.uid++; + var $newN = $parents.clone(true).attr('id', "simpleFilePreview_" +newId); + + if (options.contextMenu) { + $newN.find('[name^="' + options.contextMenu.inputName + '"]').attr('name', options.contextMenu.inputName + '[' + ++$.simpleFilePreview.linkid + ']').val(''); + } + + if (options.ajaxUpload.progressbar) { + $newN.find('.simpleFilePreview_progress').hide(); + } + + $newN.find('input.simpleFilePreview_formInput') + .attr('id', $newN.find('input.simpleFilePreview_formInput').attr('id') + '_' + newId) + .attr('name', function (index, previousValue) { + var previousName = $parents.find('input.simpleFilePreview_formInput').attr('name'); + var inputIndex = parseInt(previousName.substring(previousName.indexOf('[') + 1, previousName.indexOf(']'))); + return (!isNaN(inputIndex)) ? previousName.substring(0, previousName.indexOf('[') + 1) + ++inputIndex + previousName.substring(previousName.indexOf(']')) : previousValue; + }) + .val(''); + + $parents.after($newN); + + var nw = $parents.closest('.simpleFilePreview_multi').width('+=' + $newN.outerWidth(true)).width(); + + if (nw > $parents.closest('.simpleFilePreview_multiClip').width()) { + $parents.closest('.simpleFilePreview_multiUI').find('.simpleFilePreview_shiftRight').trigger('click'); + } + } + + var ext = getFileExt(_this.value); + ext = ext ? ext.toLowerCase(): null; + + if ((type == 'file') && _this.files && _this.files[0]) { + var exp = new RegExp("^image\/(" + $.simpleFilePreview.previewFileTypes + ")$"); + + if (exp.test(_this.files[0].type.toLowerCase()) && window.FileReader) { + // show preview of image file + var $FR = new FileReader(); + + $FR.onload = function (e) { + addOrChangePreview($parents, e.target.result, '', options); + }; + + $FR.readAsDataURL(_this.files[0]); + } else { + // show icon if not an image upload + var m = _this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); + + if (m && m[1] && options.icons[m[1]]) { + addOrChangePreview($parents, options.icons[m[1]], getFilename(_this.value), options); + } else { + addOrChangePreview($parents, options.defaultIcon, getFilename(_this.value), options); + } + } + + if (options.radio) { + $parents.find('input.simpleFilePreview_radio').val($parents.context.files[0].name); + } + + return _this; + } + + if (type == 'file') { + // Any browser not supporting the File API (and FileReader) + // Some versions of IE don't have real paths, and can't support + // any other way to do file preview without uploading to the server + // If a browser does report a valid path (IE or otherwise), then + // we'll try to get the file preview + var exp = new RegExp("^(" +$.simpleFilePreview.previewFileTypes + ")$"); + + if (ext && !(/fakepath/.test(_this.value.toLowerCase())) && exp.test(e)) { + // older versions of IE (and some other browsers) report the local + // file path, so try to get a preview that way + addOrChangePreview($parents, "file://" +_this.value, '', options); + } else { + // not an image (or using fakepath), so no preview anyway + if (options.icons[ext]) { + addOrChangePreview($parents, options.icons[ext], getFilename(_this.value), options); + } else { + addOrChangePreview($parents, options.defaultIcon, getFilename(_this.value), options); + } + } + } + + if (type == 'link') { + var exp = new RegExp("^(" + $.simpleFilePreview.previewFileTypes + ")$"); + if (exp.test(ext)) { + addOrChangePreview($parents, $this.val(), '', options); + } else { + addOrChangePreview($parents, ((options.icons[ext]) ? options.icons[ext] : options.defaultIcon), getFilename(_this.value), options); + } + } + } + }; + // Static properties $.simpleFilePreview = { - defaults: { + defaults: { 'buttonContent': 'Add File', 'removeContent': 'X', 'existingFiles': null, // array or object. if object, key is used in the remove hidden input @@ -621,12 +718,14 @@ $('input[type=file]').simpleFilePreview({ 'removeMessage': { 'prefix': 'Remove', 'stub': 'this file', - }, + }, 'radio': null, 'readOnly': false, 'ajaxUpload': null, 'beforeRemove': null, 'removeDialog': null, + 'contextMenu': null, + 'parentSelector': null, 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', @@ -665,9 +764,10 @@ $('input[type=file]').simpleFilePreview({ 'x-excel': 'preview_xls.png', 'x-ms-excel': 'preview_xls.png', 'vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'preview_xls.png' - } - }, + } + }, uid: 0, + linkid: 0, init: false, previewFileTypes: 'p?jpe?g|png|gif|bmp|svg' }; diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index c36822e..1a7aa7e 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(e){"use strict";e.fn.simpleFilePreview=function(l){if(!this||!this.length)return this;l=l?l:{},l=e.extend({},e.simpleFilePreview.defaults,l),l.readOnly&&(l.radio=null),this.each(function(){r(e(this),l)});var n=e(this).closest(".simpleFilePreview_body");return l.removeDialog&&(l.removeDialog.id||(l.removeDialog.id=e(this).id+"_remove_dialog"),l.removeDialog.title||(l.removeDialog.title="Remove"),l.removeDialog.text||(l.removeDialog.text="Are you sure?"),l.removeDialog.ok||(l.removeDialog.ok="Ok"),l.removeDialog.cancel||(l.removeDialog.cancel="Cancel"),e('

                                            '+l.removeDialog.text+"

                                            ").dialog({autoOpen:!1,resizable:!1,modal:!0})),n.on("click",".simpleFilePreview_input",function(i){e(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),i.preventDefault()}),n.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(i){return e(this).val().length?(l.readOnly||e(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void i.preventDefault()):this}),n.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(i){if(!l.readOnly){if(l.ajaxUpload){var r=e(this),n=new FormData,a=i.target.name.indexOf("[");a>-1?n.append(i.target.name.substr(0,a),i.target.files[0]):n.append(i.target.name,i.target.files[0]),l.ajaxUpload.compose&&l.ajaxUpload.compose(n),l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").show(),e.ajax({url:l.ajaxUpload.url,type:"POST",data:n,dataType:"json",contentType:!1,processData:!1,success:function(e,t,s){l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").hide(),l.ajaxUpload.success&&l.ajaxUpload.success(e,t,s,i.target)},error:function(e,t,s){l.ajaxUpload.progressbar&&r.parent().find(".simpleFilePreview_progress").hide(),l.ajaxUpload.error&&l.ajaxUpload.error(e,t,s,i.target)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&l.ajaxUpload.progressbar){var i=100*e.loaded/e.total,t=r.parent().find(".simpleFilePreview_progress div");t.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var o=e(this).closest(".simpleFilePreview");if(1==o.attr("data-sfpallowmultiple")&&!o.find(".simpleFilePreview_preview").length){var v=e.simpleFilePreview.uid++,m=o.clone(!0).attr("id","simpleFilePreview_"+v);l.ajaxUpload.progressbar&&m.find(".simpleFilePreview_progress").hide(),m.find("input.simpleFilePreview_formInput").attr("id",m.find("input.simpleFilePreview_formInput").attr("id")+"_"+v).attr("name",function(e,i){var l=o.find("input.simpleFilePreview_formInput").attr("name"),r=parseInt(l.substring(l.indexOf("[")+1,l.indexOf("]")));return isNaN(r)?i:l.substring(0,l.indexOf("[")+1)+ ++r+l.substring(l.indexOf("]"))}).val(""),o.after(m);var d=o.closest(".simpleFilePreview_multi").width("+="+m.outerWidth(!0)).width();d>o.closest(".simpleFilePreview_multiClip").width()&&o.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}if(this.files&&this.files[0]){var w=new RegExp("^image/("+e.simpleFilePreview.previewFileTypes+")$");if(w.test(this.files[0].type.toLowerCase())&&window.FileReader){var f=new FileReader;f.onload=function(e){t(o,e.target.result,"",l)},f.readAsDataURL(this.files[0])}else{var u=this.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);u&&u[1]&&l.icons[u[1]]?t(o,l.icons[u[1]],s(this.value),l):t(o,l.defaultIcon,s(this.value),l)}return l.radio&&o.find("input.simpleFilePreview_radio").val(o.context.files[0].name),this}var w=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$"),g=p(this.value);g=g?g.toLowerCase():null,g&&!/fakepath/.test(this.value.toLowerCase())&&w.test(i)?t(o,"file://"+this.value,"",l):l.icons[g]?t(o,l.icons[g],s(this.value),l):t(o,l.defaultIcon,s(this.value),l)}}),n.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!l.readOnly){var i=e(this).closest(".simpleFilePreview");i.find(".simpleFilePreview_preview").is(":visible")&&i.find(".simpleFilePreview_remove").show()}}),n.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){e(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),n.on("click",".simpleFilePreview_preview",function(){if(!l.readOnly){var r=e(this);if(l.removeDialog){var t=e("#"+l.removeDialog.id);t.dialog("option","buttons",[{text:l.removeDialog.ok,click:function(){i(r,l),e(this).dialog("close")}},{text:l.removeDialog.cancel,click:function(){e(this).dialog("close")}}]),t.dialog("open")}else i(r,l)}}),n.on("click",".simpleFilePreview_shiftRight",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"))+i.width();if(l>i.parent().width()){var r=i.find("li:first");i.animate({left:"-="+r.outerWidth(!0)})}}),n.on("click",".simpleFilePreview_shiftLeft",function(){var i=e(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),l=parseInt(i.css("left"));if(0>l){var r=i.find("li:first").outerWidth(!0);i.animate({left:1>l+r?"+="+r:0})}}),this};var i=function(e,i){var r=e.closest(".simpleFilePreview");if(null!=i.beforeRemove&&i.beforeRemove(r),1==r.attr("data-sfpallowmultiple")&&r.siblings(".simpleFilePreview").length)return r.hasClass("simpleFilePreview_existing")&&r.parent().append(""),l(e,i,1),r.closest(".simpleFilePreview_multi").width("-="+r.width()),r.remove(),this;r.hasClass("simpleFilePreview_existing")&&(r.find("input.simpleFilePreview_formInput").show(),r.append(""),r.removeClass("simpleFilePreview_existing")),l(e,i,1);var t=r.find("input.simpleFilePreview_formInput").val("");if(t&&t.length&&t.val().length){for(var s=t.get(0).attributes,p="",n=0,a=s.length;a>n;++n)"value"!=s[n].name&&"title"!=s[n].name&&(p+=s[n].name+"='"+t.attr(s[n].name)+"' ");t.before(''),t.remove()}e.remove(),r.find(".simpleFilePreview_filename").remove(),r.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()},l=function(e,i,l){if(!i.limit)return!1;var r=e.closest(".simpleFilePreview_multi").find("> li");l=l?l:0,r.length>i.limit+l?r.last().hide():r.last().show()},r=function(i,l){var r=i.is("[multiple]");i=i.removeAttr("multiple").addClass("simpleFilePreview_formInput"),r||(l.radio=null);var n=e("<"+(r?"li":"div")+" id='simpleFilePreview_"+e.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(l.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(r?1:0)+"'>"+l.buttonContent+""+l.removeContent+""+(l.radio?"":"")+(l.ajaxUpload.progressbar?"
                                            ":"")+"");i.before(n),n.append(i),l.readOnly&&n.hide(),i.css({width:n.width()+"px",height:n.height()-(l.radio?20:0)+"px"}),r?(n.wrap("
                                              "),n.closest(".simpleFilePreview_multiUI").prepend(""+l.shiftRight+"").append(""+l.shiftLeft+"")):n.wrap("
                                              ");var a=l.existingFiles;if(!a)return r&&e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),i;var o=new RegExp("^("+e.simpleFilePreview.previewFileTypes+")$");if(r){var v=e.isArray(a)?1:0;for(var m in a){var d=e.simpleFilePreview.uid++,w=n.clone(!0).attr("id","simpleFilePreview_"+d);w.addClass("simpleFilePreview_existing").attr("data-sfprid",v?a[m]:m).find("input.simpleFilePreview_formInput").remove(),w.show(),n.before(w);var f=p(a[m]);f=f?f.toLowerCase():null,f&&o.test(f)?t(w,a[m],"",l):l.icons[f]?t(w,l.icons[f],s(a[m]),l):t(w,l.defaultIcon,s(a[m]),l),l.radio&&w.find("input.simpleFilePreview_radio").val(w.attr("data-sfprid"))}return e(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),l.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+l.radio.checkedItem+"']").prop("checked",!0),i}var u=null,v=e.isArray(a)?1:0;for(var m in a)u={id:v?a[m]:m,file:a[m]};if(!u)return i;n.attr("data-sfprid",u.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var f=p(u.file);return f=f?f.toLowerCase():null,f&&o.test(f)?t(n,u.file,"",l):l.icons[f]?t(n,l.icons[f],s(u.file),l):t(n,l.defaultIcon,s(u.file),l),i},t=function(e,i,r,t){r=r?r:null,i=(new RegExp("[/\\\\]").test(i)?"":t.iconPath)+i,e.find(".simpleFilePreview_input").hide();var s=e.find(".simpleFilePreview_preview");if(s&&s.length?s.attr("src",i):(e.append(""+(r?r:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",t.removeMessage.prefix+" "+(r?r:t.removeMessage.stub))),l(e,t),!r)return null;var p=e.find(".simpleFilePreview_filename");p&&p.length?p.text(r):e.append(""+r+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},p=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null};e.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,removeDialog:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function(i){"use strict";i.fn.simpleFilePreview=function(e){if(!this||!this.length)return this;if(e=e?e:{},e=i.extend({},i.simpleFilePreview.defaults,e),e.readOnly&&(e.radio=null),e.removeDialog&&(e.removeDialog.id||(e.removeDialog.id=i(this).id+"_remove_dialog"),e.removeDialog.title||(e.removeDialog.title="Remove"),e.removeDialog.text||(e.removeDialog.text="Are you sure?"),e.removeDialog.ok||(e.removeDialog.ok="Ok"),e.removeDialog.cancel||(e.removeDialog.cancel="Cancel"),i('

                                              '+e.removeDialog.text+"

                                              ").dialog({autoOpen:!1,resizable:!1,modal:!0})),e.contextMenu){e.contextMenu.fileText||(e.contextMenu.fileText="Open file"),e.contextMenu.linkText||(e.contextMenu.linkText="Open link"),e.contextMenu.id||(e.contextMenu.id=i(this).id+"_openlink_dialog"),e.contextMenu.title||(e.contextMenu.title="Open link"),e.contextMenu.text||(e.contextMenu.text="Please enter link to file or image"),e.contextMenu.optionName||(e.contextMenu.optionName="Link"),e.contextMenu.ok||(e.contextMenu.ok="Ok"),e.contextMenu.cancel||(e.contextMenu.cancel="Cancel"),e.contextMenu.inputName||(e.contextMenu.inputName="input_openlink_dialog"),i('

                                              '+e.contextMenu.text+'

                                              ').dialog({autoOpen:!1,resizable:!1,modal:!0});var l=(e.parentSelector?e.parentSelector:"body")+" li:has(a.simpleFilePreview_input:visible)";context.init({preventDoubleContext:!1}),context.settings({compress:!0}),context.attach(l,[{text:e.contextMenu.fileText,action:function(){i(l).find(".simpleFilePreview_input").trigger("click")}},{text:e.contextMenu.linkText,action:function(i){a(i,e)}}])}this.each(function(){n(i(this),e)});var r=e.parentSelector?i(e.parentSelector+" .simpleFilePreview_body"):i(this).closest(".simpleFilePreview_body");return r.on("click",".simpleFilePreview_input",function(e){i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),e.preventDefault()}),r.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(t){return i(this).val().length?(e.readOnly||i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void t.preventDefault()):this}),r.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(){o(e,i(this),"file")}),r.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!e.readOnly){var t=i(this).closest(".simpleFilePreview");t.find(".simpleFilePreview_preview").is(":visible")&&t.find(".simpleFilePreview_remove").show()}}),r.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),r.on("click",".simpleFilePreview_preview",function(){if(!e.readOnly){var l=i(this);if(e.removeDialog){var n=i("#"+e.removeDialog.id);n.dialog("option","buttons",[{text:e.removeDialog.ok,click:function(){t(l,e),i(this).dialog("close")}},{text:e.removeDialog.cancel,click:function(){i(this).dialog("close")}}]),n.dialog("open")}else t(l,e)}}),r.on("click",".simpleFilePreview_shiftRight",function(){var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),t=parseInt(e.css("left"))+e.width();if(t>e.parent().width()){var l=e.find("li:first");e.animate({left:"-="+l.outerWidth(!0)})}}),r.on("click",".simpleFilePreview_shiftLeft",function(){var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),t=parseInt(e.css("left"));if(0>t){var l=e.find("li:first").outerWidth(!0);e.animate({left:1>t+l?"+="+l:0})}}),this};var t=function(e,i){var t=e.closest(".simpleFilePreview");if(null!=i.beforeRemove&&i.beforeRemove(t),1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),l(e,i,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),l(e,i,1);var n=t.find("input.simpleFilePreview_formInput").val("");if(n&&n.length&&n.val().length){for(var r=n.get(0).attributes,s="",p=0,a=r.length;a>p;++p)"value"!=r[p].name&&"title"!=r[p].name&&(s+=r[p].name+"='"+n.attr(r[p].name)+"' ");n.before(''),n.remove()}e.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()},l=function(e,i,t){if(!i.limit)return!1;var l=e.closest(".simpleFilePreview_multi").find("> li");t=t?t:0,l.length>i.limit+t?l.last().hide():l.last().show()},n=function(e,t){var l=e.is("[multiple]");e=e.removeAttr("multiple").addClass("simpleFilePreview_formInput"),l||(t.radio=null);var n=i("<"+(l?"li":"div")+" id='simpleFilePreview_"+i.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(t.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(l?1:0)+"'>"+t.buttonContent+""+t.removeContent+""+(t.radio?"":"")+(t.ajaxUpload.progressbar?"
                                              ":"")+(t.contextMenu?'':"")+"");e.before(n),n.append(e),t.readOnly&&n.hide(),e.css({width:n.width()+"px",height:n.height()-(t.radio?20:0)+"px"}),l?(n.wrap("
                                                "),n.closest(".simpleFilePreview_multiUI").prepend(""+t.shiftRight+"").append(""+t.shiftLeft+"")):n.wrap("
                                                ");var a=t.existingFiles;if(!a)return l&&i(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),e;var o=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");if(l){var v=i.isArray(a)?1:0;for(var m in a){var d=i.simpleFilePreview.uid++,u=n.clone(!0).attr("id","simpleFilePreview_"+d);t.contextMenu&&u.find('[name^="'+t.contextMenu.inputName+'"]').attr("name",t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""),u.addClass("simpleFilePreview_existing").attr("data-sfprid",v?a[m]:m).find("input.simpleFilePreview_formInput").remove(),u.show(),n.before(u);var c=p(a[m]);c=c?c.toLowerCase():null,c&&o.test(c)?r(u,a[m],"",t):t.icons[c]?r(u,t.icons[c],s(a[m]),t):r(u,t.defaultIcon,s(a[m]),t),t.radio&&u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid"))}return i(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),t.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+t.radio.checkedItem+"']").prop("checked",!0),e}var w=null,v=i.isArray(a)?1:0;for(var m in a)w={id:v?a[m]:m,file:a[m]};if(!w)return e;n.attr("data-sfprid",w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var c=p(w.file);return c=c?c.toLowerCase():null,c&&o.test(c)?r(n,w.file,"",t):t.icons[c]?r(n,t.icons[c],s(w.file),t):r(n,t.defaultIcon,s(w.file),t),e},r=function(e,i,t,n){t=t?t:null,i=new RegExp("^(http|https)://").test(i)?i:(new RegExp("[/\\\\]").test(i)?"":n.iconPath)+i,e.find(".simpleFilePreview_input").hide();var r=e.find(".simpleFilePreview_preview");if(r&&r.length?r.attr("src",i):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",n.removeMessage.prefix+" "+(t?t:n.removeMessage.stub))),l(e,n),!t)return null;var s=e.find(".simpleFilePreview_filename");s&&s.length?s.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},p=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null},a=function(e,t){var l=i("#"+t.contextMenu.id);l.dialog("option","buttons",[{text:t.contextMenu.ok,click:function(){var e=i((t.parentSelector?t.parentSelector:"body")+' li:has(a.simpleFilePreview_input:visible) input[name^="'+t.contextMenu.inputName+'"]');e.val(i("#"+t.contextMenu.id+"_link").val()),o(t,e,"link"),i(this).dialog("close")}},{text:t.contextMenu.cancel,click:function(){i(this).dialog("close")}}]),l.dialog("open")},o=function(t,l,n){if(!t.readOnly){var a=l.get()[0];if(t.ajaxUpload){var o=new FormData,v=a.name.indexOf("["),m="file"==n?a.files[0]:"link"==n?l.val():"";v>-1?o.append(a.name.substr(0,v),m):o.append(a.name,m),t.ajaxUpload.compose&&t.ajaxUpload.compose(o),t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(),i.ajax({url:t.ajaxUpload.url,type:"POST",data:o,dataType:"json",contentType:!1,processData:!1,success:function(e,i,n){t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),t.ajaxUpload.success&&t.ajaxUpload.success(e,i,n,a)},error:function(e,i,n){t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),t.ajaxUpload.error&&t.ajaxUpload.error(e,i,n,a)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&t.ajaxUpload.progressbar){var i=100*e.loaded/e.total,n=l.parent().find(".simpleFilePreview_progress div");n.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var d=l.closest(".simpleFilePreview");if(1==d.attr("data-sfpallowmultiple")&&!d.find(".simpleFilePreview_preview").length){var u=i.simpleFilePreview.uid++,c=d.clone(!0).attr("id","simpleFilePreview_"+u);t.contextMenu&&c.find('[name^="'+t.contextMenu.inputName+'"]').attr("name",t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""),t.ajaxUpload.progressbar&&c.find(".simpleFilePreview_progress").hide(),c.find("input.simpleFilePreview_formInput").attr("id",c.find("input.simpleFilePreview_formInput").attr("id")+"_"+u).attr("name",function(e,i){var t=d.find("input.simpleFilePreview_formInput").attr("name"),l=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(l)?i:t.substring(0,t.indexOf("[")+1)+ ++l+t.substring(t.indexOf("]"))}).val(""),d.after(c);var w=d.closest(".simpleFilePreview_multi").width("+="+c.outerWidth(!0)).width();w>d.closest(".simpleFilePreview_multiClip").width()&&d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}var f=p(a.value);if(f=f?f.toLowerCase():null,"file"==n&&a.files&&a.files[0]){var g=new RegExp("^image/("+i.simpleFilePreview.previewFileTypes+")$");if(g.test(a.files[0].type.toLowerCase())&&window.FileReader){var x=new FileReader;x.onload=function(e){r(d,e.target.result,"",t)},x.readAsDataURL(a.files[0])}else{var _=a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);_&&_[1]&&t.icons[_[1]]?r(d,t.icons[_[1]],s(a.value),t):r(d,t.defaultIcon,s(a.value),t)}return t.radio&&d.find("input.simpleFilePreview_radio").val(d.context.files[0].name),a}if("file"==n){var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");f&&!/fakepath/.test(a.value.toLowerCase())&&g.test(e)?r(d,"file://"+a.value,"",t):t.icons[f]?r(d,t.icons[f],s(a.value),t):r(d,t.defaultIcon,s(a.value),t)}if("link"==n){var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");g.test(f)?r(d,l.val(),"",t):r(d,t.icons[f]?t.icons[f]:t.defaultIcon,s(a.value),t)}}};i.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,removeDialog:null,contextMenu:null,parentSelector:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,linkid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From e0415e2c9b03973ab79b8e2d7c2728996d507b38 Mon Sep 17 00:00:00 2001 From: zorg Date: Mon, 15 Jun 2015 20:34:30 +0500 Subject: [PATCH 12/18] fix readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b0b6cbe..ffe93ff 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling. -**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only), jQuery UI 1.11.4+ (for dialog only)** +**Requires: jQuery 1.9.1+, Bootstrap 3.3.4+ (for progressbar only), jQuery UI 1.11.4+ (for dialog only), context.js 1.0.1+ (for link open only)** ### Main Features From eb9128cbab468069c9e1337c3b3f4edbc03a8d2c Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 18 Nov 2015 14:43:08 +0500 Subject: [PATCH 13/18] test commit --- jquery.simpleFilePreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index e86cb05..dd64dce 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -11,7 +11,7 @@ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * Fore more usage documentation and examples, visit: * http://jordankasper.com/jquery From f9a33dff0ff1f160fb8f4b39313ae0f93d010703 Mon Sep 17 00:00:00 2001 From: zorg Date: Tue, 22 Mar 2016 15:34:43 +0500 Subject: [PATCH 14/18] 1) image show after load from web --- jquery.simpleFilePreview.js | 4 ++-- jquery.simpleFilePreview.min.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index dd64dce..983b5a4 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -1,4 +1,4 @@ -/* Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich +/* Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015-2016 Alexei Ivashkevich * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * Copyright notice and license must remain intact for legal use * Requires: jQuery 1.9.1+ @@ -698,7 +698,7 @@ $('input[type=file]').simpleFilePreview({ if (exp.test(ext)) { addOrChangePreview($parents, $this.val(), '', options); } else { - addOrChangePreview($parents, ((options.icons[ext]) ? options.icons[ext] : options.defaultIcon), getFilename(_this.value), options); + addOrChangePreview($parents, _this.value, getFilename(_this.value), options); } } } diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 1a7aa7e..33570e3 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -1,6 +1,6 @@ /*! * jquery.simpleFilePreview v0.1.0 (https://github.com/jakerella/jquerySimpleFilePreview) - * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015 Alexei Ivashkevich + * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015-2016 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function(i){"use strict";i.fn.simpleFilePreview=function(e){if(!this||!this.length)return this;if(e=e?e:{},e=i.extend({},i.simpleFilePreview.defaults,e),e.readOnly&&(e.radio=null),e.removeDialog&&(e.removeDialog.id||(e.removeDialog.id=i(this).id+"_remove_dialog"),e.removeDialog.title||(e.removeDialog.title="Remove"),e.removeDialog.text||(e.removeDialog.text="Are you sure?"),e.removeDialog.ok||(e.removeDialog.ok="Ok"),e.removeDialog.cancel||(e.removeDialog.cancel="Cancel"),i('

                                                '+e.removeDialog.text+"

                                                ").dialog({autoOpen:!1,resizable:!1,modal:!0})),e.contextMenu){e.contextMenu.fileText||(e.contextMenu.fileText="Open file"),e.contextMenu.linkText||(e.contextMenu.linkText="Open link"),e.contextMenu.id||(e.contextMenu.id=i(this).id+"_openlink_dialog"),e.contextMenu.title||(e.contextMenu.title="Open link"),e.contextMenu.text||(e.contextMenu.text="Please enter link to file or image"),e.contextMenu.optionName||(e.contextMenu.optionName="Link"),e.contextMenu.ok||(e.contextMenu.ok="Ok"),e.contextMenu.cancel||(e.contextMenu.cancel="Cancel"),e.contextMenu.inputName||(e.contextMenu.inputName="input_openlink_dialog"),i('

                                                '+e.contextMenu.text+'

                                                ').dialog({autoOpen:!1,resizable:!1,modal:!0});var l=(e.parentSelector?e.parentSelector:"body")+" li:has(a.simpleFilePreview_input:visible)";context.init({preventDoubleContext:!1}),context.settings({compress:!0}),context.attach(l,[{text:e.contextMenu.fileText,action:function(){i(l).find(".simpleFilePreview_input").trigger("click")}},{text:e.contextMenu.linkText,action:function(i){a(i,e)}}])}this.each(function(){n(i(this),e)});var r=e.parentSelector?i(e.parentSelector+" .simpleFilePreview_body"):i(this).closest(".simpleFilePreview_body");return r.on("click",".simpleFilePreview_input",function(e){i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"),e.preventDefault()}),r.on("click",".simpleFilePreview input.simpleFilePreview_formInput",function(t){return i(this).val().length?(e.readOnly||i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"),void t.preventDefault()):this}),r.on("change",".simpleFilePreview input.simpleFilePreview_formInput",function(){o(e,i(this),"file")}),r.on("mouseover",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){if(!e.readOnly){var t=i(this).closest(".simpleFilePreview");t.find(".simpleFilePreview_preview").is(":visible")&&t.find(".simpleFilePreview_remove").show()}}),r.on("mouseout",".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput",function(){i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide()}),r.on("click",".simpleFilePreview_preview",function(){if(!e.readOnly){var l=i(this);if(e.removeDialog){var n=i("#"+e.removeDialog.id);n.dialog("option","buttons",[{text:e.removeDialog.ok,click:function(){t(l,e),i(this).dialog("close")}},{text:e.removeDialog.cancel,click:function(){i(this).dialog("close")}}]),n.dialog("open")}else t(l,e)}}),r.on("click",".simpleFilePreview_shiftRight",function(){var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),t=parseInt(e.css("left"))+e.width();if(t>e.parent().width()){var l=e.find("li:first");e.animate({left:"-="+l.outerWidth(!0)})}}),r.on("click",".simpleFilePreview_shiftLeft",function(){var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"),t=parseInt(e.css("left"));if(0>t){var l=e.find("li:first").outerWidth(!0);e.animate({left:1>t+l?"+="+l:0})}}),this};var t=function(e,i){var t=e.closest(".simpleFilePreview");if(null!=i.beforeRemove&&i.beforeRemove(t),1==t.attr("data-sfpallowmultiple")&&t.siblings(".simpleFilePreview").length)return t.hasClass("simpleFilePreview_existing")&&t.parent().append(""),l(e,i,1),t.closest(".simpleFilePreview_multi").width("-="+t.width()),t.remove(),this;t.hasClass("simpleFilePreview_existing")&&(t.find("input.simpleFilePreview_formInput").show(),t.append(""),t.removeClass("simpleFilePreview_existing")),l(e,i,1);var n=t.find("input.simpleFilePreview_formInput").val("");if(n&&n.length&&n.val().length){for(var r=n.get(0).attributes,s="",p=0,a=r.length;a>p;++p)"value"!=r[p].name&&"title"!=r[p].name&&(s+=r[p].name+"='"+n.attr(r[p].name)+"' ");n.before(''),n.remove()}e.remove(),t.find(".simpleFilePreview_filename").remove(),t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show()},l=function(e,i,t){if(!i.limit)return!1;var l=e.closest(".simpleFilePreview_multi").find("> li");t=t?t:0,l.length>i.limit+t?l.last().hide():l.last().show()},n=function(e,t){var l=e.is("[multiple]");e=e.removeAttr("multiple").addClass("simpleFilePreview_formInput"),l||(t.radio=null);var n=i("<"+(l?"li":"div")+" id='simpleFilePreview_"+i.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(t.radio?" simpleFilePreview_withRadio":"")+"' data-sfpallowmultiple='"+(l?1:0)+"'>"+t.buttonContent+""+t.removeContent+""+(t.radio?"":"")+(t.ajaxUpload.progressbar?"
                                                ":"")+(t.contextMenu?'':"")+"");e.before(n),n.append(e),t.readOnly&&n.hide(),e.css({width:n.width()+"px",height:n.height()-(t.radio?20:0)+"px"}),l?(n.wrap("
                                                  "),n.closest(".simpleFilePreview_multiUI").prepend(""+t.shiftRight+"").append(""+t.shiftLeft+"")):n.wrap("
                                                  ");var a=t.existingFiles;if(!a)return l&&i(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),e;var o=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");if(l){var v=i.isArray(a)?1:0;for(var m in a){var d=i.simpleFilePreview.uid++,u=n.clone(!0).attr("id","simpleFilePreview_"+d);t.contextMenu&&u.find('[name^="'+t.contextMenu.inputName+'"]').attr("name",t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""),u.addClass("simpleFilePreview_existing").attr("data-sfprid",v?a[m]:m).find("input.simpleFilePreview_formInput").remove(),u.show(),n.before(u);var c=p(a[m]);c=c?c.toLowerCase():null,c&&o.test(c)?r(u,a[m],"",t):t.icons[c]?r(u,t.icons[c],s(a[m]),t):r(u,t.defaultIcon,s(a[m]),t),t.radio&&u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid"))}return i(".simpleFilePreview_multi").width(n.outerWidth(!0)*n.parent().find(".simpleFilePreview").length),t.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='"+t.radio.checkedItem+"']").prop("checked",!0),e}var w=null,v=i.isArray(a)?1:0;for(var m in a)w={id:v?a[m]:m,file:a[m]};if(!w)return e;n.attr("data-sfprid",w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide();var c=p(w.file);return c=c?c.toLowerCase():null,c&&o.test(c)?r(n,w.file,"",t):t.icons[c]?r(n,t.icons[c],s(w.file),t):r(n,t.defaultIcon,s(w.file),t),e},r=function(e,i,t,n){t=t?t:null,i=new RegExp("^(http|https)://").test(i)?i:(new RegExp("[/\\\\]").test(i)?"":n.iconPath)+i,e.find(".simpleFilePreview_input").hide();var r=e.find(".simpleFilePreview_preview");if(r&&r.length?r.attr("src",i):(e.append(""+(t?t:"File Preview")+""),e.find("input.simpleFilePreview_formInput").attr("title",n.removeMessage.prefix+" "+(t?t:n.removeMessage.stub))),l(e,n),!t)return null;var s=e.find(".simpleFilePreview_filename");s&&s.length?s.text(t):e.append(""+t+"").find(".simpleFilePreview_filename")},s=function(e){var i=e.match(/[\/\\]([^\/\\]+)$/);return i&&i[1]&&i[1].length?i[1]:null},p=function(e){var i=e.match(/[\.]([^\/\\\.]+)$/);return i&&i[1]&&i[1].length?i[1]:null},a=function(e,t){var l=i("#"+t.contextMenu.id);l.dialog("option","buttons",[{text:t.contextMenu.ok,click:function(){var e=i((t.parentSelector?t.parentSelector:"body")+' li:has(a.simpleFilePreview_input:visible) input[name^="'+t.contextMenu.inputName+'"]');e.val(i("#"+t.contextMenu.id+"_link").val()),o(t,e,"link"),i(this).dialog("close")}},{text:t.contextMenu.cancel,click:function(){i(this).dialog("close")}}]),l.dialog("open")},o=function(t,l,n){if(!t.readOnly){var a=l.get()[0];if(t.ajaxUpload){var o=new FormData,v=a.name.indexOf("["),m="file"==n?a.files[0]:"link"==n?l.val():"";v>-1?o.append(a.name.substr(0,v),m):o.append(a.name,m),t.ajaxUpload.compose&&t.ajaxUpload.compose(o),t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(),i.ajax({url:t.ajaxUpload.url,type:"POST",data:o,dataType:"json",contentType:!1,processData:!1,success:function(e,i,n){t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),t.ajaxUpload.success&&t.ajaxUpload.success(e,i,n,a)},error:function(e,i,n){t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(),t.ajaxUpload.error&&t.ajaxUpload.error(e,i,n,a)},xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable&&t.ajaxUpload.progressbar){var i=100*e.loaded/e.total,n=l.parent().find(".simpleFilePreview_progress div");n.css({width:i+"%"}).attr("aria-valuenow",i)}},!1),e}})}var d=l.closest(".simpleFilePreview");if(1==d.attr("data-sfpallowmultiple")&&!d.find(".simpleFilePreview_preview").length){var u=i.simpleFilePreview.uid++,c=d.clone(!0).attr("id","simpleFilePreview_"+u);t.contextMenu&&c.find('[name^="'+t.contextMenu.inputName+'"]').attr("name",t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""),t.ajaxUpload.progressbar&&c.find(".simpleFilePreview_progress").hide(),c.find("input.simpleFilePreview_formInput").attr("id",c.find("input.simpleFilePreview_formInput").attr("id")+"_"+u).attr("name",function(e,i){var t=d.find("input.simpleFilePreview_formInput").attr("name"),l=parseInt(t.substring(t.indexOf("[")+1,t.indexOf("]")));return isNaN(l)?i:t.substring(0,t.indexOf("[")+1)+ ++l+t.substring(t.indexOf("]"))}).val(""),d.after(c);var w=d.closest(".simpleFilePreview_multi").width("+="+c.outerWidth(!0)).width();w>d.closest(".simpleFilePreview_multiClip").width()&&d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click")}var f=p(a.value);if(f=f?f.toLowerCase():null,"file"==n&&a.files&&a.files[0]){var g=new RegExp("^image/("+i.simpleFilePreview.previewFileTypes+")$");if(g.test(a.files[0].type.toLowerCase())&&window.FileReader){var x=new FileReader;x.onload=function(e){r(d,e.target.result,"",t)},x.readAsDataURL(a.files[0])}else{var _=a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/);_&&_[1]&&t.icons[_[1]]?r(d,t.icons[_[1]],s(a.value),t):r(d,t.defaultIcon,s(a.value),t)}return t.radio&&d.find("input.simpleFilePreview_radio").val(d.context.files[0].name),a}if("file"==n){var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");f&&!/fakepath/.test(a.value.toLowerCase())&&g.test(e)?r(d,"file://"+a.value,"",t):t.icons[f]?r(d,t.icons[f],s(a.value),t):r(d,t.defaultIcon,s(a.value),t)}if("link"==n){var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$");g.test(f)?r(d,l.val(),"",t):r(d,t.icons[f]?t.icons[f]:t.defaultIcon,s(a.value),t)}}};i.simpleFilePreview={defaults:{buttonContent:"Add File",removeContent:"X",existingFiles:null,shiftLeft:"<<",shiftRight:">>",iconPath:"",defaultIcon:"preview_file.png",limit:0,removeMessage:{prefix:"Remove",stub:"this file"},radio:null,readOnly:!1,ajaxUpload:null,beforeRemove:null,removeDialog:null,contextMenu:null,parentSelector:null,icons:{png:"preview_png.png",gif:"preview_png.png",bmp:"preview_png.png",svg:"preview_png.png",jpg:"preview_png.png",jpeg:"preview_png.png",pjpg:"preview_png.png",pjpeg:"preview_png.png",tif:"preview_png.png",tiff:"preview_png.png",mp3:"preview_mp3.png",mp4:"preview_mp3.png",wav:"preview_mp3.png",wma:"preview_mp3.png",pdf:"preview_pdf.png",txt:"preview_txt.png",rtf:"preview_txt.png",text:"preview_txt.png",plain:"preview_txt.png",zip:"preview_zip.png",tgz:"preview_zip.png","x-rar-compressed":"preview_zip.png","octet-stream":"preview_zip.png",odf:"preview_doc.png",odt:"preview_doc.png",doc:"preview_doc.png",msword:"preview_doc.png","vnd.openxmlformats-officedocument.wordprocessingml.document":"preview_doc.png",docx:"preview_doc.png",ods:"preview_xls.png","vnd.ms-excel":"preview_xls.png",xls:"preview_xls.png",xlx:"preview_xls.png",msexcel:"preview_xls.png","x-excel":"preview_xls.png","x-ms-excel":"preview_xls.png","vnd.openxmlformats-officedocument.spreadsheetml.sheet":"preview_xls.png"}},uid:0,linkid:0,init:!1,previewFileTypes:"p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend({}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), i('

                                                  ' + e.removeDialog.text + "

                                                  ").dialog({ autoOpen: !1, resizable: !1, modal: !0 })), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), i('

                                                  ' + e.contextMenu.text + '

                                                  ').dialog({ autoOpen: !1, resizable: !1, modal: !0 }); var l = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(l, [{ text: e.contextMenu.fileText, action: function (e) { i(l).find(".simpleFilePreview_input").trigger("click") } }, { text: e.contextMenu.linkText, action: function (i) { a(i, e) } }]) } this.each(function () { n(i(this), e) }); var r = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return r.on("click", ".simpleFilePreview_input", function (e) { i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), r.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), r.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { o(e, i(this), "file") }), r.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), r.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), r.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), r.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), r.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, a = r.length; a > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                  " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), e.css({ width: n.width() + "px", height: n.height() - (t.radio ? 20 : 0) + "px" }), l ? (n.wrap("
                                                    "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                    "); var a = t.existingFiles; if (!a) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var o = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(a) ? 1 : 0; for (var m in a) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? a[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(a[m]); c = c ? c.toLowerCase() : null, c && o.test(c) ? r(u, a[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(a[m]), t) : r(u, t.defaultIcon, s(a[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(a) ? 1 : 0; for (var m in a) w = { id: v ? a[m] : m, file: a[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && o.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, a = function (e, t) { var l = i("#" + t.contextMenu.id); l.dialog("option", "buttons", [{ text: t.contextMenu.ok, click: function () { var e = i((t.parentSelector ? t.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + t.contextMenu.inputName + '"]'); e.val(i("#" + t.contextMenu.id + "_link").val()), o(t, e, "link"), i(this).dialog("close") } }, { text: t.contextMenu.cancel, click: function () { i(this).dialog("close") } }]), l.dialog("open") }, o = function (t, l, n) { if (!t.readOnly) { var a = l.get()[0]; if (t.ajaxUpload) { var o = new FormData, v = a.name.indexOf("["), m = "file" == n ? a.files[0] : "link" == n ? l.val() : ""; v > -1 ? o.append(a.name.substr(0, v), m) : o.append(a.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(o), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: o, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, a) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, a) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(a.value); if (f = f ? f.toLowerCase() : null, "file" == n && a.files && a.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(a.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(a.files[0]) } else { var _ = a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), a } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(a.value.toLowerCase()) && g.test(e) ? r(d, "file://" + a.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, a.value, s(a.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery); \ No newline at end of file From 885c91cecb6557fda4d1bb3b60765ddba11c0240 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 Apr 2016 11:25:03 +0500 Subject: [PATCH 15/18] 1) Open link dialog show at center screen. Before open dialog window scroll to up --- jquery.simpleFilePreview.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 983b5a4..5259455 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -4,6 +4,7 @@ * Requires: jQuery 1.9.1+ * Bootstrap 3.3.4+ (for progressbar only) * jQuery UI 1.11.4+ (for dialog only) +* context.js 1.0.1 (for context menu only) * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF @@ -526,11 +527,13 @@ $('input[type=file]').simpleFilePreview({ var openLinkDialog = function (e, options) { var $dialog = $('#' + options.contextMenu.id); - $dialog.dialog('option', - 'buttons', [{ + var $body = $('body'); + var bodyOverflow = $body.css('overflow'); + $dialog.dialog({ + buttons: [{ text: options.contextMenu.ok, click: function () { - var $element = $(((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible) input[name^="' +options.contextMenu.inputName + '"]'); + var $element = $(((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + options.contextMenu.inputName + '"]'); $element.val($('#' + options.contextMenu.id + '_link').val()); fileProcess(options, $element, 'link'); $(this).dialog("close"); @@ -540,7 +543,16 @@ $('input[type=file]').simpleFilePreview({ click: function () { $(this).dialog("close"); } - }]); + }], + position: { my: "center", at: "center", of: window }, + open: function (event, ui) { + $body.css('overflow', 'hidden'); + }, + close: function (event, ui) { + $body.css('overflow', bodyOverflow); + }, + }); + window.scrollTo(0, 0); $dialog.dialog("open"); }; From af0d8a9587dd7fd0112a16d8739cc0dd3e911031 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 Apr 2016 11:29:25 +0500 Subject: [PATCH 16/18] 1) min js file --- jquery.simpleFilePreview.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 33570e3..9ea4dce 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015-2016 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend({}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), i('

                                                    ' + e.removeDialog.text + "

                                                    ").dialog({ autoOpen: !1, resizable: !1, modal: !0 })), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), i('

                                                    ' + e.contextMenu.text + '

                                                    ').dialog({ autoOpen: !1, resizable: !1, modal: !0 }); var l = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(l, [{ text: e.contextMenu.fileText, action: function (e) { i(l).find(".simpleFilePreview_input").trigger("click") } }, { text: e.contextMenu.linkText, action: function (i) { a(i, e) } }]) } this.each(function () { n(i(this), e) }); var r = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return r.on("click", ".simpleFilePreview_input", function (e) { i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), r.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), r.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { o(e, i(this), "file") }), r.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), r.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), r.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), r.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), r.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, a = r.length; a > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                    " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), e.css({ width: n.width() + "px", height: n.height() - (t.radio ? 20 : 0) + "px" }), l ? (n.wrap("
                                                      "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                      "); var a = t.existingFiles; if (!a) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var o = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(a) ? 1 : 0; for (var m in a) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? a[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(a[m]); c = c ? c.toLowerCase() : null, c && o.test(c) ? r(u, a[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(a[m]), t) : r(u, t.defaultIcon, s(a[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(a) ? 1 : 0; for (var m in a) w = { id: v ? a[m] : m, file: a[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && o.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, a = function (e, t) { var l = i("#" + t.contextMenu.id); l.dialog("option", "buttons", [{ text: t.contextMenu.ok, click: function () { var e = i((t.parentSelector ? t.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + t.contextMenu.inputName + '"]'); e.val(i("#" + t.contextMenu.id + "_link").val()), o(t, e, "link"), i(this).dialog("close") } }, { text: t.contextMenu.cancel, click: function () { i(this).dialog("close") } }]), l.dialog("open") }, o = function (t, l, n) { if (!t.readOnly) { var a = l.get()[0]; if (t.ajaxUpload) { var o = new FormData, v = a.name.indexOf("["), m = "file" == n ? a.files[0] : "link" == n ? l.val() : ""; v > -1 ? o.append(a.name.substr(0, v), m) : o.append(a.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(o), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: o, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, a) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, a) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(a.value); if (f = f ? f.toLowerCase() : null, "file" == n && a.files && a.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(a.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(a.files[0]) } else { var _ = a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), a } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(a.value.toLowerCase()) && g.test(e) ? r(d, "file://" + a.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, a.value, s(a.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery); \ No newline at end of file +!function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend({}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), i('

                                                      ' + e.removeDialog.text + "

                                                      ").dialog({ autoOpen: !1, resizable: !1, modal: !0 })), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), i('

                                                      ' + e.contextMenu.text + '

                                                      ').dialog({ autoOpen: !1, resizable: !1, modal: !0 }); var l = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(l, [{ text: e.contextMenu.fileText, action: function (e) { i(l).find(".simpleFilePreview_input").trigger("click") } }, { text: e.contextMenu.linkText, action: function (i) { a(i, e) } }]) } this.each(function () { n(i(this), e) }); var r = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return r.on("click", ".simpleFilePreview_input", function (e) { i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), r.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), r.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { o(e, i(this), "file") }), r.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), r.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), r.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), r.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), r.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, a = r.length; a > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                      " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), e.css({ width: n.width() + "px", height: n.height() - (t.radio ? 20 : 0) + "px" }), l ? (n.wrap("
                                                        "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                        "); var a = t.existingFiles; if (!a) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var o = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(a) ? 1 : 0; for (var m in a) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? a[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(a[m]); c = c ? c.toLowerCase() : null, c && o.test(c) ? r(u, a[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(a[m]), t) : r(u, t.defaultIcon, s(a[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(a) ? 1 : 0; for (var m in a) w = { id: v ? a[m] : m, file: a[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && o.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, a = function (e, t) { var l = i("#" + t.contextMenu.id), n = i("body"), r = n.css("overflow"); l.dialog({ buttons: [{ text: t.contextMenu.ok, click: function () { var e = i((t.parentSelector ? t.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + t.contextMenu.inputName + '"]'); e.val(i("#" + t.contextMenu.id + "_link").val()), o(t, e, "link"), i(this).dialog("close") } }, { text: t.contextMenu.cancel, click: function () { i(this).dialog("close") } }], position: { my: "center", at: "center", of: window }, open: function (e, i) { n.css("overflow", "hidden") }, close: function (e, i) { n.css("overflow", r) } }), window.scrollTo(0, 0), l.dialog("open") }, o = function (t, l, n) { if (!t.readOnly) { var a = l.get()[0]; if (t.ajaxUpload) { var o = new FormData, v = a.name.indexOf("["), m = "file" == n ? a.files[0] : "link" == n ? l.val() : ""; v > -1 ? o.append(a.name.substr(0, v), m) : o.append(a.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(o), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: o, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, a) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, a) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(a.value); if (f = f ? f.toLowerCase() : null, "file" == n && a.files && a.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(a.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(a.files[0]) } else { var _ = a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), a } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(a.value.toLowerCase()) && g.test(e) ? r(d, "file://" + a.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, a.value, s(a.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery); \ No newline at end of file From 805818d7005557c3f034e425db0c52fba35c0b29 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 Apr 2016 16:13:51 +0500 Subject: [PATCH 17/18] 1) Allow external options for dialogs --- jquery.simpleFilePreview.js | 101 ++++++++++++++++---------------- jquery.simpleFilePreview.min.js | 2 +- 2 files changed, 53 insertions(+), 50 deletions(-) diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 5259455..890535e 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -60,6 +60,7 @@ $('input[type=file]').simpleFilePreview({ 'text': string, // Body text 'ok': string, // Text for OK button 'cancel': string, // Text for Cancel button + 'options': object // jQuery UI Dialog options }, 'contextMenu': { // Context menu for select file source 'fileText': string, // Text for file option @@ -71,6 +72,7 @@ $('input[type=file]').simpleFilePreview({ 'ok': string, // Text for OK button 'cancel': string, // Text for Cancel button 'inputName': string // Name of hidden input element + 'options': object // jQuery UI Dialog options }, 'parentSelector': string, // Parent selector for component }); @@ -93,7 +95,7 @@ $('input[type=file]').simpleFilePreview({ // Set up options (and defaults) options = options ? options : {}; - options = $.extend({}, $.simpleFilePreview.defaults, options); + options = $.extend(true, {}, $.simpleFilePreview.defaults, options); // read only mode and radio button incompatible if (options.readOnly) { @@ -106,15 +108,16 @@ $('input[type=file]').simpleFilePreview({ if (!options.removeDialog.text) { options.removeDialog.text = 'Are you sure?'; } if (!options.removeDialog.ok) { options.removeDialog.ok = 'Ok'; } if (!options.removeDialog.cancel) { options.removeDialog.cancel = 'Cancel'; } + if (!options.removeDialog.options) { options.removeDialog.options = {}; } $('

                                                        ' + '' + options.removeDialog.text + - '

                                                        ').dialog({ + '

                                                        ').dialog($.extend({ autoOpen: false, resizable: false, - modal: true, - }); + modal: true + }, options.removeDialog.options)); } if (options.contextMenu) { @@ -127,36 +130,62 @@ $('input[type=file]').simpleFilePreview({ if (!options.contextMenu.ok) { options.contextMenu.ok = 'Ok'; } if (!options.contextMenu.cancel) { options.contextMenu.cancel = 'Cancel'; } if (!options.contextMenu.inputName) { options.contextMenu.inputName = 'input_openlink_dialog'; } + if (!options.contextMenu.options) { options.contextMenu.options = {}; } + var $gbody = $('body'); + var gbodyOverflow = $gbody.css('overflow'); $('

                                                        ' + options.contextMenu.text + '

                                                        ' + '' + '' + '
                                                        ' + - '

                                                        ').dialog({ + '

                                                        ').dialog($.extend({ autoOpen: false, resizable: false, modal: true, - }); + position: { my: "center", at: "center", of: window }, + open: function (event, ui) { + gbodyOverflow = $gbody.css('overflow'); + $gbody.css('overflow', 'hidden'); + }, + close: function (event, ui) { + $gbody.css('overflow', gbodyOverflow); + }, + buttons: [ + { + text: options.contextMenu.ok, + click: function () { + var $element = $(((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + options.contextMenu.inputName + '"]'); + var $link = $('#' + options.contextMenu.id + '_link'); + $element.val($link.val()); + fileProcess(options, $element, 'link'); + $link.val(""); + $(this).dialog("close"); + } + }, { + text: options.contextMenu.cancel, + click: function () { + $(this).dialog("close"); + } + }] + }, options.contextMenu.options)); var selector = ((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible)'; context.init({ preventDoubleContext: false }); context.settings({ compress: true }); context.attach(selector, [ - { - text: options.contextMenu.fileText, - action: function (e) { - $(selector).find('.simpleFilePreview_input').trigger('click'); - } - }, - { - text: options.contextMenu.linkText, - action: function (e) { - openLinkDialog(e, options); - } - }, - ]); + { + text: options.contextMenu.fileText, + action: function (e) { + $(selector).find('.simpleFilePreview_input').trigger('click'); + } + }, { + text: options.contextMenu.linkText, + action: function (e) { + openLinkDialog(e, options); + } + }]); } this.each(function () { @@ -526,34 +555,8 @@ $('input[type=file]').simpleFilePreview({ }; var openLinkDialog = function (e, options) { - var $dialog = $('#' + options.contextMenu.id); - var $body = $('body'); - var bodyOverflow = $body.css('overflow'); - $dialog.dialog({ - buttons: [{ - text: options.contextMenu.ok, - click: function () { - var $element = $(((options.parentSelector) ? options.parentSelector : 'body') + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + options.contextMenu.inputName + '"]'); - $element.val($('#' + options.contextMenu.id + '_link').val()); - fileProcess(options, $element, 'link'); - $(this).dialog("close"); - } - }, { - text: options.contextMenu.cancel, - click: function () { - $(this).dialog("close"); - } - }], - position: { my: "center", at: "center", of: window }, - open: function (event, ui) { - $body.css('overflow', 'hidden'); - }, - close: function (event, ui) { - $body.css('overflow', bodyOverflow); - }, - }); window.scrollTo(0, 0); - $dialog.dialog("open"); + $('#' + options.contextMenu.id).dialog("open"); }; var fileProcess = function (options, $this, type) { @@ -730,7 +733,7 @@ $('input[type=file]').simpleFilePreview({ 'removeMessage': { 'prefix': 'Remove', 'stub': 'this file', - }, + }, 'radio': null, 'readOnly': false, 'ajaxUpload': null, @@ -776,8 +779,8 @@ $('input[type=file]').simpleFilePreview({ 'x-excel': 'preview_xls.png', 'x-ms-excel': 'preview_xls.png', 'vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'preview_xls.png' - } - }, + } + }, uid: 0, linkid: 0, init: false, diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 9ea4dce..1e0ba9f 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015-2016 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend({}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), i('

                                                        ' + e.removeDialog.text + "

                                                        ").dialog({ autoOpen: !1, resizable: !1, modal: !0 })), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), i('

                                                        ' + e.contextMenu.text + '

                                                        ').dialog({ autoOpen: !1, resizable: !1, modal: !0 }); var l = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(l, [{ text: e.contextMenu.fileText, action: function (e) { i(l).find(".simpleFilePreview_input").trigger("click") } }, { text: e.contextMenu.linkText, action: function (i) { a(i, e) } }]) } this.each(function () { n(i(this), e) }); var r = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return r.on("click", ".simpleFilePreview_input", function (e) { i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), r.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), r.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { o(e, i(this), "file") }), r.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), r.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), r.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), r.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), r.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, a = r.length; a > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                        " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), e.css({ width: n.width() + "px", height: n.height() - (t.radio ? 20 : 0) + "px" }), l ? (n.wrap("
                                                          "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                          "); var a = t.existingFiles; if (!a) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var o = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(a) ? 1 : 0; for (var m in a) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? a[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(a[m]); c = c ? c.toLowerCase() : null, c && o.test(c) ? r(u, a[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(a[m]), t) : r(u, t.defaultIcon, s(a[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(a) ? 1 : 0; for (var m in a) w = { id: v ? a[m] : m, file: a[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && o.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, a = function (e, t) { var l = i("#" + t.contextMenu.id), n = i("body"), r = n.css("overflow"); l.dialog({ buttons: [{ text: t.contextMenu.ok, click: function () { var e = i((t.parentSelector ? t.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + t.contextMenu.inputName + '"]'); e.val(i("#" + t.contextMenu.id + "_link").val()), o(t, e, "link"), i(this).dialog("close") } }, { text: t.contextMenu.cancel, click: function () { i(this).dialog("close") } }], position: { my: "center", at: "center", of: window }, open: function (e, i) { n.css("overflow", "hidden") }, close: function (e, i) { n.css("overflow", r) } }), window.scrollTo(0, 0), l.dialog("open") }, o = function (t, l, n) { if (!t.readOnly) { var a = l.get()[0]; if (t.ajaxUpload) { var o = new FormData, v = a.name.indexOf("["), m = "file" == n ? a.files[0] : "link" == n ? l.val() : ""; v > -1 ? o.append(a.name.substr(0, v), m) : o.append(a.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(o), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: o, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, a) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, a) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(a.value); if (f = f ? f.toLowerCase() : null, "file" == n && a.files && a.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(a.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(a.files[0]) } else { var _ = a.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), a } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(a.value.toLowerCase()) && g.test(e) ? r(d, "file://" + a.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(a.value), t) : r(d, t.defaultIcon, s(a.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, a.value, s(a.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery); \ No newline at end of file +!function (i) {"use strict"; i.fn.simpleFilePreview= function(e) { if(!this||!this.length) return this; if (e=e?e: { }, e=i.extend(!0, { }, i.simpleFilePreview.defaults, e), e.readOnly&&(e.radio=null), e.removeDialog &&(e.removeDialog.id||(e.removeDialog.id=i(this).id + "_remove_dialog"), e.removeDialog.title ||(e.removeDialog.title="Remove"), e.removeDialog.text||(e.removeDialog.text="Are you sure?"), e.removeDialog.ok||(e.removeDialog.ok="Ok"), e.removeDialog.cancel || (e.removeDialog.cancel ="Cancel"), e.removeDialog.options || (e.removeDialog.options ={ }), i('

                                                          ' +e.removeDialog.text +"

                                                          ").dialog(i.extend({autoOpen: !1, resizable: !1, modal: !0}, e.removeDialog.options))), e.contextMenu) {e.contextMenu.fileText ||(e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText= "Open link"), e.contextMenu.id||(e.contextMenu.id=i(this).id + "_openlink_dialog"), e.contextMenu.title||(e.contextMenu.title="Open link"), e.contextMenu.text||(e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName||(e.contextMenu.optionName ="Link"), e.contextMenu.ok || (e.contextMenu.ok="Ok"), e.contextMenu.cancel|| (e.contextMenu.cancel="Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName= "input_openlink_dialog"), e.contextMenu.options ||(e.contextMenu.options={ }); var l = i("body"), r=l.css("overflow"); i('

                                                          '+e.contextMenu.text + '

                                                          ').dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0, position : {my: "center", at: "center", of : window}, open: function(e, i) {r=l.css("overflow"), l.css("overflow", "hidden") }, close: function(e, i) {l.css("overflow", r) }, buttons: [{text: e.contextMenu.ok, click: function() {var t=i((e.parentSelector?e.parentSelector: "body") +' li:has(a.simpleFilePreview_input:visible) input[name^="'+e.contextMenu.inputName+'"]'), l=i("#"+e.contextMenu.id+"_link"); t.val(l.val()), a(e, t, "link"), l.val(""), i(this).dialog("close") }}, {text: e.contextMenu.cancel, click: function() {i(this).dialog("close") }}]}, e.contextMenu.options)); var s=(e.parentSelector?e.parentSelector: "body") +" li:has(a.simpleFilePreview_input:visible)"; context.init({preventDoubleContext: !1}), context.settings({compress: !0}), context.attach(s, [{text: e.contextMenu.fileText, action: function(e) {i(s).find(".simpleFilePreview_input").trigger("click") }}, {text : e.contextMenu.linkText, action: function(i) {o(i, e) }}]) }this.each(function() {n(i(this), e) }); var p=e.parentSelector?i(e.parentSelector+" .simpleFilePreview_body"): i(this).closest(".simpleFilePreview_body"); return p.on("click", ".simpleFilePreview_input", function(e) {i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), p.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function(t) {return i(this).val().length?(e.readOnly ||i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()): this}), p.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function(t) {a(e, i(this), "file") }), p.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function() { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") &&t.find(".simpleFilePreview_remove").show() }}), p.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function() {i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), p.on("click", ".simpleFilePreview_preview", function() {if(!e.readOnly) {var l=i(this); if(e.removeDialog) {var n=i("#"+e.removeDialog.id); n.dialog("option", "buttons", [{ text : e.removeDialog.ok, click: function() { t(l, e), i(this).dialog("close") }}, {text: e.removeDialog.cancel, click: function() {i(this).dialog("close") }}]), n.dialog("open") } else t(l, e) }}), p.on("click", ".simpleFilePreview_shiftRight", function() {var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t=parseInt(e.css("left")) +e.width(); if(t>e.parent().width()) {var l=e.find("li:first"); e.animate({left: "-="+l.outerWidth(!0) }) }}), p.on("click", ".simpleFilePreview_shiftLeft", function() {var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t=parseInt(e.css("left")); if(0 > t) {var l=e.find("li:first").outerWidth(!0); e.animate({left: 1> t + l ?"+="+l: 0}) }}), this}; var t=function(e, i) {var t=e.closest(".simpleFilePreview"); if(null!=i.beforeRemove&&i.beforeRemove(t), 1==t.attr("data-sfpallowmultiple") &&t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") &&t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-="+t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") &&(t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n=t.find("input.simpleFilePreview_formInput").val(""); if(n&&n.length&&n.val().length) {for(var r=n.get(0).attributes, s="", p=0, o=r.length; o>p; ++p) "value"!=r[p].name&&"title"!=r[p].name&&(s+=r[p].name+ "='"+n.attr(r[p].name) +"' "); n.before(''), n.remove() }e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l=function(e, i, t) {if(!i.limit) return !1; var l=e.closest(".simpleFilePreview_multi").find("> li"); t= t ? t : 0, l.length> i.limit + t ? l.last().hide(): l.last().show() }, n=function(e, t) {var l=e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l||(t.radio = null); var n=i("<"+(l?"li": "div") + " id='simpleFilePreview_" +i.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(t.radio? " simpleFilePreview_withRadio" : "") +"' data-sfpallowmultiple='"+(l?1: 0) + "'>" +t.buttonContent+ "" + t.removeContent +""+(t.radio ? "": "") +(t.ajaxUpload.progressbar? "
                                                          " : "") + (t.contextMenu ?'': "") + ""); e.before(n), n.append(e), t.readOnly&&n.hide(), e.css({width: n.width() +"px", height: n.height() -(t.radio?20: 0) +"px"}), l?(n.wrap("
                                                            "), n.closest(".simpleFilePreview_multiUI").prepend(""+t.shiftRight+"").append("" +t.shiftLeft+"")): n.wrap("
                                                            "); var o=t.existingFiles; if(!o) return l&&i(".simpleFilePreview_multi").width(n.outerWidth(!0) *n.parent().find(".simpleFilePreview").length), e; var a=new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if(l) { var v = i.isArray(o) ? 1 : 0; for(var m in o) {var d=i.simpleFilePreview.uid++, u=n.clone(!0).attr("id", "simpleFilePreview_"+d); t.contextMenu &&u.find('[name^="' +t.contextMenu.inputName+'"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid +"]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v? o[m]: m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c=p(o[m]); c = c?c.toLowerCase() : null, c&&a.test(c) ?r(u, o[m], "", t): t.icons[c]?r(u, t.icons[c], s(o[m]), t): r(u, t.defaultIcon, s(o[m]), t), t.radio &&u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) }return i(".simpleFilePreview_multi").width(n.outerWidth(!0) *n.parent().find(".simpleFilePreview").length), t.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" +t.radio.checkedItem+"']").prop("checked", !0), e}var w=null, v=i.isArray(o) ?1: 0; for(var m in o) w={id: v?o[m] : m, file : o[m]}; if(!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c=p(w.file); return c=c?c.toLowerCase(): null, c&&a.test(c) ?r(n, w.file, "", t): t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e}, r= function(e, i, t, n) { t=t?t: null, i=new RegExp("^(http|https)://").test(i) ?i : (new RegExp("[/\\\\]").test(i) ?"": n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r=e.find(".simpleFilePreview_preview"); if(r && r.length?r.attr("src", i): (e.append(""+(t?t: "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t?t: n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s &&s.length?s.text(t): e.append(""+t+"").find(".simpleFilePreview_filename") }, s=function(e) {var i=e.match(/[\/\\]([^\/\\]+)$/); return i&&i[1]&&i[1].length?i[1]: null}, p= function(e) {var i = e.match(/[\.]([^\/\\\.]+)$/); return i&&i[1]&&i[1].length ? i[1]: null}, o=function(e, t) {window.scrollTo(0, 0), i("#"+ t.contextMenu.id).dialog("open") }, a=function(t, l, n) {if(!t.readOnly) {var o = l.get()[0]; if(t.ajaxUpload) {var a = new FormData, v=o.name.indexOf("["), m="file"==n?o.files[0]: "link"== n?l.val(): ""; v>-1?a.append(o.name.substr(0, v), m): a.append(o.name, m), t.ajaxUpload.compose&&t.ajaxUpload.compose(a), t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(), i.ajax({url : t.ajaxUpload.url, type : "POST", data: a, dataType : "json", contentType : !1, processData: !1, success: function(e, i, n) {t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success&&t.ajaxUpload.success(e, i, n, o) }, error: function(e, i, n) {t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error&&t.ajaxUpload.error(e, i, n, o) }, xhr: function () {var e=new window.XMLHttpRequest; return e.upload.addEventListener("progress", function(e) {if(e.lengthComputable&&t.ajaxUpload.progressbar) { var i=100*e.loaded/e.total, n=l.parent().find(".simpleFilePreview_progress div"); n.css({width: i + "%"}).attr("aria-valuenow", i) }}, !1), e}}) }var d=l.closest(".simpleFilePreview"); if(1 == d.attr("data-sfpallowmultiple") &&!d.find(".simpleFilePreview_preview").length) {var u = i.simpleFilePreview.uid++, c=d.clone(!0).attr("id", "simpleFilePreview_" +u); t.contextMenu&&c.find('[name^="'+t.contextMenu.inputName+'"]').attr("name", t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""), t.ajaxUpload.progressbar&&c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") +"_"+u).attr("name", function(e, i) {var t=d.find("input.simpleFilePreview_formInput").attr("name"), l=parseInt(t.substring(t.indexOf("[") +1, t.indexOf("]"))); return isNaN(l) ?i: t.substring(0, t.indexOf("[") +1) + ++l+t.substring(t.indexOf("]")) }).val(""), d.after(c); var w=d.closest(".simpleFilePreview_multi").width("+="+c.outerWidth(!0)).width(); w>d.closest(".simpleFilePreview_multiClip").width() &&d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") }var f =p(o.value); if(f=f?f.toLowerCase(): null, "file" ==n&&o.files&&o.files[0]) {var g =new RegExp("^image/("+i.simpleFilePreview.previewFileTypes+")$"); if(g.test(o.files[0].type.toLowerCase()) &&window.FileReader) {var x =new FileReader; x.onload =function(e) {r(d, e.target.result, "", t) }, x.readAsDataURL(o.files[0]) } else {var _=o.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _&&_[1]&&t.icons[_[1]]?r(d, t.icons[_[1]], s(o.value), t): r(d, t.defaultIcon, s(o.value), t) }return t.radio&&d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), o}if("file"==n) {var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$"); f&&!/fakepath/.test(o.value.toLowerCase()) &&g.test(e) ?r(d, "file://" + o.value, "", t): t.icons[f]?r(d, t.icons[f], s(o.value), t): r(d, t.defaultIcon, s(o.value), t) }if("link"==n) {var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes +")$"); g.test(f) ?r(d, l.val(), "", t): r(d, o.value, s(o.value), t) }}}; i.simpleFilePreview ={defaults: {buttonContent: "Add File", removeContent : "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage : {prefix : "Remove", stub : "this file"}, radio : null, readOnly: !1, ajaxUpload : null, beforeRemove : null, removeDialog: null, contextMenu : null, parentSelector: null, icons: {png: "preview_png.png", gif: "preview_png.png", bmp : "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4 : "preview_mp3.png", wav : "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf : "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz : "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream" : "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc : "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document" : "preview_doc.png", docx: "preview_doc.png", ods : "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls : "preview_xls.png", xlx: "preview_xls.png", msexcel : "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel" : "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png"}}, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file From 24546a0a0d5c15c27ffb75cd12c4690a86d787c7 Mon Sep 17 00:00:00 2001 From: zorg Date: Wed, 27 Apr 2016 19:16:50 +0500 Subject: [PATCH 18/18] 1) New option: default action for left-button click - open file or link --- jquery.simpleFilePreview.js | 23 +++++++++++++---------- jquery.simpleFilePreview.min.js | 2 +- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index 890535e..684eb69 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -75,6 +75,7 @@ $('input[type=file]').simpleFilePreview({ 'options': object // jQuery UI Dialog options }, 'parentSelector': string, // Parent selector for component + 'defaultOpen': 'file', // Default action on left button click: open file (file) or open link (link) }); * * TODO: @@ -178,7 +179,7 @@ $('input[type=file]').simpleFilePreview({ { text: options.contextMenu.fileText, action: function (e) { - $(selector).find('.simpleFilePreview_input').trigger('click'); + openFileDialog(e, options, selector); } }, { text: options.contextMenu.linkText, @@ -196,8 +197,11 @@ $('input[type=file]').simpleFilePreview({ // open file browser dialog on click of styled "button" $body.on('click', '.simpleFilePreview_input', function (e) { - $(this).closest('.simpleFilePreview').find('input.simpleFilePreview_formInput').trigger('click'); - e.preventDefault(); + if (options.defaultOpen == 'link') { + openLinkDialog(e, options); + } else { + openFileDialog(e, options, e.currentTarget); + } }); // on click of the actual input (which is invisible), check to see if @@ -391,13 +395,6 @@ $('input[type=file]').simpleFilePreview({ $html.hide(); } - // mostly for IE, the file input must be sized the same as the container, - // opacity 0, and z-indexed above other elements within the preview container - these.css({ - width: ($html.width() + 'px'), - height: (($html.height() - ((options.radio) ? 20 : 0)) + 'px') - }); - // if it's a multi-select we use multiple separate inputs instead to support file preview if (isMulti) { $html.wrap("
                                                              "); @@ -559,6 +556,11 @@ $('input[type=file]').simpleFilePreview({ $('#' + options.contextMenu.id).dialog("open"); }; + var openFileDialog = function (e, options, that) { + $(that).closest('.simpleFilePreview').find('input.simpleFilePreview_formInput').trigger('click'); + e.preventDefault(); + }; + var fileProcess = function (options, $this, type) { if (!options.readOnly) { var _this = $this.get()[0]; @@ -741,6 +743,7 @@ $('input[type=file]').simpleFilePreview({ 'removeDialog': null, 'contextMenu': null, 'parentSelector': null, + 'defaultOpen': 'file', 'icons': { 'png': 'preview_png.png', 'gif': 'preview_png.png', diff --git a/jquery.simpleFilePreview.min.js b/jquery.simpleFilePreview.min.js index 1e0ba9f..04737b4 100644 --- a/jquery.simpleFilePreview.min.js +++ b/jquery.simpleFilePreview.min.js @@ -3,4 +3,4 @@ * Copyright (c) 2012-2015 Jordan Kasper, 2015 eusonlito, 2015-2016 Alexei Ivashkevich * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -!function (i) {"use strict"; i.fn.simpleFilePreview= function(e) { if(!this||!this.length) return this; if (e=e?e: { }, e=i.extend(!0, { }, i.simpleFilePreview.defaults, e), e.readOnly&&(e.radio=null), e.removeDialog &&(e.removeDialog.id||(e.removeDialog.id=i(this).id + "_remove_dialog"), e.removeDialog.title ||(e.removeDialog.title="Remove"), e.removeDialog.text||(e.removeDialog.text="Are you sure?"), e.removeDialog.ok||(e.removeDialog.ok="Ok"), e.removeDialog.cancel || (e.removeDialog.cancel ="Cancel"), e.removeDialog.options || (e.removeDialog.options ={ }), i('

                                                              ' +e.removeDialog.text +"

                                                              ").dialog(i.extend({autoOpen: !1, resizable: !1, modal: !0}, e.removeDialog.options))), e.contextMenu) {e.contextMenu.fileText ||(e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText= "Open link"), e.contextMenu.id||(e.contextMenu.id=i(this).id + "_openlink_dialog"), e.contextMenu.title||(e.contextMenu.title="Open link"), e.contextMenu.text||(e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName||(e.contextMenu.optionName ="Link"), e.contextMenu.ok || (e.contextMenu.ok="Ok"), e.contextMenu.cancel|| (e.contextMenu.cancel="Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName= "input_openlink_dialog"), e.contextMenu.options ||(e.contextMenu.options={ }); var l = i("body"), r=l.css("overflow"); i('

                                                              '+e.contextMenu.text + '

                                                              ').dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0, position : {my: "center", at: "center", of : window}, open: function(e, i) {r=l.css("overflow"), l.css("overflow", "hidden") }, close: function(e, i) {l.css("overflow", r) }, buttons: [{text: e.contextMenu.ok, click: function() {var t=i((e.parentSelector?e.parentSelector: "body") +' li:has(a.simpleFilePreview_input:visible) input[name^="'+e.contextMenu.inputName+'"]'), l=i("#"+e.contextMenu.id+"_link"); t.val(l.val()), a(e, t, "link"), l.val(""), i(this).dialog("close") }}, {text: e.contextMenu.cancel, click: function() {i(this).dialog("close") }}]}, e.contextMenu.options)); var s=(e.parentSelector?e.parentSelector: "body") +" li:has(a.simpleFilePreview_input:visible)"; context.init({preventDoubleContext: !1}), context.settings({compress: !0}), context.attach(s, [{text: e.contextMenu.fileText, action: function(e) {i(s).find(".simpleFilePreview_input").trigger("click") }}, {text : e.contextMenu.linkText, action: function(i) {o(i, e) }}]) }this.each(function() {n(i(this), e) }); var p=e.parentSelector?i(e.parentSelector+" .simpleFilePreview_body"): i(this).closest(".simpleFilePreview_body"); return p.on("click", ".simpleFilePreview_input", function(e) {i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), p.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function(t) {return i(this).val().length?(e.readOnly ||i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()): this}), p.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function(t) {a(e, i(this), "file") }), p.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function() { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") &&t.find(".simpleFilePreview_remove").show() }}), p.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function() {i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), p.on("click", ".simpleFilePreview_preview", function() {if(!e.readOnly) {var l=i(this); if(e.removeDialog) {var n=i("#"+e.removeDialog.id); n.dialog("option", "buttons", [{ text : e.removeDialog.ok, click: function() { t(l, e), i(this).dialog("close") }}, {text: e.removeDialog.cancel, click: function() {i(this).dialog("close") }}]), n.dialog("open") } else t(l, e) }}), p.on("click", ".simpleFilePreview_shiftRight", function() {var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t=parseInt(e.css("left")) +e.width(); if(t>e.parent().width()) {var l=e.find("li:first"); e.animate({left: "-="+l.outerWidth(!0) }) }}), p.on("click", ".simpleFilePreview_shiftLeft", function() {var e=i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t=parseInt(e.css("left")); if(0 > t) {var l=e.find("li:first").outerWidth(!0); e.animate({left: 1> t + l ?"+="+l: 0}) }}), this}; var t=function(e, i) {var t=e.closest(".simpleFilePreview"); if(null!=i.beforeRemove&&i.beforeRemove(t), 1==t.attr("data-sfpallowmultiple") &&t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") &&t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-="+t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") &&(t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n=t.find("input.simpleFilePreview_formInput").val(""); if(n&&n.length&&n.val().length) {for(var r=n.get(0).attributes, s="", p=0, o=r.length; o>p; ++p) "value"!=r[p].name&&"title"!=r[p].name&&(s+=r[p].name+ "='"+n.attr(r[p].name) +"' "); n.before(''), n.remove() }e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l=function(e, i, t) {if(!i.limit) return !1; var l=e.closest(".simpleFilePreview_multi").find("> li"); t= t ? t : 0, l.length> i.limit + t ? l.last().hide(): l.last().show() }, n=function(e, t) {var l=e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l||(t.radio = null); var n=i("<"+(l?"li": "div") + " id='simpleFilePreview_" +i.simpleFilePreview.uid++ +"' class='simpleFilePreview"+(t.radio? " simpleFilePreview_withRadio" : "") +"' data-sfpallowmultiple='"+(l?1: 0) + "'>" +t.buttonContent+ "" + t.removeContent +""+(t.radio ? "": "") +(t.ajaxUpload.progressbar? "
                                                              " : "") + (t.contextMenu ?'': "") + ""); e.before(n), n.append(e), t.readOnly&&n.hide(), e.css({width: n.width() +"px", height: n.height() -(t.radio?20: 0) +"px"}), l?(n.wrap("
                                                                "), n.closest(".simpleFilePreview_multiUI").prepend(""+t.shiftRight+"").append("" +t.shiftLeft+"")): n.wrap("
                                                                "); var o=t.existingFiles; if(!o) return l&&i(".simpleFilePreview_multi").width(n.outerWidth(!0) *n.parent().find(".simpleFilePreview").length), e; var a=new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if(l) { var v = i.isArray(o) ? 1 : 0; for(var m in o) {var d=i.simpleFilePreview.uid++, u=n.clone(!0).attr("id", "simpleFilePreview_"+d); t.contextMenu &&u.find('[name^="' +t.contextMenu.inputName+'"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid +"]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v? o[m]: m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c=p(o[m]); c = c?c.toLowerCase() : null, c&&a.test(c) ?r(u, o[m], "", t): t.icons[c]?r(u, t.icons[c], s(o[m]), t): r(u, t.defaultIcon, s(o[m]), t), t.radio &&u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) }return i(".simpleFilePreview_multi").width(n.outerWidth(!0) *n.parent().find(".simpleFilePreview").length), t.radio&&n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" +t.radio.checkedItem+"']").prop("checked", !0), e}var w=null, v=i.isArray(o) ?1: 0; for(var m in o) w={id: v?o[m] : m, file : o[m]}; if(!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c=p(w.file); return c=c?c.toLowerCase(): null, c&&a.test(c) ?r(n, w.file, "", t): t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e}, r= function(e, i, t, n) { t=t?t: null, i=new RegExp("^(http|https)://").test(i) ?i : (new RegExp("[/\\\\]").test(i) ?"": n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r=e.find(".simpleFilePreview_preview"); if(r && r.length?r.attr("src", i): (e.append(""+(t?t: "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t?t: n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s &&s.length?s.text(t): e.append(""+t+"").find(".simpleFilePreview_filename") }, s=function(e) {var i=e.match(/[\/\\]([^\/\\]+)$/); return i&&i[1]&&i[1].length?i[1]: null}, p= function(e) {var i = e.match(/[\.]([^\/\\\.]+)$/); return i&&i[1]&&i[1].length ? i[1]: null}, o=function(e, t) {window.scrollTo(0, 0), i("#"+ t.contextMenu.id).dialog("open") }, a=function(t, l, n) {if(!t.readOnly) {var o = l.get()[0]; if(t.ajaxUpload) {var a = new FormData, v=o.name.indexOf("["), m="file"==n?o.files[0]: "link"== n?l.val(): ""; v>-1?a.append(o.name.substr(0, v), m): a.append(o.name, m), t.ajaxUpload.compose&&t.ajaxUpload.compose(a), t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").show(), i.ajax({url : t.ajaxUpload.url, type : "POST", data: a, dataType : "json", contentType : !1, processData: !1, success: function(e, i, n) {t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success&&t.ajaxUpload.success(e, i, n, o) }, error: function(e, i, n) {t.ajaxUpload.progressbar&&l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error&&t.ajaxUpload.error(e, i, n, o) }, xhr: function () {var e=new window.XMLHttpRequest; return e.upload.addEventListener("progress", function(e) {if(e.lengthComputable&&t.ajaxUpload.progressbar) { var i=100*e.loaded/e.total, n=l.parent().find(".simpleFilePreview_progress div"); n.css({width: i + "%"}).attr("aria-valuenow", i) }}, !1), e}}) }var d=l.closest(".simpleFilePreview"); if(1 == d.attr("data-sfpallowmultiple") &&!d.find(".simpleFilePreview_preview").length) {var u = i.simpleFilePreview.uid++, c=d.clone(!0).attr("id", "simpleFilePreview_" +u); t.contextMenu&&c.find('[name^="'+t.contextMenu.inputName+'"]').attr("name", t.contextMenu.inputName+"["+ ++i.simpleFilePreview.linkid+"]").val(""), t.ajaxUpload.progressbar&&c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") +"_"+u).attr("name", function(e, i) {var t=d.find("input.simpleFilePreview_formInput").attr("name"), l=parseInt(t.substring(t.indexOf("[") +1, t.indexOf("]"))); return isNaN(l) ?i: t.substring(0, t.indexOf("[") +1) + ++l+t.substring(t.indexOf("]")) }).val(""), d.after(c); var w=d.closest(".simpleFilePreview_multi").width("+="+c.outerWidth(!0)).width(); w>d.closest(".simpleFilePreview_multiClip").width() &&d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") }var f =p(o.value); if(f=f?f.toLowerCase(): null, "file" ==n&&o.files&&o.files[0]) {var g =new RegExp("^image/("+i.simpleFilePreview.previewFileTypes+")$"); if(g.test(o.files[0].type.toLowerCase()) &&window.FileReader) {var x =new FileReader; x.onload =function(e) {r(d, e.target.result, "", t) }, x.readAsDataURL(o.files[0]) } else {var _=o.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _&&_[1]&&t.icons[_[1]]?r(d, t.icons[_[1]], s(o.value), t): r(d, t.defaultIcon, s(o.value), t) }return t.radio&&d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), o}if("file"==n) {var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes+")$"); f&&!/fakepath/.test(o.value.toLowerCase()) &&g.test(e) ?r(d, "file://" + o.value, "", t): t.icons[f]?r(d, t.icons[f], s(o.value), t): r(d, t.defaultIcon, s(o.value), t) }if("link"==n) {var g=new RegExp("^("+i.simpleFilePreview.previewFileTypes +")$"); g.test(f) ?r(d, l.val(), "", t): r(d, o.value, s(o.value), t) }}}; i.simpleFilePreview ={defaults: {buttonContent: "Add File", removeContent : "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage : {prefix : "Remove", stub : "this file"}, radio : null, readOnly: !1, ajaxUpload : null, beforeRemove : null, removeDialog: null, contextMenu : null, parentSelector: null, icons: {png: "preview_png.png", gif: "preview_png.png", bmp : "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4 : "preview_mp3.png", wav : "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf : "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz : "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream" : "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc : "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document" : "preview_doc.png", docx: "preview_doc.png", ods : "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls : "preview_xls.png", xlx: "preview_xls.png", msexcel : "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel" : "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png"}}, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg"}}(jQuery); \ No newline at end of file +!function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend(!0, {}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), e.removeDialog.options || (e.removeDialog.options = {}), i('

                                                                ' + e.removeDialog.text + "

                                                                ").dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0 }, e.removeDialog.options))), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), e.contextMenu.options || (e.contextMenu.options = {}); var l = i("body"), r = l.css("overflow"); i('

                                                                ' + e.contextMenu.text + '

                                                                ').dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0, position: { my: "center", at: "center", of: window }, open: function (e, i) { r = l.css("overflow"), l.css("overflow", "hidden") }, close: function (e, i) { l.css("overflow", r) }, buttons: [{ text: e.contextMenu.ok, click: function () { var t = i((e.parentSelector ? e.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + e.contextMenu.inputName + '"]'), l = i("#" + e.contextMenu.id + "_link"); t.val(l.val()), a(e, t, "link"), l.val(""), i(this).dialog("close") } }, { text: e.contextMenu.cancel, click: function () { i(this).dialog("close") } }] }, e.contextMenu.options)); var s = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(s, [{ text: e.contextMenu.fileText, action: function (e) { i(s).find(".simpleFilePreview_input").trigger("click") } }, { text: e.contextMenu.linkText, action: function (i) { o(i, e) } }]) } this.each(function () { n(i(this), e) }); var p = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return p.on("click", ".simpleFilePreview_input", function (e) { i(this).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }), p.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), p.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { a(e, i(this), "file") }), p.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), p.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), p.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), p.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), p.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, o = r.length; o > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                                " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), e.css({ width: n.width() + "px", height: n.height() - (t.radio ? 20 : 0) + "px" }), l ? (n.wrap("
                                                                  "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                                  "); var o = t.existingFiles; if (!o) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var a = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(o) ? 1 : 0; for (var m in o) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? o[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(o[m]); c = c ? c.toLowerCase() : null, c && a.test(c) ? r(u, o[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(o[m]), t) : r(u, t.defaultIcon, s(o[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(o) ? 1 : 0; for (var m in o) w = { id: v ? o[m] : m, file: o[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && a.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, o = function (e, t) { window.scrollTo(0, 0), i("#" + t.contextMenu.id).dialog("open") }, a = function (t, l, n) { if (!t.readOnly) { var o = l.get()[0]; if (t.ajaxUpload) { var a = new FormData, v = o.name.indexOf("["), m = "file" == n ? o.files[0] : "link" == n ? l.val() : ""; v > -1 ? a.append(o.name.substr(0, v), m) : a.append(o.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(a), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: a, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, o) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, o) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(o.value); if (f = f ? f.toLowerCase() : null, "file" == n && o.files && o.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(o.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(o.files[0]) } else { var _ = o.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(o.value), t) : r(d, t.defaultIcon, s(o.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), o } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(o.value.toLowerCase()) && g.test(e) ? r(d, "file://" + o.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(o.value), t) : r(d, t.defaultIcon, s(o.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, o.value, s(o.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery), function (i) { "use strict"; i.fn.simpleFilePreview = function (e) { if (!this || !this.length) return this; if (e = e ? e : {}, e = i.extend(!0, {}, i.simpleFilePreview.defaults, e), e.readOnly && (e.radio = null), e.removeDialog && (e.removeDialog.id || (e.removeDialog.id = i(this).id + "_remove_dialog"), e.removeDialog.title || (e.removeDialog.title = "Remove"), e.removeDialog.text || (e.removeDialog.text = "Are you sure?"), e.removeDialog.ok || (e.removeDialog.ok = "Ok"), e.removeDialog.cancel || (e.removeDialog.cancel = "Cancel"), e.removeDialog.options || (e.removeDialog.options = {}), i('

                                                                  ' + e.removeDialog.text + "

                                                                  ").dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0 }, e.removeDialog.options))), e.contextMenu) { e.contextMenu.fileText || (e.contextMenu.fileText = "Open file"), e.contextMenu.linkText || (e.contextMenu.linkText = "Open link"), e.contextMenu.id || (e.contextMenu.id = i(this).id + "_openlink_dialog"), e.contextMenu.title || (e.contextMenu.title = "Open link"), e.contextMenu.text || (e.contextMenu.text = "Please enter link to file or image"), e.contextMenu.optionName || (e.contextMenu.optionName = "Link"), e.contextMenu.ok || (e.contextMenu.ok = "Ok"), e.contextMenu.cancel || (e.contextMenu.cancel = "Cancel"), e.contextMenu.inputName || (e.contextMenu.inputName = "input_openlink_dialog"), e.contextMenu.options || (e.contextMenu.options = {}); var l = i("body"), r = l.css("overflow"); i('

                                                                  ' + e.contextMenu.text + '

                                                                  ').dialog(i.extend({ autoOpen: !1, resizable: !1, modal: !0, position: { my: "center", at: "center", of: window }, open: function (e, i) { r = l.css("overflow"), l.css("overflow", "hidden") }, close: function (e, i) { l.css("overflow", r) }, buttons: [{ text: e.contextMenu.ok, click: function () { var t = i((e.parentSelector ? e.parentSelector : "body") + ' li:has(a.simpleFilePreview_input:visible) input[name^="' + e.contextMenu.inputName + '"]'), l = i("#" + e.contextMenu.id + "_link"); t.val(l.val()), v(e, t, "link"), l.val(""), i(this).dialog("close") } }, { text: e.contextMenu.cancel, click: function () { i(this).dialog("close") } }] }, e.contextMenu.options)); var s = (e.parentSelector ? e.parentSelector : "body") + " li:has(a.simpleFilePreview_input:visible)"; context.init({ preventDoubleContext: !1 }), context.settings({ compress: !0 }), context.attach(s, [{ text: e.contextMenu.fileText, action: function (i) { a(i, e, s) } }, { text: e.contextMenu.linkText, action: function (i) { o(i, e) } }]) } this.each(function () { n(i(this), e) }); var p = e.parentSelector ? i(e.parentSelector + " .simpleFilePreview_body") : i(this).closest(".simpleFilePreview_body"); return p.on("click", ".simpleFilePreview_input", function (i) { "link" == e.defaultOpen ? o(i, e) : a(i, e, i.currentTarget) }), p.on("click", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { return i(this).val().length ? (e.readOnly || i(this).closest(".simpleFilePreview").find(".simpleFilePreview_preview").trigger("click"), void t.preventDefault()) : this }), p.on("change", ".simpleFilePreview input.simpleFilePreview_formInput", function (t) { v(e, i(this), "file") }), p.on("mouseover", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { if (!e.readOnly) { var t = i(this).closest(".simpleFilePreview"); t.find(".simpleFilePreview_preview").is(":visible") && t.find(".simpleFilePreview_remove").show() } }), p.on("mouseout", ".simpleFilePreview_preview, .simpleFilePreview input.simpleFilePreview_formInput", function () { i(this).closest(".simpleFilePreview").find(".simpleFilePreview_remove").hide() }), p.on("click", ".simpleFilePreview_preview", function () { if (!e.readOnly) { var l = i(this); if (e.removeDialog) { var n = i("#" + e.removeDialog.id); n.dialog("option", "buttons", [{ text: e.removeDialog.ok, click: function () { t(l, e), i(this).dialog("close") } }, { text: e.removeDialog.cancel, click: function () { i(this).dialog("close") } }]), n.dialog("open") } else t(l, e) } }), p.on("click", ".simpleFilePreview_shiftRight", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")) + e.width(); if (t > e.parent().width()) { var l = e.find("li:first"); e.animate({ left: "-=" + l.outerWidth(!0) }) } }), p.on("click", ".simpleFilePreview_shiftLeft", function () { var e = i(this).closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_multi"), t = parseInt(e.css("left")); if (0 > t) { var l = e.find("li:first").outerWidth(!0); e.animate({ left: 1 > t + l ? "+=" + l : 0 }) } }), this }; var t = function (e, i) { var t = e.closest(".simpleFilePreview"); if (null != i.beforeRemove && i.beforeRemove(t), 1 == t.attr("data-sfpallowmultiple") && t.siblings(".simpleFilePreview").length) return t.hasClass("simpleFilePreview_existing") && t.parent().append(""), l(e, i, 1), t.closest(".simpleFilePreview_multi").width("-=" + t.width()), t.remove(), this; t.hasClass("simpleFilePreview_existing") && (t.find("input.simpleFilePreview_formInput").show(), t.append(""), t.removeClass("simpleFilePreview_existing")), l(e, i, 1); var n = t.find("input.simpleFilePreview_formInput").val(""); if (n && n.length && n.val().length) { for (var r = n.get(0).attributes, s = "", p = 0, o = r.length; o > p; ++p) "value" != r[p].name && "title" != r[p].name && (s += r[p].name + "='" + n.attr(r[p].name) + "' "); n.before(''), n.remove() } e.remove(), t.find(".simpleFilePreview_filename").remove(), t.find(".simpleFilePreview_remove").hide().end().find(".simpleFilePreview_input").show() }, l = function (e, i, t) { if (!i.limit) return !1; var l = e.closest(".simpleFilePreview_multi").find("> li"); t = t ? t : 0, l.length > i.limit + t ? l.last().hide() : l.last().show() }, n = function (e, t) { var l = e.is("[multiple]"); e = e.removeAttr("multiple").addClass("simpleFilePreview_formInput"), l || (t.radio = null); var n = i("<" + (l ? "li" : "div") + " id='simpleFilePreview_" + i.simpleFilePreview.uid++ + "' class='simpleFilePreview" + (t.radio ? " simpleFilePreview_withRadio" : "") + "' data-sfpallowmultiple='" + (l ? 1 : 0) + "'>" + t.buttonContent + "" + t.removeContent + "" + (t.radio ? "" : "") + (t.ajaxUpload.progressbar ? "
                                                                  " : "") + (t.contextMenu ? '' : "") + ""); e.before(n), n.append(e), t.readOnly && n.hide(), l ? (n.wrap("
                                                                    "), n.closest(".simpleFilePreview_multiUI").prepend("" + t.shiftRight + "").append("" + t.shiftLeft + "")) : n.wrap("
                                                                    "); var o = t.existingFiles; if (!o) return l && i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), e; var a = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); if (l) { var v = i.isArray(o) ? 1 : 0; for (var m in o) { var d = i.simpleFilePreview.uid++, u = n.clone(!0).attr("id", "simpleFilePreview_" + d); t.contextMenu && u.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), u.addClass("simpleFilePreview_existing").attr("data-sfprid", v ? o[m] : m).find("input.simpleFilePreview_formInput").remove(), u.show(), n.before(u); var c = p(o[m]); c = c ? c.toLowerCase() : null, c && a.test(c) ? r(u, o[m], "", t) : t.icons[c] ? r(u, t.icons[c], s(o[m]), t) : r(u, t.defaultIcon, s(o[m]), t), t.radio && u.find("input.simpleFilePreview_radio").val(u.attr("data-sfprid")) } return i(".simpleFilePreview_multi").width(n.outerWidth(!0) * n.parent().find(".simpleFilePreview").length), t.radio && n.closest(".simpleFilePreview_multi").find("input[type='radio'][value='" + t.radio.checkedItem + "']").prop("checked", !0), e } var w = null, v = i.isArray(o) ? 1 : 0; for (var m in o) w = { id: v ? o[m] : m, file: o[m] }; if (!w) return e; n.attr("data-sfprid", w.id).addClass("simpleFilePreview_existing").find("input.simpleFilePreview_formInput").hide(); var c = p(w.file); return c = c ? c.toLowerCase() : null, c && a.test(c) ? r(n, w.file, "", t) : t.icons[c] ? r(n, t.icons[c], s(w.file), t) : r(n, t.defaultIcon, s(w.file), t), e }, r = function (e, i, t, n) { t = t ? t : null, i = new RegExp("^(http|https)://").test(i) ? i : (new RegExp("[/\\\\]").test(i) ? "" : n.iconPath) + i, e.find(".simpleFilePreview_input").hide(); var r = e.find(".simpleFilePreview_preview"); if (r && r.length ? r.attr("src", i) : (e.append("" + (t ? t : "File Preview") + ""), e.find("input.simpleFilePreview_formInput").attr("title", n.removeMessage.prefix + " " + (t ? t : n.removeMessage.stub))), l(e, n), !t) return null; var s = e.find(".simpleFilePreview_filename"); s && s.length ? s.text(t) : e.append("" + t + "").find(".simpleFilePreview_filename") }, s = function (e) { var i = e.match(/[\/\\]([^\/\\]+)$/); return i && i[1] && i[1].length ? i[1] : null }, p = function (e) { var i = e.match(/[\.]([^\/\\\.]+)$/); return i && i[1] && i[1].length ? i[1] : null }, o = function (e, t) { window.scrollTo(0, 0), i("#" + t.contextMenu.id).dialog("open") }, a = function (e, t, l) { i(l).closest(".simpleFilePreview").find("input.simpleFilePreview_formInput").trigger("click"), e.preventDefault() }, v = function (t, l, n) { if (!t.readOnly) { var o = l.get()[0]; if (t.ajaxUpload) { var a = new FormData, v = o.name.indexOf("["), m = "file" == n ? o.files[0] : "link" == n ? l.val() : ""; v > -1 ? a.append(o.name.substr(0, v), m) : a.append(o.name, m), t.ajaxUpload.compose && t.ajaxUpload.compose(a), t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").show(), i.ajax({ url: t.ajaxUpload.url, type: "POST", data: a, dataType: "json", contentType: !1, processData: !1, success: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.success && t.ajaxUpload.success(e, i, n, o) }, error: function (e, i, n) { t.ajaxUpload.progressbar && l.parent().find(".simpleFilePreview_progress").hide(), t.ajaxUpload.error && t.ajaxUpload.error(e, i, n, o) }, xhr: function () { var e = new window.XMLHttpRequest; return e.upload.addEventListener("progress", function (e) { if (e.lengthComputable && t.ajaxUpload.progressbar) { var i = 100 * e.loaded / e.total, n = l.parent().find(".simpleFilePreview_progress div"); n.css({ width: i + "%" }).attr("aria-valuenow", i) } }, !1), e } }) } var d = l.closest(".simpleFilePreview"); if (1 == d.attr("data-sfpallowmultiple") && !d.find(".simpleFilePreview_preview").length) { var u = i.simpleFilePreview.uid++, c = d.clone(!0).attr("id", "simpleFilePreview_" + u); t.contextMenu && c.find('[name^="' + t.contextMenu.inputName + '"]').attr("name", t.contextMenu.inputName + "[" + ++i.simpleFilePreview.linkid + "]").val(""), t.ajaxUpload.progressbar && c.find(".simpleFilePreview_progress").hide(), c.find("input.simpleFilePreview_formInput").attr("id", c.find("input.simpleFilePreview_formInput").attr("id") + "_" + u).attr("name", function (e, i) { var t = d.find("input.simpleFilePreview_formInput").attr("name"), l = parseInt(t.substring(t.indexOf("[") + 1, t.indexOf("]"))); return isNaN(l) ? i : t.substring(0, t.indexOf("[") + 1) + ++l + t.substring(t.indexOf("]")) }).val(""), d.after(c); var w = d.closest(".simpleFilePreview_multi").width("+=" + c.outerWidth(!0)).width(); w > d.closest(".simpleFilePreview_multiClip").width() && d.closest(".simpleFilePreview_multiUI").find(".simpleFilePreview_shiftRight").trigger("click") } var f = p(o.value); if (f = f ? f.toLowerCase() : null, "file" == n && o.files && o.files[0]) { var g = new RegExp("^image/(" + i.simpleFilePreview.previewFileTypes + ")$"); if (g.test(o.files[0].type.toLowerCase()) && window.FileReader) { var x = new FileReader; x.onload = function (e) { r(d, e.target.result, "", t) }, x.readAsDataURL(o.files[0]) } else { var _ = o.files[0].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); _ && _[1] && t.icons[_[1]] ? r(d, t.icons[_[1]], s(o.value), t) : r(d, t.defaultIcon, s(o.value), t) } return t.radio && d.find("input.simpleFilePreview_radio").val(d.context.files[0].name), o } if ("file" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); f && !/fakepath/.test(o.value.toLowerCase()) && g.test(e) ? r(d, "file://" + o.value, "", t) : t.icons[f] ? r(d, t.icons[f], s(o.value), t) : r(d, t.defaultIcon, s(o.value), t) } if ("link" == n) { var g = new RegExp("^(" + i.simpleFilePreview.previewFileTypes + ")$"); g.test(f) ? r(d, l.val(), "", t) : r(d, o.value, s(o.value), t) } } }; i.simpleFilePreview = { defaults: { buttonContent: "Add File", removeContent: "X", existingFiles: null, shiftLeft: "<<", shiftRight: ">>", iconPath: "", defaultIcon: "preview_file.png", limit: 0, removeMessage: { prefix: "Remove", stub: "this file" }, radio: null, readOnly: !1, ajaxUpload: null, beforeRemove: null, removeDialog: null, contextMenu: null, parentSelector: null, defaultOpen: "file", icons: { png: "preview_png.png", gif: "preview_png.png", bmp: "preview_png.png", svg: "preview_png.png", jpg: "preview_png.png", jpeg: "preview_png.png", pjpg: "preview_png.png", pjpeg: "preview_png.png", tif: "preview_png.png", tiff: "preview_png.png", mp3: "preview_mp3.png", mp4: "preview_mp3.png", wav: "preview_mp3.png", wma: "preview_mp3.png", pdf: "preview_pdf.png", txt: "preview_txt.png", rtf: "preview_txt.png", text: "preview_txt.png", plain: "preview_txt.png", zip: "preview_zip.png", tgz: "preview_zip.png", "x-rar-compressed": "preview_zip.png", "octet-stream": "preview_zip.png", odf: "preview_doc.png", odt: "preview_doc.png", doc: "preview_doc.png", msword: "preview_doc.png", "vnd.openxmlformats-officedocument.wordprocessingml.document": "preview_doc.png", docx: "preview_doc.png", ods: "preview_xls.png", "vnd.ms-excel": "preview_xls.png", xls: "preview_xls.png", xlx: "preview_xls.png", msexcel: "preview_xls.png", "x-excel": "preview_xls.png", "x-ms-excel": "preview_xls.png", "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "preview_xls.png" } }, uid: 0, linkid: 0, init: !1, previewFileTypes: "p?jpe?g|png|gif|bmp|svg" } }(jQuery); \ No newline at end of file