diff --git a/README.md b/README.md index 1f7fc9b..ed29bc1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -jQuery SimpleFilePreview +jQuery SimpleFilePreview - with Drag & Drop and multiple file support ---- SimpleFilePreview is a jQuery plug-in that allows for pre-form submission diff --git a/jquery.simpleFilePreview.js b/jquery.simpleFilePreview.js index b7a3b60..f278eac 100644 --- a/jquery.simpleFilePreview.js +++ b/jquery.simpleFilePreview.js @@ -85,9 +85,9 @@ // 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 (p.attr('data-sfpallowmultiple') == 1 && !p.find('.simpleFilePreview_preview').length) { - var newId = $.simpleFilePreview.uid++; - var newN = p.clone(true).attr('id', "simpleFilePreview_"+newId); + function createnew() { + var newId = $.simpleFilePreview.uid++; + var newN = p.removeClass('hover').clone(true).attr('id', "simpleFilePreview_"+newId); newN.find('input.simpleFilePreview_formInput').attr('id', newN.find('input.simpleFilePreview_formInput').attr('id')+'_'+newId).val(''); p.after(newN); var nw = p.parents('.simpleFilePreview_multi').width('+='+newN.outerWidth(true)).width(); @@ -96,33 +96,41 @@ .find('.simpleFilePreview_shiftRight') .click(); } + return newId; + } + function setupReader(x,file){ + var r = new FileReader(); + r.onload = function (e) { + addOrChangePreview(x, e.target.result); + }; + r.readAsDataURL(file); + } + + if (p.attr('data-sfpallowmultiple') == 1 && !p.find('.simpleFilePreview_preview').length) { + createnew(); } - if (this.files && this.files[0]) { - if ((new RegExp("^image\/("+$.simpleFilePreview.previewFileTypes+")$")).test(this.files[0].type.toLowerCase())) { - - if (window.FileReader) { - if ((new RegExp("^image\/("+$.simpleFilePreview.previewFileTypes+")$")).test(this.files[0].type.toLowerCase())) { - // show preview of image file - var r = new FileReader(); - r.onload = function (e) { - addOrChangePreview(p, e.target.result); - }; - r.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] && o.icons[m[1]]) { - addOrChangePreview(p, o.iconPath+o.icons[m[1]], getFilename(this.value)); - } else { - addOrChangePreview(p, o.iconPath+o.defaultIcon, getFilename(this.value)); - } + for (var i = 0; i < this.files.length; i++) { + if (i>0) { + pid = createnew(); + p = $("#simpleFilePreview_"+pid); + } + if ((new RegExp("^image\/("+$.simpleFilePreview.previewFileTypes+")$")).test(this.files[i].type.toLowerCase())) { + if (window.FileReader) { + // show preview of image file + setupReader(p,this.files[i]); + } + + } else { + // show icon if not an image upload + var m = this.files[i].type.toLowerCase().match(/^\s*[^\/]+\/([a-zA-Z0-9\-\.]+)\s*$/); + if (m && m[1] && o.icons[m[1]]) { + addOrChangePreview(p, o.iconPath+o.icons[m[1]], getFilename(this.value)); + } else { + addOrChangePreview(p, o.iconPath+o.defaultIcon, getFilename(this.value)); + } + } } - } else { // Any browser not supporting the File API (and FileReader) @@ -233,7 +241,7 @@ var setup = function(n, o) { var isMulti = n.is('[multiple]'); // "multiple" removed because it's handled later manually - n = n.removeAttr('multiple').addClass('simpleFilePreview_formInput'); + n = n.addClass('simpleFilePreview_formInput'); //removeAttr('multiple'). // wrap input with necessary structure var c = $("<"+((isMulti)?'li':'div')+" id='simpleFilePreview_"+($.simpleFilePreview.uid++)+"' class='simpleFilePreview' data-sfpallowmultiple='"+((isMulti)?1:0)+"'>" + @@ -356,7 +364,7 @@ // Static properties $.simpleFilePreview = { defaults: { - 'buttonContent': 'Add File', + 'buttonContent': 'Add File(s)
Drag here', 'removeContent': 'X', 'existingFiles': null, // array or object. if object, key is used in the remove hidden input 'shiftLeft': '<<', @@ -408,5 +416,10 @@ init: false, previewFileTypes: 'p?jpe?g|png|gif|bmp|svg' }; - + })(jQuery); + + // file drop support + $("body").on('dragover','.simpleFilePreview:not(.simpleFilePreview_existing)', function(){$(this).addClass('hover')}); + $("body").on('dragleave','.simpleFilePreview:not(.simpleFilePreview_existing)', function(){$(this).removeClass('hover')}); + $("body").on('drop','.simpleFilePreview:not(.simpleFilePreview_existing)', function(){$(this).removeClass('hover')}); diff --git a/simpleFilePreview.css b/simpleFilePreview.css index 0114621..9c940e8 100755 --- a/simpleFilePreview.css +++ b/simpleFilePreview.css @@ -1,20 +1,17 @@ - .simpleFilePreview_multiUI { - border: 2px solid #fff; - border-radius:4px; + border-radius:3px; background-color:#f2f2f2; - box-shadow:0 0 0 1px #c1c1c1; - width: 450px; + width: 100%; position: relative; padding: 15px 30px; - margin-left: 75px; + margin-left: 0; /*75px*/ } .simpleFilePreview_multiClip { overflow: hidden; } .simpleFilePreview_multi { display: block; - height: 130px; + /*height: 130px;*/ padding: 0; position: relative; left: 0; @@ -23,6 +20,7 @@ .simpleFilePreview_shifter { position: absolute; top: 70px; + font-weight: bold; cursor: pointer; } .simpleFilePreview_shiftLeft { left: 3px; } @@ -35,21 +33,22 @@ width: 120px; height: 120px; margin-left: 10px; - border: 4px solid #fff; border-radius:3px; background-color: #f7f7f7; padding: 3px; text-align: center; cursor: pointer; overflow: hidden; - box-shadow:0 0 4px 0 #555; } .simpleFilePreview_multi .simpleFilePreview { float: left; } .simpleFilePreview_input { + background-color: #3c8dbc; + color:#FFF; + font-weight: bold; position: relative; overflow: hidden; display: inline-block; - padding-top: 40%; + padding-top: 30%; height: 100%; width: 100%; } @@ -93,3 +92,9 @@ right: 0; z-index: 4; } +.simpleFilePreview_remove i { + font-size: 1.4em; +} +.simpleFilePreview.hover { + border: 1px solid #f00; +}