ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
This commit is contained in:
Ingo Schommer
parent
b8cc2085b6
commit
c0d187071a
|
|
@ -34,4 +34,8 @@ and [installation from source](http://doc.silverstripe.org/sapphire/en/installat
|
|||
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
|
||||
STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY
|
||||
OF SUCH DAMAGE.
|
||||
OF SUCH DAMAGE.
|
||||
|
||||
## Attribution ##
|
||||
|
||||
* Some icons by [Yusuke Kamiyamane](http://p.yusukekamiyamane.com/). All rights reserved. Licensed under a [Creative Commons Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/).
|
||||
|
|
|
|||
|
|
@ -510,7 +510,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
|
|||
|
||||
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; }
|
||||
.cms-logo .version { display: none; }
|
||||
.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; }
|
||||
.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url("../images/logo_small.png") no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; }
|
||||
.cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
|
||||
|
||||
.cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@
|
|||
* Variable: ChangeTrackerOptions
|
||||
* (Object)
|
||||
*/
|
||||
ChangeTrackerOptions: {},
|
||||
ChangeTrackerOptions: {
|
||||
ignoreFieldSelector: '.ss-upload :input'
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructor: onmatch
|
||||
|
|
|
|||
|
|
@ -84,4 +84,4 @@ $grid-horizontal: 8px;
|
|||
/** -----------------------------------------------
|
||||
* Application Logo (CMS Logo) Must be 24px x 24px
|
||||
* ------------------------------------------------ */
|
||||
$application-logo-small: image-url("logo_small.png");
|
||||
$application-logo-small: url("../images/logo_small.png");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
|
||||
/** ----------------------------------------------- Colours ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Textures ----------------------------------------------- */
|
||||
/** ----------------------------------------------- Typography. ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both vertical and horizontal. All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
|
||||
/** Helper SCSS file for generating sprites for the interface. */
|
||||
/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
|
||||
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
|
||||
|
||||
.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; background: #E2E2E2; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name span { font-size: 11px; color: #848484; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-delete { display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile { height: 70px; padding: 5px 15px 15px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; background-image: none; padding-left: 25px; padding-right: 7px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer.ui-state-hover { border-color: #59781d; background: #80bf40 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#8cc653, #669933); }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:active, .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:focus { padding: 8px 8px 8px 26px; border: none; background: #619130 url('../images/sprites_16x16-scf81c570f3.png') 7px -45px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; }
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
|
||||
/** ----------------------------------------------- Colours ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Textures ----------------------------------------------- */
|
||||
/** ----------------------------------------------- Typography. ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both vertical and horizontal. All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
|
||||
/** Helper SCSS file for generating sprites for the interface. */
|
||||
/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
|
||||
.ss-uploadfield .clear { clear: both; }
|
||||
.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
|
||||
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
|
||||
.ss-uploadfield .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
|
||||
.ss-uploadfield .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
|
||||
.ss-uploadfield .ss-uploadfield-item-info { margin: 0 0 0 100px; }
|
||||
.ss-uploadfield .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
|
||||
.ss-uploadfield .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
|
||||
.ss-uploadfield .ss-uploadfield-item-name span { font-size: 11px; color: #848484; }
|
||||
.ss-uploadfield .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
|
||||
.ss-uploadfield .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
|
||||
.ss-uploadfield label.ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-startall:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete { color: red; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
|
||||
.ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; max-height: 272px; overflow: auto; position: relative; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error { border: 0; border-bottom: 1px solid #b3b3b3; background: none; color: #444444; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { background: url('../images/sprites_16x16-scf81c570f3.png') 0 -156px no-repeat; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; margin-top: 8px; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
|
||||
.ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }
|
||||
|
||||
body.ss-uploadfield-edit-iframe { padding: 16px 16px; }
|
||||
|
||||
.ss-upload .clear { clear: both; }
|
||||
.ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; border: solid #000; border-width: 0 0 100px 200px; opacity: 0; filter: alpha(opacity=0); -o-transform: translate(250px, -50px) scale(1); -moz-transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; }
|
||||
|
|
@ -136,6 +136,11 @@ unless these are explicitly noted.
|
|||
|
||||
Alternatively, you can enforce database usage by setting `SapphireTest->usesDatabase` to `TRUE` in your test class.
|
||||
|
||||
### Deprecated Classes ###
|
||||
|
||||
* `FileIframeField`: Use `UploadField`
|
||||
* `ImageField`: Use `UploadField` with `$myField->allowedExtensions = array('jpg', 'gif', 'png')`
|
||||
|
||||
### Renamed Classes ###
|
||||
|
||||
* `DataObjectDecorator`: Use `DataExtension` instead (the class doesn't implement the [GOF "Decorator" pattern](http://en.wikipedia.org/wiki/Decorator_pattern))
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ The $fields parameter is passed by reference, as it is an object.
|
|||
:::php
|
||||
public function updateCMSFields(FieldList $fields) {
|
||||
$fields->push(new TextField('Position', 'Position Title'));
|
||||
$fields->push(new ImageField('Image', 'Profile Image'));
|
||||
$fields->push(new UploadField('Image', 'Profile Image'));
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -47,11 +47,7 @@ set {inlcudeDefaultJS} to false and work with behaviour.js.
|
|||
## Files
|
||||
|
||||
* `[FileField](api:FileField)`: Simple file upload dialog.
|
||||
* `[FileIFrameField](api:FileIFrameField)`: File uploads through an iframe
|
||||
* `[api:ImageField]`: Image upload through an iframe, with thumbnails and file-selection from existing assets
|
||||
* `[SimpleImageField](api:SimpleImageField)`: SimpleImageField provides an easy way of uploading images to Image has_one
|
||||
relationships. Unlike ImageField, it doesn't use an iframe.
|
||||
|
||||
* `[UploadField](api:FileIFrameField)`: File uploads through HTML5 features, including upload progress, preview and relationship management.
|
||||
|
||||
## Relations
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ including resizing.
|
|||
### Form Fields
|
||||
|
||||
* `[api:Image]`. Designed to provide a complex image uploader for the CMS.
|
||||
* `[api:SimpleImageField]`. A Simple Image Upload Form
|
||||
* `[api:FileField]` and `[api:UploadField]`. Allows upload of images (through limiting file extensions with `setAllowedExtensions()`).
|
||||
|
||||
### Resizing Images in PHP
|
||||
|
||||
|
|
@ -100,8 +100,8 @@ For output of an image tag with the image automatically resized to 80px width, y
|
|||
|
||||
### Form Upload
|
||||
|
||||
For usage on a website form, see `[api:SimpleImageField]`.
|
||||
If you want to upload images within the CMS, see `[api:ImageField]`.
|
||||
For usage on a website form, see `[api:FileField]`.
|
||||
If you want to upload images within the CMS, see `[api:UploadField]`.
|
||||
|
||||
### Clearing Thumbnail Cache
|
||||
|
||||
|
|
|
|||
|
|
@ -594,7 +594,7 @@ insert an image in the *$Content* field).
|
|||
public function getCMSFields() {
|
||||
$fields = parent::getCMSFields();
|
||||
|
||||
$fields->addFieldToTab("Root.Content.Images", new ImageField('Photo'));
|
||||
$fields->addFieldToTab("Root.Content.Images", new UploadField('Photo'));
|
||||
|
||||
return $fields;
|
||||
}
|
||||
|
|
@ -610,7 +610,7 @@ a simple database field like all the fields we have seen so far, but has its own
|
|||
array, we create a relationship between the *StaffPage* table and the *Image* table by storing the id of the respective
|
||||
*Image* in the *StaffPage* table.
|
||||
|
||||
We then add an *ImageField* in the *getCMSFields* function to the tab "Root.Content.Images". Since this tab doesn't exist,
|
||||
We then add an `[api:UploadField]` in the *getCMSFields* function to the tab "Root.Content.Images". Since this tab doesn't exist,
|
||||
the *addFieldToTab* function will create it for us. The *ImageField* allows us to select an image or upload a new one in
|
||||
the CMS.
|
||||
|
||||
|
|
|
|||
|
|
@ -680,6 +680,11 @@ class File extends DataObject {
|
|||
return ($size) ? self::format_size($size) : false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a file size (eg: (int)42 becomes string '42 bytes')
|
||||
* @param int $size
|
||||
* @return string
|
||||
*/
|
||||
public static function format_size($size) {
|
||||
if($size < 1024) return $size . ' bytes';
|
||||
if($size < 1024*10) return (round($size/1024*10)/10). ' KB';
|
||||
|
|
@ -688,6 +693,24 @@ class File extends DataObject {
|
|||
if($size < 1024*1024*1024) return round(($size/1024)/1024) . ' MB';
|
||||
return round($size/(1024*1024*1024)*10)/10 . ' GB';
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a php.ini value (eg: 512M) to bytes
|
||||
*
|
||||
* @param string $phpIniValue
|
||||
* @return int
|
||||
*/
|
||||
public function ini2bytes($PHPiniValue) {
|
||||
switch(strtolower(substr(trim($PHPiniValue), -1))) {
|
||||
case 'g':
|
||||
$PHPiniValue *= 1024;
|
||||
case 'm':
|
||||
$PHPiniValue *= 1024;
|
||||
case 'k':
|
||||
$PHPiniValue *= 1024;
|
||||
}
|
||||
return $PHPiniValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return file size in bytes.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
* Please set a validator on the form-object to get feedback
|
||||
* about imposed filesize/extension restrictions.
|
||||
*
|
||||
* CAUTION: Doesn't work in the CMS due to ajax submission, please use {@link FileIFrameField} instead.
|
||||
* See {@link UploadField} For a more full-featured field
|
||||
* (incl. ajax-friendly uploads, previews and relationship management).
|
||||
*
|
||||
* <b>Usage</p>
|
||||
*
|
||||
|
|
@ -146,6 +147,7 @@ class FileField extends FormField {
|
|||
// save to record
|
||||
$record->{$this->name . 'ID'} = $file->ID;
|
||||
}
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function Value() {
|
||||
|
|
@ -168,6 +170,7 @@ class FileField extends FormField {
|
|||
*/
|
||||
public function setValidator($validator) {
|
||||
$this->upload->setValidator($validator);
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -175,6 +178,7 @@ class FileField extends FormField {
|
|||
*/
|
||||
public function setFolderName($folderName) {
|
||||
$this->folderName = $folderName;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,746 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Field for uploading single or multiple files of all types, including images.
|
||||
* <b>NOTE: this Field will call write() on the supplied record</b>
|
||||
*
|
||||
* <b>Features (some might not be avaliable to old browsers):</b>
|
||||
*
|
||||
* - File Drag&Drop support
|
||||
* - Progressbar
|
||||
* - Image thumbnail/file icons even before upload finished
|
||||
* - Saving into relations
|
||||
* - Edit file
|
||||
* - allowedExtensions is by default File::$allowed_extensions<li>maxFileSize the vaule of min(upload_max_filesize, post_max_size) from php.ini
|
||||
*
|
||||
* @example <code>
|
||||
* $UploadField = new UploadField('myFiles', 'Please upload some images <span>(max. 5 files)</span>');
|
||||
* $UploadField->getValidator()->setAllowedExtensions(array('jpg', 'jpeg', 'png', 'gif'));
|
||||
* $UploadField->setConfig('allowedMaxFileNumber', 5);
|
||||
* </code>
|
||||
*
|
||||
* @author Zauberfisch
|
||||
* @package sapphire
|
||||
* @subpackage forms
|
||||
*/
|
||||
class UploadField extends FileField {
|
||||
|
||||
/**
|
||||
* @var array
|
||||
*/
|
||||
public static $allowed_actions = array(
|
||||
'upload',
|
||||
'handleItem'
|
||||
);
|
||||
|
||||
/**
|
||||
* @var array
|
||||
*/
|
||||
public static $url_handlers = array(
|
||||
'item/$ID' => 'handleItem',
|
||||
'$Action!' => '$Action',
|
||||
);
|
||||
|
||||
/**
|
||||
* @var String
|
||||
*/
|
||||
protected $template = 'UploadField';
|
||||
|
||||
/**
|
||||
* @var String
|
||||
*/
|
||||
protected $templateFileButtons = 'UploadField_FileButtons';
|
||||
|
||||
/**
|
||||
* @var String
|
||||
*/
|
||||
protected $templateFileEdit = 'UploadField_FileEdit';
|
||||
|
||||
/**
|
||||
* @var DataObject
|
||||
*/
|
||||
protected $record;
|
||||
|
||||
/**
|
||||
* @var SS_List
|
||||
*/
|
||||
protected $items;
|
||||
|
||||
/**
|
||||
* Config for this field used in both, php and javascript (will be merged into the config of the javascript file upload plugin)
|
||||
* @var array
|
||||
*/
|
||||
protected $config = array(
|
||||
/**
|
||||
* @var boolean
|
||||
*/
|
||||
'autoUpload' => true,
|
||||
/**
|
||||
* php validation of allowedMaxFileNumber only works when a db relation is avaliable, set to null to allow unlimited
|
||||
* if record has a has_one and allowedMaxFileNumber is null, it will be set to 1
|
||||
* @var int
|
||||
*/
|
||||
'allowedMaxFileNumber' => null,
|
||||
/**
|
||||
* @var int
|
||||
*/
|
||||
'previewMaxWidth' => 80,
|
||||
/**
|
||||
* @var int
|
||||
*/
|
||||
'previewMaxHeight' => 60,
|
||||
/**
|
||||
* javascript template used to display uploading files
|
||||
* @see javascript/UploadField_uploadtemplate.js
|
||||
* @var string
|
||||
*/
|
||||
'uploadTemplateName' => 'ss-uploadfield-uploadtemplate',
|
||||
/**
|
||||
* javascript template used to display already uploaded files
|
||||
* @see javascript/UploadField_downloadtemplate.js
|
||||
* @var string
|
||||
*/
|
||||
'downloadTemplateName' => 'ss-uploadfield-downloadtemplate',
|
||||
/**
|
||||
* FieldList $fields or string $name (of a method on File to provide a fields) for the EditForm
|
||||
* @example 'getCMSFields'
|
||||
* @var FieldList|string
|
||||
*/
|
||||
'fileEditFields' => null,
|
||||
/**
|
||||
* FieldList $actions or string $name (of a method on File to provide a actions) for the EditForm
|
||||
* @example 'getCMSActions'
|
||||
* @var FieldList|string
|
||||
*/
|
||||
'fileEditActions' => null,
|
||||
/**
|
||||
* Validator (eg RequiredFields) or string $name (of a method on File to provide a Validator) for the EditForm
|
||||
* @example 'getCMSValidator'
|
||||
* @var string
|
||||
*/
|
||||
'fileEditValidator' => null
|
||||
);
|
||||
|
||||
/**
|
||||
* @param string $name The internal field name, passed to forms.
|
||||
* @param string $title The field label.
|
||||
* @param SS_List $items If no items are defined, the field will try to auto-detect an existion relation on {@link $record},
|
||||
* with the same name as the field name.
|
||||
* @param Form $form Reference to the container form
|
||||
*/
|
||||
public function __construct($name, $title = null, SS_List $items = null) {
|
||||
// TODO thats the first thing that came to my head, feel free to change it
|
||||
$this->addExtraClass('ss-upload'); // class, used by js
|
||||
$this->addExtraClass('ss-uploadfield'); // class, used by css for uploadfield only
|
||||
|
||||
parent::__construct($name, $title);
|
||||
|
||||
if($items) $this->setItems($items);
|
||||
|
||||
$this->getValidator()->setAllowedExtensions(array_filter(File::$allowed_extensions)); // filter out '' since this would be a regex problem on JS end
|
||||
$this->getValidator()->setAllowedMaxFileSize(min(File::ini2bytes(ini_get('upload_max_filesize')), File::ini2bytes(ini_get('post_max_size')))); // get the lower max size
|
||||
}
|
||||
|
||||
/**
|
||||
* Set name of template used for Buttons on each file (replace, edit, remove, delete) (without path or extension)
|
||||
*
|
||||
* @param String
|
||||
*/
|
||||
public function setTemplateFileButtons($template) {
|
||||
$this->templateFileButtons = $template;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return String
|
||||
*/
|
||||
public function getTemplateFileButtons() {
|
||||
return $this->templateFileButtons;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set name of template used for the edit (inline & popup) of a file file (without path or extension)
|
||||
*
|
||||
* @param String
|
||||
*/
|
||||
public function setTemplateFileEdit($template) {
|
||||
$this->templateFileEdit = $template;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return String
|
||||
*/
|
||||
public function getTemplateFileEdit() {
|
||||
return $this->templateFileEdit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force a record to be used as "Parent" for uploaded Files (eg a Page with a has_one to File)
|
||||
* @param DataOjbect $record
|
||||
*/
|
||||
public function setRecord($record) {
|
||||
$this->record = $record;
|
||||
return $this;
|
||||
}
|
||||
/**
|
||||
* Get the record to use as "Parent" for uploaded Files (eg a Page with a has_one to File) If none is set, it will use Form->getRecord() or Form->Controller()->data()
|
||||
* @return DataObject
|
||||
*/
|
||||
public function getRecord() {
|
||||
if (!$this->record && $this->form) {
|
||||
if ($this->form->getRecord() && is_a($this->form->getRecord(), 'DataObject')) {
|
||||
$this->record = $this->form->getRecord();
|
||||
} elseif ($this->form->Controller() && $this->form->Controller()->hasMethod('data')
|
||||
&& $this->form->Controller()->data() && is_a($this->form->Controller()->data(), 'DataObject')) {
|
||||
$this->record = $this->form->Controller()->data();
|
||||
}
|
||||
}
|
||||
return $this->record;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param SS_List $items
|
||||
*/
|
||||
public function setItems(SS_List $items) {
|
||||
$this->items = $items;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return SS_List
|
||||
*/
|
||||
public function getItems() {
|
||||
$name = $this->getName();
|
||||
if (!$this->items || !$this->items->exists()) {
|
||||
$record = $this->getRecord();
|
||||
$this->items = array();
|
||||
// Try to auto-detect relationship
|
||||
if ($record && $record->exists()) {
|
||||
if ($record->has_many($name) || $record->many_many($name)) {
|
||||
// Ensure relationship is cast to an array, as we can't alter the items of a DataList/RelationList (see below)
|
||||
$this->items = $record->{$name}()->toArray();
|
||||
} elseif($record->has_one($name)) {
|
||||
$item = $record->{$name}();
|
||||
if ($item && $item->exists())
|
||||
$this->items = array($record->{$name}());
|
||||
}
|
||||
}
|
||||
$this->items = new ArrayList($this->items);
|
||||
// hack to provide $UploadFieldThumbnailURL, $hasRelation and $UploadFieldEditLink in template for each file
|
||||
if ($this->items->exists()) {
|
||||
foreach ($this->items as $i=>$file) {
|
||||
$this->items[$i] = $this->customiseFile($file);
|
||||
if(!$file->canView()) unset($this->items[$i]); // Respect model permissions
|
||||
}
|
||||
}
|
||||
}
|
||||
return $this->items;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hack to add some Variables and a dynamic template to a File
|
||||
* @param File $file
|
||||
* @param bool [$hasRelation] has this file a relation to the record the file is on?
|
||||
* @return ViewableData_Customised
|
||||
*/
|
||||
protected function customiseFile(File $file, $hasRelation = true) {
|
||||
$file = $file->customise(array(
|
||||
'UploadFieldHasRelation' => $hasRelation,
|
||||
'UploadFieldThumbnailURL' => $this->getThumbnailURLForFile($file),
|
||||
'UploadFieldRemoveLink' => $this->getItemHandler($file->ID)->RemoveLink(),
|
||||
'UploadFieldDeleteLink' => $this->getItemHandler($file->ID)->DeleteLink(),
|
||||
'UploadFieldEditLink' => $this->getItemHandler($file->ID)->EditLink()
|
||||
));
|
||||
// we do this in a second customise to have the access to the previous customisations
|
||||
return $file->customise(array(
|
||||
'UploadFieldFileButtons' => $file->renderWith($this->getTemplateFileButtons())
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $key
|
||||
* @param mixed $val
|
||||
*/
|
||||
public function setConfig($key, $val) {
|
||||
$this->config[$key] = $val;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $key
|
||||
* @return mixed
|
||||
*/
|
||||
public function getConfig($key) {
|
||||
return $this->config[$key];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param File $file
|
||||
* @return string
|
||||
*/
|
||||
protected function getThumbnailURLForFile(File $file) {
|
||||
if ($file && $file->exists() && file_exists(Director::baseFolder() . '/' . $file->getFilename())) {
|
||||
if ($file->hasMethod('getThumbnail')) {
|
||||
return $file->getThumbnail($this->getConfig('previewMaxWidth'), $this->getConfig('previewMaxHeight'))->getURL();
|
||||
} elseif ($file->hasMethod('getThumbnailURL')) {
|
||||
return $file->getThumbnailURL($this->getConfig('previewMaxWidth'), $this->getConfig('previewMaxHeight'));
|
||||
} elseif ($file->hasMethod('SetRatioSize')) {
|
||||
return $file->SetRatioSize($this->getConfig('previewMaxWidth'), $this->getConfig('previewMaxHeight'))->getURL();
|
||||
} else {
|
||||
return $file->Icon();
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
public function Field() {
|
||||
$record = $this->getRecord();
|
||||
$name = $this->getName();
|
||||
if ($record && $record->exists()) {
|
||||
if (!$record->has_many($name) && !$record->many_many($name) && !$this->getConfig('allowedMaxFileNumber') &&
|
||||
((substr($name, -2) === 'ID' && $record->has_one(substr($name, 0, -2))) || $record->has_one($name))) {
|
||||
// if there is a has_one relation with that name on the record and allowedMaxFileNumber has not been set, its wanted to be 1
|
||||
$this->setConfig('allowedMaxFileNumber', 1);
|
||||
}
|
||||
}
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js');
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/javascript/i18n.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/ssui.core.js');
|
||||
|
||||
Requirements::combine_files('uploadfield.js', array(
|
||||
THIRDPARTY_DIR . '/javascript-templates/tmpl.js',
|
||||
THIRDPARTY_DIR . '/javascript-loadimage/load-image.js',
|
||||
THIRDPARTY_DIR . '/jquery-fileupload/jquery.iframe-transport.js',
|
||||
THIRDPARTY_DIR . '/jquery-fileupload/cors/jquery.xdr-transport.js',
|
||||
THIRDPARTY_DIR . '/jquery-fileupload/jquery.fileupload.js',
|
||||
THIRDPARTY_DIR . '/jquery-fileupload/jquery.fileupload-ui.js',
|
||||
SAPPHIRE_DIR . '/javascript/UploadField_uploadtemplate.js',
|
||||
SAPPHIRE_DIR . '/javascript/UploadField_downloadtemplate.js',
|
||||
SAPPHIRE_DIR . '/javascript/UploadField.js',
|
||||
));
|
||||
Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css'); // TODO hmmm, remove it?
|
||||
Requirements::css(SAPPHIRE_DIR . '/css/UploadField.css');
|
||||
|
||||
$config = array(
|
||||
'url' => $this->Link('upload'),
|
||||
'acceptFileTypes' => '.+$',
|
||||
'maxNumberOfFiles' => $this->getConfig('allowedMaxFileNumber')
|
||||
);
|
||||
if (count($this->getValidator()->getAllowedExtensions())) {
|
||||
$allowedExtensions = $this->getValidator()->getAllowedExtensions();
|
||||
$config['acceptFileTypes'] = '(\.|\/)(' . implode('|', $allowedExtensions) . ')$';
|
||||
$config['errorMessages']['acceptFileTypes'] = sprintf(_t(
|
||||
'File.INVALIDEXTENSION',
|
||||
'Extension is not allowed (valid: %s)'
|
||||
), wordwrap(implode(', ', $allowedExtensions)));
|
||||
}
|
||||
if ($this->getValidator()->getAllowedMaxFileSize()) {
|
||||
$config['maxFileSize'] = $this->getValidator()->getAllowedMaxFileSize();
|
||||
$config['errorMessages']['maxFileSize'] = sprintf(_t(
|
||||
'File.TOOLARGE',
|
||||
'Filesize is too large, maximum %s allowed.'
|
||||
), File::format_size($config['maxFileSize']));
|
||||
}
|
||||
if ($config['maxNumberOfFiles'] > 1) {
|
||||
$config['errorMessages']['maxNumberOfFiles'] = sprintf(_t(
|
||||
'UploadField.MAXNUMBEROFFILES',
|
||||
'Max number of %s file(s) exceeded.'
|
||||
), $config['maxNumberOfFiles']);
|
||||
}
|
||||
$configOverwrite = array();
|
||||
if (is_numeric($config['maxNumberOfFiles']) && $this->getItems()->count()) {
|
||||
$configOverwrite['maxNumberOfFiles'] = $config['maxNumberOfFiles'] - $this->getItems()->count();
|
||||
}
|
||||
$config = array_merge($config, $this->config, $configOverwrite);
|
||||
return $this->customise(array(
|
||||
'configString' => str_replace('"', "'", Convert::raw2json($config)),
|
||||
'config' => new ArrayData($config),
|
||||
'multiple' => $config['maxNumberOfFiles'] !== 1,
|
||||
'displayInput' => (!isset($configOverwrite['maxNumberOfFiles']) || $configOverwrite['maxNumberOfFiles'])
|
||||
))->renderWith($this->getTemplate());
|
||||
}
|
||||
|
||||
/**
|
||||
* Validation method for this field, called when the entire form is validated
|
||||
*
|
||||
* @param $validator
|
||||
* @return Boolean
|
||||
*/
|
||||
public function validate($validator) {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param SS_HTTPRequest $request
|
||||
* @return UploadField_ItemHandler
|
||||
*/
|
||||
public function handleItem(SS_HTTPRequest $request) {
|
||||
return $this->getItemHandler($request->param('ID'));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param int $itemID
|
||||
* @return UploadField_ItemHandler
|
||||
*/
|
||||
public function getItemHandler($itemID) {
|
||||
return Object::create('UploadField_ItemHandler', $this, $itemID);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to handle upload of a single file
|
||||
*
|
||||
* @param SS_HTTPRequest $request
|
||||
* @return string json
|
||||
*/
|
||||
public function upload(SS_HTTPRequest $request) {
|
||||
if($this->isDisabled() || $this->isReadonly()) return $this->httpError(403);
|
||||
|
||||
// Protect against CSRF on destructive action
|
||||
$token = $this->getForm()->getSecurityToken();
|
||||
if(!$token->checkRequest($request)) return $this->httpError(400);
|
||||
|
||||
$name = $this->getName();
|
||||
$tmpfile = $request->postVar($name);
|
||||
$record = $this->getRecord();
|
||||
|
||||
if (!$tmpfile) {
|
||||
$return = array('error' => _t('UploadField.FIELDNOTSET', 'File information not found'));
|
||||
} else {
|
||||
$return = array(
|
||||
'name' => $tmpfile['name'],
|
||||
'size' => $tmpfile['size'],
|
||||
'type' => $tmpfile['type'],
|
||||
'error' => $tmpfile['error']
|
||||
);
|
||||
}
|
||||
if (!$return['error'] && $record && $record->exists()) {
|
||||
$tooManyFiles = false;
|
||||
if ($this->getConfig('allowedMaxFileNumber') && ($record->has_many($name) || $record->many_many($name))) {
|
||||
if(!$record->isInDB()) $record->write();
|
||||
$tooManyFiles = $record->{$name}()->count() >= $this->getConfig('allowedMaxFileNumber');
|
||||
} elseif(substr($name, -2) === 'ID' && $record->has_one(substr($name, 0, -2))) {
|
||||
$tooManyFiles = $record->{substr($name, 0, -2)}() && $record->{substr($name, 0, -2)}()->exists();
|
||||
} elseif($record->has_one($name)) {
|
||||
$tooManyFiles = $record->{$name}() && $record->{$name}()->exists();
|
||||
}
|
||||
if ($tooManyFiles) {
|
||||
if(!$this->getConfig('allowedMaxFileNumber')) $this->setConfig('allowedMaxFileNumber', 1);
|
||||
$return['error'] = sprintf(_t(
|
||||
'UploadField.MAXNUMBEROFFILES',
|
||||
'Max number of %s file(s) exceeded.'
|
||||
), $this->getConfig('allowedMaxFileNumber'));
|
||||
}
|
||||
}
|
||||
if (!$return['error']) {
|
||||
try {
|
||||
$this->upload->loadIntoFile($tmpfile, null, $this->folderName);
|
||||
} catch (Exception $e) {
|
||||
// we shouldn't get an error here, but just in case
|
||||
$return['error'] = $e->getMessage();
|
||||
}
|
||||
if (!$return['error']) {
|
||||
if ($this->upload->isError()) {
|
||||
$return['error'] = implode(' '.PHP_EOL, $this->upload->getErrors());
|
||||
} else {
|
||||
$file = $this->upload->getFile();
|
||||
$file->OwnerID = (Member::currentUser() ? Member::currentUser()->ID : 0);
|
||||
$file->write();
|
||||
$hasRelation = false;
|
||||
if ($record && $record->exists()) {
|
||||
if ($record->has_many($name) || $record->many_many($name)) {
|
||||
if(!$record->isInDB()) $record->write();
|
||||
$record->{$name}()->add($file);
|
||||
$hasRelation = true;
|
||||
} elseif(substr($name, -2) === 'ID' && $record->has_one(substr($name, 0, -2))) {
|
||||
$record->{$name} = $file->ID;
|
||||
$record->write();
|
||||
$hasRelation = true;
|
||||
} elseif($record->has_one($name)) {
|
||||
$record->{$name . 'ID'} = $file->ID;
|
||||
$record->write();
|
||||
$hasRelation = true;
|
||||
}
|
||||
}
|
||||
$file = $this->customiseFile($file, $hasRelation);
|
||||
$return = array_merge($return, array(
|
||||
'id' => $file->ID,
|
||||
'name' => $file->getTitle() . '.' . $file->getExtension(),
|
||||
'url' => $file->getURL(),
|
||||
'thumbnail_url' => $file->UploadFieldThumbnailURL,
|
||||
'edit_url' => $file->UploadFieldEditLink,
|
||||
'size' => $file->getAbsoluteSize(),
|
||||
'buttons' => $file->UploadFieldFileButtons
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
$response = new SS_HTTPResponse(Convert::raw2json(array($return)));
|
||||
$response->addHeader('Content-Type', 'text/plain');
|
||||
return $response;
|
||||
}
|
||||
|
||||
function performReadonlyTransformation() {
|
||||
$clone = clone $this;
|
||||
$clone->addExtraClass('readonly');
|
||||
$clone->setReadonly(true);
|
||||
return $clone;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* RequestHandler for actions (edit, remove, delete) on a single item (File) of the UploadField
|
||||
*
|
||||
* @author Zauberfisch
|
||||
* @package sapphire
|
||||
* @subpackage forms
|
||||
*/
|
||||
class UploadField_ItemHandler extends RequestHandler {
|
||||
|
||||
/**
|
||||
* @var UploadFIeld
|
||||
*/
|
||||
protected $parent;
|
||||
|
||||
/**
|
||||
* @var int FileID
|
||||
*/
|
||||
protected $itemID;
|
||||
|
||||
public static $url_handlers = array(
|
||||
'$Action!' => '$Action',
|
||||
'' => 'index',
|
||||
);
|
||||
|
||||
/**
|
||||
* @param UploadFIeld $parent
|
||||
* @param int $item
|
||||
*/
|
||||
public function __construct($parent, $itemID) {
|
||||
$this->parent = $parent;
|
||||
$this->itemID = $itemID;
|
||||
|
||||
parent::__construct();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return File
|
||||
*/
|
||||
function getItem() {
|
||||
return DataObject::get_by_id('File', $this->itemID);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $action
|
||||
* @return string
|
||||
*/
|
||||
public function Link($action = null) {
|
||||
return Controller::join_links($this->parent->Link(), '/item/', $this->itemID, $action);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function RemoveLink() {
|
||||
$token = $this->parent->getForm()->getSecurityToken();
|
||||
return $token->addToUrl($this->Link('remove'));
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function DeleteLink() {
|
||||
$token = $this->parent->getForm()->getSecurityToken();
|
||||
return $token->addToUrl($this->Link('delete'));
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function EditLink() {
|
||||
return $this->Link('edit');
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to handle removeing a single file from the db relation
|
||||
*
|
||||
* @param SS_HTTPRequest $request
|
||||
* @return SS_HTTPResponse
|
||||
*/
|
||||
public function remove(SS_HTTPRequest $request) {
|
||||
// Check form field state
|
||||
if($this->parent->isDisabled() || $this->parent->isReadonly()) return $this->httpError(403);
|
||||
|
||||
// Protect against CSRF on destructive action
|
||||
$token = $this->parent->getForm()->getSecurityToken();
|
||||
if(!$token->checkRequest($request)) return $this->httpError(400);
|
||||
|
||||
$response = new SS_HTTPResponse();
|
||||
$response->setStatusCode(500);
|
||||
$fieldName = $this->parent->getName();
|
||||
$record = $this->parent->getRecord();
|
||||
$id = $this->getItem()->ID;
|
||||
if ($id && $record && $record->exists()) {
|
||||
if (($record->has_many($fieldName) || $record->many_many($fieldName)) && $file = $record->{$fieldName}()->byID($id)) {
|
||||
$record->{$fieldName}()->remove($file);
|
||||
$response->setStatusCode(200);
|
||||
} elseif(substr($fieldName, -2) === 'ID' && $record->has_one(substr($fieldName, 0, -2)) && $record->{$fieldName} == $id) {
|
||||
$record->{$fieldName} = 0;
|
||||
$record->write();
|
||||
$response->setStatusCode(200);
|
||||
} elseif($record->has_one($fieldName) && $record->{$fieldName . 'ID'} == $id) {
|
||||
$record->{$fieldName . 'ID'} = 0;
|
||||
$record->write();
|
||||
$response->setStatusCode(200);
|
||||
}
|
||||
}
|
||||
if ($response->getStatusCode() != 200)
|
||||
$response->setStatusDescription(_t('UploadField.REMOVEERROR', 'Error removing file'));
|
||||
return $response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to handle deleting of a single file
|
||||
*
|
||||
* @param SS_HTTPRequest $request
|
||||
* @return SS_HTTPResponse
|
||||
*/
|
||||
public function delete(SS_HTTPRequest $request) {
|
||||
// Check form field state
|
||||
if($this->parent->isDisabled() || $this->parent->isReadonly()) return $this->httpError(403);
|
||||
|
||||
// Protect against CSRF on destructive action
|
||||
$token = $this->parent->getForm()->getSecurityToken();
|
||||
if(!$token->checkRequest($request)) return $this->httpError(400);
|
||||
|
||||
// Check item permissions
|
||||
$item = $this->getItem();
|
||||
if(!$item) return $this->httpError(404);
|
||||
if(!$item->canDelete()) return $this->httpError(403);
|
||||
|
||||
// Only allow actions on files in the managed relation (if one exists)
|
||||
$items = $this->parent->getItems();
|
||||
if($this->managesRelation() && !$items->byID($item->ID)) return $this->httpError(403);
|
||||
|
||||
// First remove the file from the current relationship
|
||||
$this->remove($request);
|
||||
|
||||
// Then delete the file from the filesystem
|
||||
$item->delete();
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to handle editing of a single file
|
||||
*
|
||||
* @param SS_HTTPRequest $request
|
||||
* @return ViewableData_Customised
|
||||
*/
|
||||
public function edit(SS_HTTPRequest $request) {
|
||||
// Check form field state
|
||||
if($this->parent->isDisabled() || $this->parent->isReadonly()) return $this->httpError(403);
|
||||
|
||||
// Check item permissions
|
||||
$item = $this->getItem();
|
||||
if(!$item) return $this->httpError(404);
|
||||
if(!$item->canEdit()) return $this->httpError(403);
|
||||
|
||||
// Only allow actions on files in the managed relation (if one exists)
|
||||
$items = $this->parent->getItems();
|
||||
if($this->managesRelation() && !$items->byID($item->ID)) return $this->httpError(403);
|
||||
|
||||
Requirements::css(SAPPHIRE_DIR . '/css/UploadField.css');
|
||||
|
||||
return $this->customise(array(
|
||||
'Form' => $this->EditForm()
|
||||
))->renderWith($this->parent->getTemplateFileEdit());
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Form
|
||||
*/
|
||||
public function EditForm() {
|
||||
$file = $this->getItem();
|
||||
if (is_a($this->parent->getConfig('fileEditFields'), 'FieldList')) {
|
||||
$fields = $this->parent->getConfig('fileEditFields');
|
||||
} elseif ($file->hasMethod($this->parent->getConfig('fileEditFields'))) {
|
||||
$fields = $file->{$this->parent->getConfig('fileEditFields')}();
|
||||
} else {
|
||||
$fields = $file->getCMSFields();
|
||||
// Only display main tab, to avoid overly complex interface
|
||||
if($fields->hasTabSet() && $mainTab = $fields->findOrMakeTab('Root.Main')) $fields = $mainTab->Fields();
|
||||
}
|
||||
if (is_a($this->parent->getConfig('fileEditActions'), 'FieldList')) {
|
||||
$actions = $this->parent->getConfig('fileEditActions');
|
||||
} elseif ($file->hasMethod($this->parent->getConfig('fileEditActions'))) {
|
||||
$actions = $file->{$this->parent->getConfig('fileEditActions')}();
|
||||
} else {
|
||||
$actions = new FieldList($saveAction = new FormAction('doEdit', _t('UploadField.DOEDIT', 'Save')));
|
||||
$saveAction->addExtraClass('ss-ui-action-constructive');
|
||||
}
|
||||
if (is_a($this->parent->getConfig('fileEditValidator'), 'Validator')) {
|
||||
$validator = $this->parent->getConfig('fileEditValidator');
|
||||
} elseif ($file->hasMethod($this->parent->getConfig('fileEditValidator'))) {
|
||||
$validator = $file->{$this->parent->getConfig('fileEditValidator')}();
|
||||
} else {
|
||||
$validator = null;
|
||||
}
|
||||
$form = new Form(
|
||||
$this,
|
||||
__FUNCTION__,
|
||||
$fields,
|
||||
$actions,
|
||||
$validator
|
||||
);
|
||||
$form->loadDataFrom($file);
|
||||
$form->addExtraClass('small');
|
||||
|
||||
return $form;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array $data
|
||||
* @param Form $form
|
||||
* @param SS_HTTPRequest $request
|
||||
*/
|
||||
public function doEdit(array $data, Form $form, SS_HTTPRequest $request) {
|
||||
// Check form field state
|
||||
if($this->parent->isDisabled() || $this->parent->isReadonly()) return $this->httpError(403);
|
||||
|
||||
// Check item permissions
|
||||
$item = $this->getItem();
|
||||
if(!$item) return $this->httpError(404);
|
||||
if(!$item->canEdit()) return $this->httpError(403);
|
||||
|
||||
// Only allow actions on files in the managed relation (if one exists)
|
||||
$items = $this->parent->getItems();
|
||||
if($this->managesRelation() && !$items->byID($item->ID)) return $this->httpError(403);
|
||||
|
||||
$form->saveInto($item);
|
||||
$item->write();
|
||||
|
||||
$form->sessionMessage(_t('UploadField.Saved', 'Saved'), 'good');
|
||||
|
||||
return $this->parent->getForm()->Controller()->redirectBack();
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines if the underlying record (if any) has a relationship
|
||||
* matching the field name. Important for permission control.
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
protected function managesRelation() {
|
||||
$record = $this->parent->getRecord();
|
||||
$fieldName = $this->parent->getName();
|
||||
if(!$record) return false;
|
||||
|
||||
return (
|
||||
(substr($fieldName, -2) === 'ID' && $record->has_one(substr($fieldName, 0, -2)))
|
||||
|| $record->has_many($fieldName)
|
||||
|| $record->many_many($fieldName)
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
Binary file not shown.
|
After Width: | Height: | Size: 680 B |
Binary file not shown.
|
After Width: | Height: | Size: 746 B |
Binary file not shown.
|
After Width: | Height: | Size: 680 B |
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
Binary file not shown.
|
After Width: | Height: | Size: 641 B |
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
Binary file not shown.
|
After Width: | Height: | Size: 731 B |
Binary file not shown.
|
After Width: | Height: | Size: 657 B |
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
|
|
@ -0,0 +1,14 @@
|
|||
(function($) {
|
||||
$('.ss-assetuploadfield').entwine({
|
||||
onmatch: function() {
|
||||
this._super();
|
||||
|
||||
// Hide the "second step" part until we're actually uploading
|
||||
this.find('.ss-uploadfield-editandorganize').hide();
|
||||
},
|
||||
onfileuploadstart: function(e) {
|
||||
this.find('.ss-uploadfield-editandorganize').show();
|
||||
}
|
||||
|
||||
});
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
(function($) {
|
||||
$.widget('blueimpUIX.fileupload', $.blueimpUI.fileupload, {
|
||||
_initTemplates: function() {
|
||||
this.options.templateContainer = document.createElement(
|
||||
this._files.prop('nodeName')
|
||||
);
|
||||
this.options.uploadTemplate = window.tmpl(this.options.uploadTemplateName);
|
||||
this.options.downloadTemplate = window.tmpl(this.options.downloadTemplateName);
|
||||
},
|
||||
_enableFileInputButton: function() {
|
||||
$.blueimpUI.fileupload.prototype._enableFileInputButton.call(this);
|
||||
this.element.find('.ss-uploadfield-addfile').show();
|
||||
},
|
||||
_disableFileInputButton: function() {
|
||||
$.blueimpUI.fileupload.prototype._disableFileInputButton.call(this);
|
||||
this.element.find('.ss-uploadfield-addfile').hide();
|
||||
},
|
||||
_onAdd: function(e, data) {
|
||||
// use _onAdd instead of add since we only want it called once for a file set, not for each file
|
||||
var result = $.blueimpUI.fileupload.prototype._onAdd.call(this, e, data);
|
||||
var firstNewFile = this._files.find('.ss-uploadfield-item').slice(data.files.length*-1).first();
|
||||
var top = '+=' + (firstNewFile.position().top - parseInt(firstNewFile.css('marginTop')) || 0 - parseInt(firstNewFile.css('borderTopWidth')) || 0);
|
||||
firstNewFile.offsetParent().animate({scrollTop: top}, 1000);
|
||||
return result;
|
||||
}
|
||||
});
|
||||
$.entwine('ss', function($) {
|
||||
$('div.ss-upload').entwine({
|
||||
onmatch: function() {
|
||||
var fileInput = this.find('input');
|
||||
var dropZone = this.find('.ss-uploadfield-dropzone');
|
||||
var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
|
||||
this.fileupload($.extend(true,
|
||||
{
|
||||
formData: function(form) {
|
||||
return [{name: 'SecurityID', value: $(form).find(':input[name=SecurityID]').val()}];
|
||||
},
|
||||
errorMessages: {
|
||||
// errorMessages for all error codes suggested from the plugin author, some will be overwritten by the config comming from php
|
||||
1: ss.i18n._t('UploadField.PHP_MAXFILESIZE'),
|
||||
2: ss.i18n._t('UploadField.HTML_MAXFILESIZE'),
|
||||
3: ss.i18n._t('UploadField.ONLYPARTIALUPLOADED'),
|
||||
4: ss.i18n._t('UploadField.NOFILEUPLOADED'),
|
||||
5: ss.i18n._t('UploadField.NOTMPFOLDER'),
|
||||
6: ss.i18n._t('UploadField.WRITEFAILED'),
|
||||
7: ss.i18n._t('UploadField.STOPEDBYEXTENSION'),
|
||||
maxFileSize: ss.i18n._t('UploadField.TOOLARGE'),
|
||||
minFileSize: ss.i18n._t('UploadField.TOOSMALL'),
|
||||
acceptFileTypes: ss.i18n._t('UploadField.INVALIDEXTENSION'),
|
||||
maxNumberOfFiles: ss.i18n._t('UploadField.MAXNUMBEROFFILESSIMPLE'),
|
||||
uploadedBytes: ss.i18n._t('UploadField.UPLOADEDBYTES'),
|
||||
emptyResult: ss.i18n._t('UploadField.EMPTYRESULT')
|
||||
},
|
||||
send: function(e, data) {
|
||||
if (data.context && data.dataType && data.dataType.substr(0, 6) === 'iframe') {
|
||||
// Iframe Transport does not support progress events.
|
||||
// In lack of an indeterminate progress bar, we set
|
||||
// the progress to 100%, showing the full animated bar:
|
||||
data.total = 1;
|
||||
data.loaded = 1;
|
||||
$(this).data('fileupload').options.progress(e, data);
|
||||
}
|
||||
},
|
||||
progress: function(e, data) {
|
||||
if (data.context) {
|
||||
var value = parseInt(data.loaded / data.total * 100, 10) + '%';
|
||||
data.context.find('.ss-uploadfield-item-status').html((data.total == 1)?ss.i18n._t('UploadField.LOADING'):value);
|
||||
data.context.find('.ss-uploadfield-item-progressbarvalue').css('width', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
config,
|
||||
{
|
||||
fileInput: fileInput,
|
||||
dropZone: dropZone,
|
||||
previewAsCanvas: false,
|
||||
acceptFileTypes: new RegExp(config.acceptFileTypes, 'i')
|
||||
}
|
||||
));
|
||||
if (this.data('fileupload')._isXHRUpload({multipart: true})) {
|
||||
$('.ss-uploadfield-item-uploador').show();
|
||||
dropZone.show(); // drag&drop avaliable
|
||||
}
|
||||
this._super();
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item').entwine({
|
||||
onmatch: function() {
|
||||
this.closest('.ss-upload').find('.ss-uploadfield-addfile').addClass('borderTop');
|
||||
},
|
||||
onunmatch: function() {
|
||||
$('.ss-uploadfield-files:not(:has(.ss-uploadfield-item))').closest('.ss-upload').find('.ss-uploadfield-addfile').removeClass('borderTop');
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-startall').entwine({
|
||||
onclick: function(e) {
|
||||
this.closest('.ss-upload').find('.ss-uploadfield-item-start button').click();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-cancelfailed').entwine({
|
||||
onclick: function(e) {
|
||||
this.closest('.ss-uploadfield-item').remove();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-remove:not(.ui-state-disabled), .ss-uploadfield-item-delete:not(.ui-state-disabled)').entwine({
|
||||
onclick: function(e) {
|
||||
var fileupload = this.closest('div.ss-upload').data('fileupload'),
|
||||
item = this.closest('.ss-uploadfield-item'), msg = '';
|
||||
|
||||
if(this.is('.ss-uploadfield-item-delete')) msg = ss.i18n._t('UploadField.ConfirmDelete');
|
||||
if(!msg || confirm(msg)) {
|
||||
fileupload._trigger('destroy', e, {
|
||||
context: item,
|
||||
url: this.data('href'),
|
||||
type: 'get',
|
||||
dataType: fileupload.options.dataType
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-edit').entwine({
|
||||
onclick: function(e) {
|
||||
var editform = this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform');
|
||||
if (editform.hasClass('loading')) {
|
||||
// TODO Display loading indication, and register an event to toggle edit form
|
||||
} else {
|
||||
this.siblings().toggleClass('ui-state-disabled');
|
||||
editform.toggleEditForm();
|
||||
}
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-editform').entwine({
|
||||
EditFormVisible: false,
|
||||
fitHeight: function() {
|
||||
var iframe = this.find('iframe'),
|
||||
h = iframe.contents().height() + 'px';
|
||||
iframe.css('height', h);
|
||||
return h;
|
||||
},
|
||||
showEditForm: function() {
|
||||
return this.stop().animate({height: this.fitHeight()});
|
||||
},
|
||||
hideEditFormShow: function() {
|
||||
return this.stop().animate({height: 0});
|
||||
},
|
||||
toggleEditForm: function() {
|
||||
if (this.getEditFormVisible()) this.hideEditFormShow();
|
||||
else this.showEditForm();
|
||||
this.setEditFormVisible(!this.getEditFormVisible());
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-editform iframe').entwine({
|
||||
onmatch: function() {
|
||||
this.load(function() {
|
||||
$(this).parent().removeClass('loading');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
|
||||
'{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}' +
|
||||
'<li class="ss-uploadfield-item template-download{% if (file.error) { %} ui-state-error{% } %}" data-fileid="{%=file.id%}">' +
|
||||
'<div class="ss-uploadfield-item-preview preview"><span>' +
|
||||
'<img src="{%=file.thumbnail_url%}" alt="" />' +
|
||||
'</span></div>' +
|
||||
'<div class="ss-uploadfield-item-info">' +
|
||||
'<label class="ss-uploadfield-item-name">' +
|
||||
'<b>{%=file.name%}</b> ' +
|
||||
'<span>{%=o.formatFileSize(file.size)%}</span>' +
|
||||
'{% if (file.error) { %}' +
|
||||
'<span class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error] || file.error%}</span>' +
|
||||
'{% } %}' +
|
||||
'<div class="clear"><!-- --></div>' +
|
||||
'</label>' +
|
||||
'{% if (file.error) { %}' +
|
||||
'<div class="ss-uploadfield-item-actions">' +
|
||||
'<div class="ss-uploadfield-item-cancel ss-uploadfield-item-cancelfailed"><button class="icon icon-16">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' +
|
||||
'</div>' +
|
||||
'{% } else { %}' +
|
||||
'<div class="ss-uploadfield-item-actions">{% print(file.buttons, true); %}</div>' +
|
||||
'{% } %}' +
|
||||
'</div>' +
|
||||
'{% if (!file.error) { %}' +
|
||||
'<div class="ss-uploadfield-item-editform loading"><iframe frameborder="0" src="{%=file.edit_url%}"></iframe></div>' +
|
||||
'{% } %}' +
|
||||
'</li>' +
|
||||
'{% } %}'
|
||||
);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
window.tmpl.cache['ss-uploadfield-uploadtemplate'] = tmpl(
|
||||
'{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}' +
|
||||
'<li class="ss-uploadfield-item template-upload{% if (file.error) { %} ui-state-error{% } %}">' +
|
||||
'<div class="ss-uploadfield-item-preview preview"><span></span></div>' +
|
||||
'<div class="ss-uploadfield-item-info">' +
|
||||
'<label class="ss-uploadfield-item-name">' +
|
||||
'<b>{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}</b> ' +
|
||||
'<span>{%=o.formatFileSize(file.size)%}</span>' +
|
||||
'{% if (file.error) { %}' +
|
||||
'<span class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error] || file.error%}</span>' +
|
||||
'{% } else { %}' +
|
||||
'<span class="ss-uploadfield-item-status">0%</span>' +
|
||||
'{% } %}' +
|
||||
'<div class="clear"><!-- --></div>' +
|
||||
'</label>' +
|
||||
'<div class="ss-uploadfield-item-actions">' +
|
||||
'{% if (!file.error) { %}' +
|
||||
'<div class="ss-uploadfield-item-progress"><div class="ss-uploadfield-item-progressbar"><div class="ss-uploadfield-item-progressbarvalue"></div></div></div>' +
|
||||
'{% if (!o.options.autoUpload) { %}' +
|
||||
'<div class="ss-uploadfield-item-start start"><button class="icon icon-16">' + ss.i18n._t('UploadField.START', 'Start') + '</button></div>' +
|
||||
'{% } %}' +
|
||||
'{% } %}' +
|
||||
'<div class="ss-uploadfield-item-cancel cancel"><button class="icon icon-16">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'{% } %}'
|
||||
);
|
||||
|
|
@ -16,6 +16,21 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
|
|||
'FILEIFRAMEFIELD.DELETEIMAGE': 'Delete Image',
|
||||
'FILEIFRAMEFIELD.CONFIRMDELETE': 'Are you sure you want to delete this file?',
|
||||
'LeftAndMain.IncompatBrowserWarning': 'Your browser is not compatible with the CMS interface. Please use Internet Explorer 7+, Google Chrome 10+ or Mozilla Firefox 3.5+.',
|
||||
'GRIDFIELD.ERRORINTRANSACTION': 'An error occured while fetching data from the server\n Please try again later.'
|
||||
'GRIDFIELD.ERRORINTRANSACTION': 'An error occured while fetching data from the server\n Please try again later.',
|
||||
'UploadField.ConfirmDelete': 'Are you sure you want to remove this file from the server filesystem?',
|
||||
'UploadField.PHP_MAXFILESIZE': 'File exceeds upload_max_filesize (php.ini directive)',
|
||||
'UploadField.HTML_MAXFILESIZE': 'File exceeds MAX_FILE_SIZE (HTML form directive)',
|
||||
'UploadField.ONLYPARTIALUPLOADED': 'File was only partially uploaded',
|
||||
'UploadField.NOFILEUPLOADED': 'No File was uploaded',
|
||||
'UploadField.NOTMPFOLDER': 'Missing a temporary folder',
|
||||
'UploadField.WRITEFAILED': 'Failed to write file to disk',
|
||||
'UploadField.STOPEDBYEXTENSION': 'File upload stopped by extension',
|
||||
'UploadField.TOOLARGE': 'Filesize is too large',
|
||||
'UploadField.TOOSMALL': 'Filesize is too small',
|
||||
'UploadField.INVALIDEXTENSION': 'Extension is not allowed',
|
||||
'UploadField.MAXNUMBEROFFILESSIMPLE': 'Max number of files exceeded',
|
||||
'UploadField.UPLOADEDBYTES': 'Uploaded bytes exceed file size',
|
||||
'UploadField.EMPTYRESULT': 'Empty file upload result',
|
||||
'UploadField.LOADING': 'Loading ...'
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
@import "compass/css3";
|
||||
|
||||
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
||||
@import "../admin/scss/themes/default.scss";
|
||||
@import "sprites.scss";
|
||||
|
||||
#AssetUploadField {
|
||||
border-bottom: 0;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.ss-assetuploadfield {
|
||||
h3 {
|
||||
border-bottom: 1px solid $color-shadow-light;
|
||||
@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
|
||||
margin: 0 0 8px;
|
||||
padding: 0 0 7px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ss-uploadfield-files {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.ss-uploadfield-item {
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
@include border-radius(5px);
|
||||
@include background-clip(padding-box);
|
||||
background: #E2E2E2;
|
||||
margin: 0 0 5px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.ss-uploadfield-item-preview {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.ss-uploadfield-item-info {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
background-color: #5db4df;
|
||||
@include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%));
|
||||
}
|
||||
.ui-state-error .ss-uploadfield-item-info {
|
||||
background-color: #c11f1d;
|
||||
@include background-image(linear-gradient(top, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
|
||||
}
|
||||
.ss-uploadfield-item-name {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 3px 0 3px 50px;
|
||||
width: 40%;
|
||||
background: #fff;
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
@include border-radius(5px);
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
height: 22px;
|
||||
padding: 0 5px;
|
||||
text-align: left;
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
span {
|
||||
font-size: $font-base-size - 1;
|
||||
color: lighten($color-text, 25%);
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-status {
|
||||
float: right;
|
||||
padding: 0 0 0 5px;
|
||||
|
||||
&.ui-state-error-text {
|
||||
color: $color-button-destructive;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
label.ss-ui-button {
|
||||
background: none;
|
||||
border: 0;
|
||||
@include box-shadow(none);
|
||||
@include text-shadow(none);
|
||||
color: $color-text-light;
|
||||
float: right;
|
||||
|
||||
&.ss-uploadfield-item-delete {
|
||||
// TODO tmp hack until we have permissions and can disable delete
|
||||
display: none;
|
||||
}
|
||||
&.ss-uploadfield-fromfiles {
|
||||
//@include actionButtonSprite('network-cloud');
|
||||
}
|
||||
&.ss-uploadfield-item-delete {
|
||||
//color: $color-button-destructive;
|
||||
//@include actionButtonSprite('minus-circle');
|
||||
}
|
||||
&.ss-uploadfield-item-edit {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-progress {
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
@include border-radius(5px);
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.ss-uploadfield-item-progressbar {
|
||||
background-color: #92a6b3;
|
||||
@include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%));
|
||||
}
|
||||
.ss-uploadfield-item-progressbarvalue {
|
||||
width: 0;
|
||||
background: #60b3dd url(../images/progressbar_blue.gif) repeat left center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ss-uploadfield-item-cancel {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
@include single-box-shadow(none);
|
||||
background: sprite($sprites16, cross-circle) no-repeat;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-editform {
|
||||
/* don't use display none, for it will break jQuery('iframe').contents().height() */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-addfile {
|
||||
height: 70px;
|
||||
padding: 5px 15px 15px;
|
||||
|
||||
.ss-uploadfield-item-info {
|
||||
float: left;
|
||||
margin: 19px 0 0;
|
||||
}
|
||||
.ss-uploadfield-fromcomputer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0 10px 0 0;
|
||||
@include actionButtonSpriteConstructive('drive-upload');
|
||||
}
|
||||
.ss-uploadfield-item-uploador {
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
padding: 0 20px;
|
||||
line-height: 70px;
|
||||
display: none;
|
||||
}
|
||||
.ss-uploadfield-dropzone {
|
||||
@include border-radius(10px);
|
||||
@include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset);
|
||||
border: 2px dashed $color-medium-separator;
|
||||
background: $color-light-separator;
|
||||
display: none;
|
||||
height: 66px;
|
||||
width: 300px;
|
||||
float: left;
|
||||
|
||||
div {
|
||||
padding: 15px 0 0;
|
||||
line-height: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
@import "compass/css3";
|
||||
|
||||
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
||||
@import "../admin/scss/themes/default.scss";
|
||||
@import "sprites.scss";
|
||||
|
||||
|
||||
.ss-uploadfield {
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.middleColumn {
|
||||
// TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy)
|
||||
// so we should move this style into the cms and black candy files
|
||||
width: 526px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
@include border-radius(4px);
|
||||
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
||||
}
|
||||
.ss-uploadfield-item {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ss-uploadfield-item-preview {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
&.ss-uploadfield-dropzone {
|
||||
@include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset);
|
||||
border: 2px dashed $color-medium-separator;
|
||||
background: $color-light-separator;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-info {
|
||||
margin: 0 0 0 100px;
|
||||
}
|
||||
.ss-uploadfield-item-name {
|
||||
display: block;
|
||||
line-height: 13px;
|
||||
height: 26px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
span {
|
||||
font-size: $font-base-size - 1;
|
||||
color: lighten($color-text, 25%);
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-status {
|
||||
float: right;
|
||||
padding: 0 0 0 5px;
|
||||
|
||||
&.ui-state-error-text {
|
||||
color: $color-button-destructive;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
label.ss-ui-button {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
&.ss-uploadfield-fromcomputer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@include actionButtonSprite('drive-upload');
|
||||
}
|
||||
&.ss-uploadfield-fromfiles {
|
||||
@include actionButtonSprite('network-cloud');
|
||||
}
|
||||
&.ss-uploadfield-startall {
|
||||
@include actionButtonSprite('navigation');
|
||||
}
|
||||
&.ss-uploadfield-item-delete {
|
||||
color: $color-button-destructive;
|
||||
@include actionButtonSprite('minus-circle');
|
||||
}
|
||||
&.ss-uploadfield-item-remove {
|
||||
@include actionButtonSprite('plug-disconnect-prohibition');
|
||||
}
|
||||
&.ss-uploadfield-item-edit {
|
||||
@include actionButtonSprite('pencil');
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-files {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 272px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
.ss-uploadfield-item,
|
||||
.ss-uploadfield-item.ui-state-error {
|
||||
border: 0;
|
||||
border-bottom: 1px solid lighten($color-medium-separator, 20%);
|
||||
background: none;
|
||||
color: $color-text;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-actions {
|
||||
height: 28px;
|
||||
margin: 6px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.ss-uploadfield-item-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 42px;
|
||||
width: auto;
|
||||
margin: 11px 0 0;
|
||||
height: 15px;
|
||||
|
||||
div {
|
||||
@include border-radius(25px);
|
||||
height: 13px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-progressbar {
|
||||
border: 1px solid $color-medium-separator;
|
||||
background-color: #92a6b3;
|
||||
@include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%));
|
||||
}
|
||||
.ss-uploadfield-item-progressbarvalue {
|
||||
border: 0;
|
||||
width: 0%;
|
||||
background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center;
|
||||
}
|
||||
.ss-uploadfield-item-cancel,
|
||||
.ss-uploadfield-item-start {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
@include single-box-shadow(none);
|
||||
background: sprite($sprites16, cross-circle) no-repeat;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-start {
|
||||
right: 20px;
|
||||
button {
|
||||
background: sprite($sprites16, navigation) no-repeat;
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-editform {
|
||||
/* don't use display none, for it will break jQuery('iframe').contents().height() */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
margin-top: $grid-vertical;
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-addfile {
|
||||
&.borderTop {
|
||||
border-top: 1px solid lighten($color-medium-separator, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.ss-uploadfield-edit-iframe {
|
||||
padding: $grid-vertical*2 $grid-horizontal*2;
|
||||
}
|
||||
|
||||
.ss-upload {
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.ss-uploadfield-fromcomputer {
|
||||
input {
|
||||
/* since we can't really style the file input, we use this hack to make it as big as the button and hide it */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
border: solid #000;
|
||||
border-width: 0 0 100px 200px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-o-transform: translate(250px, -50px) scale(1);
|
||||
-moz-transform: translate(-300px, 0) scale(4);
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* Helper SCSS file for generating sprites for the interface.
|
||||
*/
|
||||
@import "compass/utilities/sprites/base";
|
||||
|
||||
//$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
|
||||
|
||||
$sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
|
||||
|
||||
/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
|
||||
@mixin actionButtonSprite($name) {
|
||||
padding-left: 24px;
|
||||
padding-right: 6px;
|
||||
|
||||
@include background($color-button-generic sprite($sprites16, $name, 5px, 6px) no-repeat);
|
||||
@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
|
||||
linear-gradient(color-stops(
|
||||
lighten($color-button-generic, 10%),
|
||||
darken($color-button-generic, 5%)
|
||||
))
|
||||
);
|
||||
&.ui-state-hover,
|
||||
&:hover {
|
||||
@include background(lighten($color-button-generic, 10%) sprite($sprites16, $name, 5px, 6px) no-repeat);
|
||||
@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
|
||||
linear-gradient(color-stops(
|
||||
lighten($color-button-generic, 20%),
|
||||
$color-button-generic
|
||||
))
|
||||
);
|
||||
}
|
||||
&.ui-state-disabled {
|
||||
background-image: none;
|
||||
color: $color-text;
|
||||
@include background(lighten($color-button-generic, 20%) sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat);
|
||||
@include background(sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat,
|
||||
linear-gradient(color-stops(
|
||||
lighten($color-button-generic, 20%),
|
||||
$color-button-generic
|
||||
))
|
||||
);
|
||||
}
|
||||
}
|
||||
@mixin actionButtonSpriteConstructive($name) {
|
||||
background-image: none;
|
||||
padding-left: 25px;
|
||||
padding-right: 7px;
|
||||
font-weight: bold;
|
||||
margin-left: $grid-horizontal;
|
||||
color: $color-text-light;
|
||||
border-color: $color-button-constructive-border;
|
||||
border-bottom-color: darken($color-button-constructive-border, 10%);
|
||||
@include background($color-button-constructive sprite($sprites16, $name, 6, 6) no-repeat);
|
||||
@include background(sprite($sprites16, $name
|
||||
, 6, 6) no-repeat,
|
||||
linear-gradient(color-stops(
|
||||
lighten($color-button-constructive, 10%),
|
||||
darken($color-button-constructive, 5%)
|
||||
))
|
||||
);
|
||||
|
||||
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
|
||||
|
||||
&.ui-state-hover {
|
||||
border-color: darken($color-button-constructive-border, 10%);
|
||||
@include background(lighten($color-button-constructive, 10%) sprite($sprites16, $name, 6, 6) no-repeat);
|
||||
@include background(sprite($sprites16, $name, 6, 6) no-repeat,
|
||||
linear-gradient(color-stops(
|
||||
lighten($color-button-constructive, 15%),
|
||||
$color-button-constructive
|
||||
))
|
||||
);
|
||||
}
|
||||
&:active, &:focus {
|
||||
padding: $grid-vertical 8px $grid_vertical 26px;
|
||||
border: none;
|
||||
@include background(darken($color-button-constructive, 2%) sprite($sprites16, $name, 7, 7) no-repeat);
|
||||
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<h3 class="ss-uploadfield-choosefiles"><% _t('AssetUploadField.CHOOSEFILES', 'Choose files') %></h3>
|
||||
<div class="ss-uploadfield-item ss-uploadfield-addfile">
|
||||
<div class="ss-uploadfield-item-info">
|
||||
<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
|
||||
<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
|
||||
<span><% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %></span>
|
||||
</label>
|
||||
<div class="clear"><!-- --></div>
|
||||
</div>
|
||||
<div class="ss-uploadfield-item-uploador">
|
||||
<% _t('AssetUploadField.UPLOADOR', 'OR') %>
|
||||
</div>
|
||||
<div class="ss-uploadfield-item-preview ss-uploadfield-dropzone">
|
||||
<div>
|
||||
<% _t('AssetUploadField.DROPAREA', 'Drop Area') %>
|
||||
<span><% _t('AssetUploadField.DRAGFILESHERE', 'Drag files here') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"><!-- --></div>
|
||||
</div>
|
||||
<h3 class="ss-uploadfield-editandorganize"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></h3>
|
||||
<ul class="ss-uploadfield-files files"></ul>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<% if canEdit %>
|
||||
<label class="ss-uploadfield-item-edit ss-ui-button ui-corner-all" title="<% _t('UploadField.EDITINFO', 'Edit this file') %>"><% _t('UploadField.EDIT', 'Edit') %></label>
|
||||
<% if UploadFieldHasRelation %>
|
||||
<label data-href="$UploadFieldRemoveLink" class="ss-uploadfield-item-remove ss-ui-button ui-corner-all" title="<% _t('UploadField.REMOVEINFO', 'Remove this file from here, but do not delete it from the file store') %>"><% _t('UploadField.REMOVE', 'Remove') %></label>
|
||||
<% end_if %>
|
||||
<% end_if %>
|
||||
<% if canDelete %>
|
||||
<label data-href="$UploadFieldDeleteLink" class="ss-uploadfield-item-delete ss-ui-button ui-corner-all" title="<% _t('UploadField.DELETEINFO', 'Permanently delete this file from the file store') %>"><% _t('UploadField.DELETE', 'Delete from files') %></label>
|
||||
<% end_if %>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<ul class="ss-uploadfield-files files">
|
||||
<% if $Items %>
|
||||
<% loop $Items %>
|
||||
<li class="ss-uploadfield-item template-download" data-fileid="$ID">
|
||||
<div class="ss-uploadfield-item-preview preview"><span>
|
||||
<img alt="$hasRelation" src="$UploadFieldThumbnailURL" />
|
||||
</span></div>
|
||||
<div class="ss-uploadfield-item-info">
|
||||
<label class="ss-uploadfield-item-name">
|
||||
<b>{$Title}.{$Extension}</b>
|
||||
<span>$Size</span>
|
||||
<div class="clear"><!-- --></div>
|
||||
</label>
|
||||
<div class="ss-uploadfield-item-actions">
|
||||
<% if Top.isDisabled || Top.isReadonly %>
|
||||
<% else %>
|
||||
$UploadFieldFileButtons
|
||||
<% end_if %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ss-uploadfield-item-editform loading">
|
||||
<iframe frameborder="0" src="$UploadFieldEditLink"></iframe>
|
||||
</div>
|
||||
</li>
|
||||
<% end_loop %>
|
||||
<% end_if %>
|
||||
</ul>
|
||||
<% if isDisabled || isReadonly %>
|
||||
<% else %>
|
||||
<div class="ss-uploadfield-item ss-uploadfield-addfile<% if $Items && $displayInput %> borderTop<% end_if %>" <% if not $displayInput %>style="display: none;"<% end_if %>>
|
||||
<div class="ss-uploadfield-item-preview ss-uploadfield-dropzone ui-corner-all">
|
||||
<% if $multiple %>
|
||||
<% _t('UploadField.DROPFILES', 'drop files') %>
|
||||
<% else %>
|
||||
<% _t('UploadField.DROPFILE', 'drop a file') %>
|
||||
<% end_if %>
|
||||
</div>
|
||||
<div class="ss-uploadfield-item-info">
|
||||
<label class="ss-uploadfield-item-name"><b>
|
||||
<% if $multiple %>
|
||||
<% _t('UploadField.ATTACHFILES', 'Attach files') %>
|
||||
<% else %>
|
||||
<% _t('UploadField.ATTACHFILE', 'Attach a file') %>
|
||||
<% end_if %>
|
||||
</b></label>
|
||||
<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
|
||||
<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
|
||||
<span><% _t('UploadField.FROMCOMPUTER', 'From your computer') %></span>
|
||||
</label>
|
||||
<label class="ss-uploadfield-fromfiles ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Select from from files') %>"><% _t('UploadField.FROMCOMPUTER', 'From files') %></label>
|
||||
<% if not $config.autoUpload %>
|
||||
<label class="ss-uploadfield-startall ss-ui-button ui-corner-all" title="<% _t('UploadField.STARTALLINFO', 'Start all uploads') %>"><% _t('UploadField.STARTALL', 'Start all') %></label>
|
||||
<% end_if %>
|
||||
<div class="clear"><!-- --></div>
|
||||
</div>
|
||||
<div class="clear"><!-- --></div>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<% base_tag %>
|
||||
<title></title>
|
||||
</head>
|
||||
|
||||
<body class="cms ss-uploadfield-edit-iframe">
|
||||
$Form
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,551 @@
|
|||
<?php
|
||||
/**
|
||||
* @package sapphire
|
||||
* @subpackage tests
|
||||
*/
|
||||
|
||||
class UploadFieldTest extends FunctionalTest {
|
||||
|
||||
static $fixture_file = 'UploadFieldTest.yml';
|
||||
|
||||
protected $extraDataObjects = array('UploadFieldTest_Record');
|
||||
|
||||
protected $requiredExtensions = array(
|
||||
'File' => array('UploadFieldTest_FileExtension')
|
||||
);
|
||||
|
||||
function testUploadNoRelation() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
|
||||
$tmpFileName = 'testUploadBasic.txt';
|
||||
$_FILES = array('NoRelationField' => $this->getUploadFile($tmpFileName));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/NoRelationField/upload',
|
||||
array('NoRelationField' => $this->getUploadFile($tmpFileName))
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$this->assertFileExists(ASSETS_PATH . "/UploadFieldTest/$tmpFileName");
|
||||
$uploadedFile = DataObject::get_one('File', sprintf('"Name" = \'%s\'', $tmpFileName));
|
||||
$this->assertNotNull($uploadedFile);
|
||||
}
|
||||
|
||||
function testUploadHasOneRelation() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
// Unset existing has_one relation before re-uploading
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$record->HasOneFileID = null;
|
||||
$record->write();
|
||||
|
||||
$tmpFileName = 'testUploadHasOneRelation.txt';
|
||||
$_FILES = array('HasOneFile' => $this->getUploadFile($tmpFileName));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasOneFile/upload',
|
||||
array('HasOneFile' => $this->getUploadFile($tmpFileName))
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$this->assertFileExists(ASSETS_PATH . "/UploadFieldTest/$tmpFileName");
|
||||
$uploadedFile = DataObject::get_one('File', sprintf('"Name" = \'%s\'', $tmpFileName));
|
||||
$this->assertNotNull($uploadedFile);
|
||||
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertTrue($record->HasOneFile()->exists());
|
||||
$this->assertEquals($record->HasOneFile()->Name, $tmpFileName);
|
||||
}
|
||||
|
||||
function testUploadHasManyRelation() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
|
||||
$tmpFileName = 'testUploadHasManyRelation.txt';
|
||||
$_FILES = array('HasManyFiles' => $this->getUploadFile($tmpFileName));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasManyFiles/upload',
|
||||
array('HasManyFiles' => $this->getUploadFile($tmpFileName))
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$this->assertFileExists(ASSETS_PATH . "/UploadFieldTest/$tmpFileName");
|
||||
$uploadedFile = DataObject::get_one('File', sprintf('"Name" = \'%s\'', $tmpFileName));
|
||||
$this->assertNotNull($uploadedFile);
|
||||
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertEquals(3, $record->HasManyFiles()->Count());
|
||||
$this->assertEquals($record->HasManyFiles()->Last()->Name, $tmpFileName);
|
||||
}
|
||||
|
||||
function testUploadManyManyRelation() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$relationCount = $record->ManyManyFiles()->Count();
|
||||
|
||||
$tmpFileName = 'testUploadManyManyRelation.txt';
|
||||
$_FILES = array('ManyManyFiles' => $this->getUploadFile($tmpFileName));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/ManyManyFiles/upload',
|
||||
array('ManyManyFiles' => $this->getUploadFile($tmpFileName))
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$this->assertFileExists(ASSETS_PATH . "/UploadFieldTest/$tmpFileName");
|
||||
$uploadedFile = DataObject::get_one('File', sprintf('"Name" = \'%s\'', $tmpFileName));
|
||||
$this->assertNotNull($uploadedFile);
|
||||
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertEquals($relationCount+1, $record->ManyManyFiles()->Count());
|
||||
$this->assertEquals($record->ManyManyFiles()->Last()->Name, $tmpFileName);
|
||||
}
|
||||
|
||||
function testAllowedMaxFileNumber() {
|
||||
$this->markTestIncomplete();
|
||||
}
|
||||
|
||||
function testRemoveFromHasOne() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file1 = $this->objFromFixture('File', 'file1');
|
||||
|
||||
$this->assertTrue($record->HasOneFile()->exists());
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasOneFile/item/' . $file1->ID . '/remove',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertFalse($record->HasOneFile()->exists());
|
||||
$this->assertFileExists($file1->FullPath, 'File is only detached, not deleted from filesystem');
|
||||
}
|
||||
|
||||
function testRemoveFromHasMany() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file2 = $this->objFromFixture('File', 'file2');
|
||||
$file3 = $this->objFromFixture('File', 'file3');
|
||||
|
||||
$this->assertEquals(array('File2', 'File3'), $record->HasManyFiles()->column('Title'));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasManyFiles/item/' . $file2->ID . '/remove',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertEquals(array('File3'), $record->HasManyFiles()->column('Title'));
|
||||
$this->assertFileExists($file3->FullPath, 'File is only detached, not deleted from filesystem');
|
||||
}
|
||||
|
||||
function testRemoveFromManyMany() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file4 = $this->objFromFixture('File', 'file4');
|
||||
$file5 = $this->objFromFixture('File', 'file5');
|
||||
|
||||
$this->assertContains('File4', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertContains('File5', $record->ManyManyFiles()->column('Title'));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/ManyManyFiles/item/' . $file4->ID . '/remove',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertNotContains('File4', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertContains('File5', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertFileExists($file4->FullPath, 'File is only detached, not deleted from filesystem');
|
||||
}
|
||||
|
||||
function testDeleteFromHasOne() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file1 = $this->objFromFixture('File', 'file1');
|
||||
|
||||
$this->assertTrue($record->HasOneFile()->exists());
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasOneFile/item/' . $file1->ID . '/delete',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertFalse($record->HasOneFile()->exists());
|
||||
$this->assertFileNotExists($file1->FullPath, 'File is also removed from filesystem');
|
||||
}
|
||||
|
||||
function testDeleteFromHasMany() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file2 = $this->objFromFixture('File', 'file2');
|
||||
$file3 = $this->objFromFixture('File', 'file3');
|
||||
|
||||
$this->assertEquals(array('File2', 'File3'), $record->HasManyFiles()->column('Title'));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasManyFiles/item/' . $file2->ID . '/delete',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertEquals(array('File3'), $record->HasManyFiles()->column('Title'));
|
||||
$this->assertFileNotExists($file2->FullPath, 'File is also removed from filesystem');
|
||||
|
||||
$fileNotOnRelationship = $this->objFromFixture('File', 'file1');
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/HasManyFiles/item/' . $fileNotOnRelationship->ID . '/delete',
|
||||
array()
|
||||
);
|
||||
$this->assertEquals(403, $response->getStatusCode(), "Denies deleting files if they're not on the current relationship");
|
||||
}
|
||||
|
||||
function testDeleteFromManyMany() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file4 = $this->objFromFixture('File', 'file4');
|
||||
$file5 = $this->objFromFixture('File', 'file5');
|
||||
$fileNoDelete = $this->objFromFixture('File', 'file-nodelete');
|
||||
|
||||
$this->assertContains('File4', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertContains('File5', $record->ManyManyFiles()->column('Title'));
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/ManyManyFiles/item/' . $file4->ID . '/delete',
|
||||
array()
|
||||
);
|
||||
$this->assertFalse($response->isError());
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$this->assertNotContains('File4', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertContains('File5', $record->ManyManyFiles()->column('Title'));
|
||||
$this->assertFileNotExists($file4->FullPath, 'File is also removed from filesystem');
|
||||
|
||||
// Test record-based permissions
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/ManyManyFiles/item/' . $fileNoDelete->ID . '/delete',
|
||||
array()
|
||||
);
|
||||
$this->assertEquals(403, $response->getStatusCode());
|
||||
}
|
||||
|
||||
function testView() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file4 = $this->objFromFixture('File', 'file4');
|
||||
$file5 = $this->objFromFixture('File', 'file5');
|
||||
$fileNoView = $this->objFromFixture('File', 'file-noview');
|
||||
$fileNoEdit = $this->objFromFixture('File', 'file-noedit');
|
||||
$fileNoDelete = $this->objFromFixture('File', 'file-nodelete');
|
||||
|
||||
$response = $this->get('UploadFieldTest_Controller');
|
||||
$this->assertFalse($response->isError());
|
||||
|
||||
$parser = new CSSContentParser($response->getBody());
|
||||
$items = $parser->getBySelector('#ManyManyFiles .ss-uploadfield-files .ss-uploadfield-item');
|
||||
$ids = array();
|
||||
foreach($items as $item) $ids[] = (int)$item['data-fileid'];
|
||||
|
||||
$this->assertContains($file4->ID, $ids, 'Views related file');
|
||||
$this->assertContains($file5->ID, $ids, 'Views related file');
|
||||
$this->assertNotContains($fileNoView->ID, $ids, "Doesn't view files without view permissions");
|
||||
$this->assertContains($fileNoEdit->ID, $ids, "Views files without edit permissions");
|
||||
$this->assertContains($fileNoDelete->ID, $ids, "Views files without delete permissions");
|
||||
}
|
||||
|
||||
function testEdit() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$file4 = $this->objFromFixture('File', 'file4');
|
||||
$file5 = $this->objFromFixture('File', 'file5');
|
||||
$fileNoEdit = $this->objFromFixture('File', 'file-noedit');
|
||||
$baseUrl = 'UploadFieldTest_Controller/Form/field/ManyManyFiles/item/' . $file4->ID;
|
||||
|
||||
$response = $this->get($baseUrl . '/edit');
|
||||
$this->assertFalse($response->isError());
|
||||
|
||||
$response = $this->post($baseUrl . '/EditForm', array('Title' => 'File 4 modified'));
|
||||
$this->assertFalse($response->isError());
|
||||
|
||||
$record = DataObject::get_by_id($record->class, $record->ID, false);
|
||||
$file4 = DataObject::get_by_id($file4->class, $file4->ID, false);
|
||||
$this->assertEquals('File 4 modified', $file4->Title);
|
||||
|
||||
// Test record-based permissions
|
||||
$response = $this->post(
|
||||
'UploadFieldTest_Controller/Form/field/ManyManyFiles/item/' . $fileNoEdit->ID . '/edit',
|
||||
array()
|
||||
);
|
||||
$this->assertEquals(403, $response->getStatusCode());
|
||||
}
|
||||
|
||||
function testGetRecord() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$form = $this->getMockForm();
|
||||
|
||||
$field = new UploadField('MyField');
|
||||
$field->setForm($form);
|
||||
$this->assertNull($field->getRecord(), 'Returns no record by default');
|
||||
|
||||
$field = new UploadField('MyField');
|
||||
$field->setForm($form);
|
||||
$form->loadDataFrom($record);
|
||||
$this->assertEquals($record, $field->getRecord(), 'Returns record from form if available');
|
||||
|
||||
$field = new UploadField('MyField');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$this->assertEquals($record, $field->getRecord(), 'Returns record when set explicitly');
|
||||
}
|
||||
|
||||
function testSetItems() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$form = $this->getMockForm();
|
||||
$items = new ArrayList(array(
|
||||
$this->objFromFixture('File', 'file1'),
|
||||
$this->objFromFixture('File', 'file2')
|
||||
));
|
||||
|
||||
// Anonymous field
|
||||
$field = new UploadField('MyField');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$field->setItems($items);
|
||||
$this->assertEquals(array('File1', 'File2'), $field->getItems()->column('Title'));
|
||||
|
||||
// Field with has_one auto-detected
|
||||
$field = new UploadField('HasOneFile');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$field->setItems($items);
|
||||
$this->assertEquals(array('File1', 'File2'), $field->getItems()->column('Title'),
|
||||
'Allows overwriting of items even when relationship is detected'
|
||||
);
|
||||
}
|
||||
|
||||
function testGetItems() {
|
||||
$record = $this->objFromFixture('UploadFieldTest_Record', 'record1');
|
||||
$form = $this->getMockForm();
|
||||
|
||||
// Anonymous field
|
||||
$field = new UploadField('MyField');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$this->assertEquals(array(), $field->getItems()->column('Title'));
|
||||
|
||||
// Field with has_one auto-detected
|
||||
$field = new UploadField('HasOneFile');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$this->assertEquals(array('File1'), $field->getItems()->column('Title'));
|
||||
|
||||
// Field with has_many auto-detected
|
||||
$field = new UploadField('HasManyFiles');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$this->assertEquals(array('File2', 'File3'), $field->getItems()->column('Title'));
|
||||
|
||||
// Field with many_many auto-detected
|
||||
$field = new UploadField('ManyManyFiles');
|
||||
$field->setForm($form);
|
||||
$field->setRecord($record);
|
||||
$this->assertNotContains('File1',$field->getItems()->column('Title'));
|
||||
$this->assertNotContains('File2',$field->getItems()->column('Title'));
|
||||
$this->assertNotContains('File3',$field->getItems()->column('Title'));
|
||||
$this->assertContains('File4',$field->getItems()->column('Title'));
|
||||
$this->assertContains('File5',$field->getItems()->column('Title'));
|
||||
}
|
||||
|
||||
function testReadonly() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$response = $this->get('UploadFieldTest_Controller');
|
||||
$this->assertFalse($response->isError());
|
||||
|
||||
$parser = new CSSContentParser($response->getBody());
|
||||
$this->assertFalse((bool)$parser->getBySelector('#ReadonlyField .ss-uploadfield-files .ss-uploadfield-item .ss-ui-button'), 'Removes all buttons on items');
|
||||
$this->assertFalse((bool)$parser->getBySelector('#ReadonlyField .ss-uploadfield-dropzone'), 'Removes dropzone');
|
||||
$this->assertFalse((bool)$parser->getBySelector('#ReadonlyField .ss-uploadfield-addfile .ss-ui-button'), 'Removes all buttons from "add" area');
|
||||
}
|
||||
|
||||
function testDisabled() {
|
||||
$this->loginWithPermission('ADMIN');
|
||||
|
||||
$response = $this->get('UploadFieldTest_Controller');
|
||||
$this->assertFalse($response->isError());
|
||||
|
||||
$parser = new CSSContentParser($response->getBody());
|
||||
$this->assertFalse((bool)$parser->getBySelector('#DisabledField .ss-uploadfield-files .ss-uploadfield-item .ss-ui-button'), 'Removes all buttons on items');
|
||||
$this->assertFalse((bool)$parser->getBySelector('#DisabledField .ss-uploadfield-dropzone'), 'Removes dropzone');
|
||||
$this->assertFalse((bool)$parser->getBySelector('#DisabledField .ss-uploadfield-addfile .ss-ui-button'), 'Removes all buttons from "add" area');
|
||||
|
||||
}
|
||||
|
||||
protected function getMockForm() {
|
||||
return new Form(new Controller(), 'Form', new FieldList(), new FieldList());
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Array Emulating an entry in the $_FILES superglobal
|
||||
*/
|
||||
protected function getUploadFile($tmpFileName = 'UploadFieldTest-testUpload.txt') {
|
||||
$tmpFilePath = TEMP_FOLDER . '/' . $tmpFileName;
|
||||
$tmpFileContent = '';
|
||||
for($i=0; $i<10000; $i++) $tmpFileContent .= '0';
|
||||
file_put_contents($tmpFilePath, $tmpFileContent);
|
||||
|
||||
// emulates the $_FILES array
|
||||
return array(
|
||||
'name' => $tmpFileName,
|
||||
'type' => 'text/plaintext',
|
||||
'size' => filesize($tmpFilePath),
|
||||
'tmp_name' => $tmpFilePath,
|
||||
'extension' => 'txt',
|
||||
'error' => UPLOAD_ERR_OK,
|
||||
);
|
||||
}
|
||||
|
||||
function setUp() {
|
||||
parent::setUp();
|
||||
|
||||
if(!file_exists(ASSETS_PATH)) mkdir(ASSETS_PATH);
|
||||
|
||||
/* Create a test folders for each of the fixture references */
|
||||
$folderIDs = $this->allFixtureIDs('Folder');
|
||||
foreach($folderIDs as $folderID) {
|
||||
$folder = DataObject::get_by_id('Folder', $folderID);
|
||||
if(!file_exists(BASE_PATH."/$folder->Filename")) mkdir(BASE_PATH."/$folder->Filename");
|
||||
}
|
||||
|
||||
/* Create a test files for each of the fixture references */
|
||||
$fileIDs = $this->allFixtureIDs('File');
|
||||
foreach($fileIDs as $fileID) {
|
||||
$file = DataObject::get_by_id('File', $fileID);
|
||||
$fh = fopen(BASE_PATH."/$file->Filename", "w");
|
||||
fwrite($fh, str_repeat('x',1000000));
|
||||
fclose($fh);
|
||||
}
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
parent::tearDown();
|
||||
|
||||
/* Remove the test files that we've created */
|
||||
$fileIDs = $this->allFixtureIDs('File');
|
||||
foreach($fileIDs as $fileID) {
|
||||
$file = DataObject::get_by_id('File', $fileID);
|
||||
if($file && file_exists(BASE_PATH."/$file->Filename")) unlink(BASE_PATH."/$file->Filename");
|
||||
}
|
||||
|
||||
/* Remove the test folders that we've crated */
|
||||
$folderIDs = $this->allFixtureIDs('Folder');
|
||||
foreach($folderIDs as $folderID) {
|
||||
$folder = DataObject::get_by_id('Folder', $folderID);
|
||||
if($folder && file_exists(BASE_PATH."/$folder->Filename")) Filesystem::removeFolder(BASE_PATH."/$folder->Filename");
|
||||
}
|
||||
|
||||
// Remove left over folders and any files that may exist
|
||||
if(file_exists('../assets/UploadFieldTest')) Filesystem::removeFolder('../assets/FileTest');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class UploadFieldTest_Record extends DataObject implements TestOnly {
|
||||
|
||||
static $db = array(
|
||||
'Title' => 'Text',
|
||||
);
|
||||
|
||||
static $has_one = array(
|
||||
'HasOneFile' => 'File',
|
||||
);
|
||||
|
||||
static $has_many = array(
|
||||
'HasManyFiles' => 'File',
|
||||
);
|
||||
|
||||
static $many_many = array(
|
||||
'ManyManyFiles' => 'File',
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
class UploadFieldTest_FileExtension extends DataExtension implements TestOnly {
|
||||
|
||||
function extraStatics() {
|
||||
return array(
|
||||
'has_one' => array('Record' => 'UploadFieldTest_Record')
|
||||
);
|
||||
}
|
||||
|
||||
function canDelete() {
|
||||
if($this->owner->Name == 'nodelete.txt') return false;
|
||||
}
|
||||
|
||||
function canEdit() {
|
||||
if($this->owner->Name == 'noedit.txt') return false;
|
||||
}
|
||||
|
||||
function canView() {
|
||||
if($this->owner->Name == 'noview.txt') return false;
|
||||
}
|
||||
}
|
||||
|
||||
class UploadFieldTest_Controller extends Controller implements TestOnly {
|
||||
|
||||
protected $template = 'BlankPage';
|
||||
|
||||
function Form() {
|
||||
$record = DataObject::get_one('UploadFieldTest_Record', '"Title" = \'Record 1\'');
|
||||
|
||||
$fieldNoRelation = new UploadField('NoRelationField');
|
||||
$fieldNoRelation->setFolderName('UploadFieldTest');
|
||||
$fieldNoRelation->setRecord($record);
|
||||
|
||||
$fieldHasOne = new UploadField('HasOneFile');
|
||||
$fieldHasOne->setFolderName('UploadFieldTest');
|
||||
$fieldHasOne->setRecord($record);
|
||||
|
||||
$fieldHasMany = new UploadField('HasManyFiles');
|
||||
$fieldHasMany->setFolderName('UploadFieldTest');
|
||||
$fieldHasMany->setRecord($record);
|
||||
|
||||
$fieldManyMany = new UploadField('ManyManyFiles');
|
||||
$fieldManyMany->setFolderName('UploadFieldTest');
|
||||
$fieldManyMany->setRecord($record);
|
||||
|
||||
$fieldReadonly = new UploadField('ReadonlyField');
|
||||
$fieldReadonly->setFolderName('UploadFieldTest');
|
||||
$fieldReadonly->setRecord($record);
|
||||
$fieldReadonly = $fieldReadonly->performReadonlyTransformation();
|
||||
|
||||
$fieldDisabled = new UploadField('DisabledField');
|
||||
$fieldDisabled->setFolderName('UploadFieldTest');
|
||||
$fieldDisabled->setRecord($record);
|
||||
$fieldDisabled = $fieldDisabled->performDisabledTransformation();
|
||||
|
||||
$form = new Form(
|
||||
$this,
|
||||
'Form',
|
||||
new FieldList(
|
||||
$fieldNoRelation,
|
||||
$fieldHasOne,
|
||||
$fieldHasMany,
|
||||
$fieldManyMany,
|
||||
$fieldReadonly,
|
||||
$fieldDisabled
|
||||
),
|
||||
new FieldList(
|
||||
new FormAction('submit')
|
||||
),
|
||||
new RequiredFields(
|
||||
'NoRelationField',
|
||||
'HasOneFile',
|
||||
'HasManyFiles',
|
||||
'ManyManyFiles',
|
||||
'ReadonlyField',
|
||||
'DisabledField'
|
||||
)
|
||||
);
|
||||
return $form;
|
||||
}
|
||||
|
||||
function submit($data, $form) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
Folder:
|
||||
folder1:
|
||||
Name: UploadFieldTest
|
||||
File:
|
||||
file1:
|
||||
Title: File1
|
||||
Filename: assets/UploadFieldTest/file1.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file2:
|
||||
Title: File2
|
||||
Filename: assets/UploadFieldTest/file2.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file3:
|
||||
Title: File3
|
||||
Filename: assets/UploadFieldTest/file3.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file4:
|
||||
Title: File4
|
||||
Filename: assets/UploadFieldTest/file4.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file5:
|
||||
Title: File5
|
||||
Filename: assets/UploadFieldTest/file5.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file-noview:
|
||||
Title: noview.txt
|
||||
Name: noview.txt
|
||||
Filename: assets/UploadFieldTest/noview.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file-noedit:
|
||||
Title: noedit.txt
|
||||
Name: noedit.txt
|
||||
Filename: assets/UploadFieldTest/noedit.txt
|
||||
ParentID: =>Folder.folder1
|
||||
file-nodelete:
|
||||
Title: nodelete.txt
|
||||
Name: nodelete.txt
|
||||
Filename: assets/UploadFieldTest/nodelete.txt
|
||||
ParentID: =>Folder.folder1
|
||||
UploadFieldTest_Record:
|
||||
record1:
|
||||
Title: Record 1
|
||||
HasOneFileID: =>File.file1
|
||||
HasManyFiles: =>File.file2,=>File.file3
|
||||
ManyManyFiles: =>File.file4,=>File.file5,=>File.file-noview,=>File.file-noedit,=>File.file-nodelete
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
repository_url: git://github.com/blueimp/JavaScript-Load-Image.git
|
||||
lock: false
|
||||
repository_class: Piston::Git::Repository
|
||||
format: 1
|
||||
handler:
|
||||
commit: 19c8e8cf0d4e854238c78174e593b607f04a1521
|
||||
branch: master
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
# JavaScript Load Image
|
||||
|
||||
## Demo
|
||||
[JavaScript Load Image Demo](http://blueimp.github.com/JavaScript-Load-Image/)
|
||||
|
||||
## Usage
|
||||
Include the (minified) JavaScript Load Image script in your HTML markup:
|
||||
|
||||
```html
|
||||
<script src="load-image.min.js"></script>
|
||||
```
|
||||
|
||||
In your application code, use the **loadImage()** function like this:
|
||||
|
||||
```js
|
||||
document.getElementById('file-input').onchange = function (e) {
|
||||
window.loadImage(
|
||||
e.target.files[0],
|
||||
function (img) {
|
||||
document.body.appendChild(img);
|
||||
},
|
||||
{maxWidth: 600}
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Requirements
|
||||
The JavaScript Load Image function has zero dependencies.
|
||||
|
||||
## API
|
||||
The **loadImage()** function accepts a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) object or a simple image URL (e.g. "http://example.org/image.png") as first argument.
|
||||
|
||||
If a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) is passed as parameter, it returns a HTML **img** element if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) API or a [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object if supported, or **false**.
|
||||
It always returns a HTML **img** element when passing an image URL:
|
||||
|
||||
```js
|
||||
document.getElementById('file-input').onchange = function (e) {
|
||||
var loadingImage = window.loadImage(
|
||||
e.target.files[0],
|
||||
function (img) {
|
||||
document.body.appendChild(img);
|
||||
},
|
||||
{maxWidth: 600}
|
||||
);
|
||||
if (!loadingImage) {
|
||||
// Alternative code ...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
The **img** element or [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object returned by the **loadImage()** function allows to abort the loading process by setting the **onload** and **onerror** event handlers to null:
|
||||
|
||||
```js
|
||||
document.getElementById('file-input').onchange = function (e) {
|
||||
var loadingImage = window.loadImage(
|
||||
e.target.files[0],
|
||||
function (img) {
|
||||
document.body.appendChild(img);
|
||||
},
|
||||
{maxWidth: 600}
|
||||
);
|
||||
loadingImage.onload = loadingImage.onerror = null;
|
||||
};
|
||||
```
|
||||
|
||||
The second argument must be a **callback** function, which is called when the image has been loaded or an error occurred while loading the image. The callback function is passed one argument, which is either a HTML **img** element, a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element, or an [Event](https://developer.mozilla.org/en/DOM/event) object of type "**error**":
|
||||
|
||||
```js
|
||||
var imageUrl = "http://example.org/image.png";
|
||||
window.loadImage(
|
||||
imageUrl,
|
||||
function (img) {
|
||||
if(img.type === "error") {
|
||||
console.log("Error loading image " + imageUrl);
|
||||
} else {
|
||||
document.body.appendChild(img);
|
||||
}
|
||||
},
|
||||
{maxWidth: 600}
|
||||
);
|
||||
```
|
||||
|
||||
The optional third argument is a map of options:
|
||||
|
||||
* **maxWidth**: Defines the maximum width of the img/canvas element.
|
||||
* **maxHeight**: Defines the maximum height of the img/canvas element.
|
||||
* **minWidth**: Defines the minimum width of the img/canvas element.
|
||||
* **minHeight**: Defines the minimum height of the img/canvas element.
|
||||
* **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element.
|
||||
|
||||
They can be used the following way:
|
||||
|
||||
```js
|
||||
window.loadImage(
|
||||
fileOrBlobOrUrl,
|
||||
function (img) {
|
||||
document.body.appendChild(img);
|
||||
},
|
||||
{
|
||||
maxWidth: 600,
|
||||
maxHeight: 300,
|
||||
minWidth: 100,
|
||||
minHeight: 50,
|
||||
canvas: true
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
All options are optional. By default, the image is returned as HTML **img** element without any image size restrictions.
|
||||
|
||||
## License
|
||||
The JavaScript Load Image script is released under the [MIT license](http://www.opensource.org/licenses/MIT).
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
/*
|
||||
* JavaScript Load Image 1.1.3
|
||||
* https://github.com/blueimp/JavaScript-Load-Image
|
||||
*
|
||||
* Copyright 2011, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/*jslint nomen: true */
|
||||
/*global window, document, URL, webkitURL, Blob, FileReader, define */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Loads an image for a given File object.
|
||||
// Invokes the callback with an img or optional canvas
|
||||
// element (if supported by the browser) as parameter:
|
||||
var loadImage = function (file, callback, options) {
|
||||
var img = document.createElement('img'),
|
||||
url,
|
||||
isFile;
|
||||
if (window.Blob && file instanceof Blob) {
|
||||
url = loadImage.createObjectURL(file);
|
||||
isFile = true;
|
||||
} else {
|
||||
url = file;
|
||||
}
|
||||
img.onerror = callback;
|
||||
img.onload = function () {
|
||||
if (isFile) {
|
||||
loadImage.revokeObjectURL(url);
|
||||
}
|
||||
callback(loadImage.scale(img, options));
|
||||
};
|
||||
if (url) {
|
||||
img.src = url;
|
||||
return img;
|
||||
} else {
|
||||
return loadImage.readFile(file, function (url) {
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
},
|
||||
urlAPI = (window.createObjectURL && window) ||
|
||||
(window.URL && URL) || (window.webkitURL && webkitURL);
|
||||
|
||||
// Scales the given image (img HTML element)
|
||||
// using the given options.
|
||||
// Returns a canvas object if the canvas option is true
|
||||
// and the browser supports canvas, else the scaled image:
|
||||
loadImage.scale = function (img, options) {
|
||||
options = options || {};
|
||||
var canvas = document.createElement('canvas'),
|
||||
scale = Math.max(
|
||||
(options.minWidth || img.width) / img.width,
|
||||
(options.minHeight || img.height) / img.height
|
||||
);
|
||||
if (scale > 1) {
|
||||
img.width = parseInt(img.width * scale, 10);
|
||||
img.height = parseInt(img.height * scale, 10);
|
||||
}
|
||||
scale = Math.min(
|
||||
(options.maxWidth || img.width) / img.width,
|
||||
(options.maxHeight || img.height) / img.height
|
||||
);
|
||||
if (scale < 1) {
|
||||
img.width = parseInt(img.width * scale, 10);
|
||||
img.height = parseInt(img.height * scale, 10);
|
||||
}
|
||||
if (!options.canvas || !canvas.getContext) {
|
||||
return img;
|
||||
}
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
canvas.getContext('2d')
|
||||
.drawImage(img, 0, 0, img.width, img.height);
|
||||
return canvas;
|
||||
};
|
||||
|
||||
loadImage.createObjectURL = function (file) {
|
||||
return urlAPI ? urlAPI.createObjectURL(file) : false;
|
||||
};
|
||||
|
||||
loadImage.revokeObjectURL = function (url) {
|
||||
return urlAPI ? urlAPI.revokeObjectURL(url) : false;
|
||||
};
|
||||
|
||||
// Loads a given File object via FileReader interface,
|
||||
// invokes the callback with a data url:
|
||||
loadImage.readFile = function (file, callback) {
|
||||
if (window.FileReader && FileReader.prototype.readAsDataURL) {
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onload = function (e) {
|
||||
callback(e.target.result);
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
return fileReader;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
if (typeof define !== 'undefined' && define.amd) {
|
||||
// Register as an AMD module:
|
||||
define('loadImage', function () {
|
||||
return loadImage;
|
||||
});
|
||||
} else {
|
||||
// Bind to the global (window) object:
|
||||
$.loadImage = loadImage;
|
||||
}
|
||||
}(this));
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
(function(h){var e=function(a,c,d){var b=document.createElement("img"),g,f;window.Blob&&a instanceof Blob?(g=e.createObjectURL(a),f=!0):g=a;b.onerror=c;b.onload=function(){f&&e.revokeObjectURL(g);c(e.scale(b,d))};return g?(b.src=g,b):e.readFile(a,function(a){b.src=a})},f=window.createObjectURL&&window||window.URL&&URL||window.webkitURL&&webkitURL;e.scale=function(a,c){var c=c||{},d=document.createElement("canvas"),b=Math.max((c.minWidth||a.width)/a.width,(c.minHeight||a.height)/a.height);if(1<b)a.width=
|
||||
parseInt(a.width*b,10),a.height=parseInt(a.height*b,10);b=Math.min((c.maxWidth||a.width)/a.width,(c.maxHeight||a.height)/a.height);if(1>b)a.width=parseInt(a.width*b,10),a.height=parseInt(a.height*b,10);if(!c.canvas||!d.getContext)return a;d.width=a.width;d.height=a.height;d.getContext("2d").drawImage(a,0,0,a.width,a.height);return d};e.createObjectURL=function(a){return f?f.createObjectURL(a):!1};e.revokeObjectURL=function(a){return f?f.revokeObjectURL(a):!1};e.readFile=function(a,c){if(window.FileReader&&
|
||||
FileReader.prototype.readAsDataURL){var d=new FileReader;d.onload=function(a){c(a.target.result)};d.readAsDataURL(a);return d}return!1};"undefined"!==typeof define&&define.amd?define("loadImage",function(){return e}):h.loadImage=e})(this);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "blueimp-load-image",
|
||||
"version": "1.1.3",
|
||||
"title": "JavaScript Load Image",
|
||||
"description": "JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"load",
|
||||
"loading",
|
||||
"image",
|
||||
"file",
|
||||
"blob",
|
||||
"url",
|
||||
"scale",
|
||||
"scaling",
|
||||
"img",
|
||||
"canvas"
|
||||
],
|
||||
"homepage": "https://github.com/blueimp/JavaScript-Load-Image",
|
||||
"author": {
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/blueimp/JavaScript-Load-Image.git"
|
||||
},
|
||||
"bugs": "https://github.com/blueimp/JavaScript-Load-Image/issues",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://www.opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"load-image.js"
|
||||
],
|
||||
"main": "load-image.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
repository_url: git://github.com/blueimp/JavaScript-Templates.git
|
||||
lock: false
|
||||
repository_class: Piston::Git::Repository
|
||||
format: 1
|
||||
handler:
|
||||
commit: ddb6a9c25c3a1089c22af6e8a431cefced39e31c
|
||||
branch: master
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
# JavaScript Templates
|
||||
|
||||
## Demo
|
||||
[JavaScript Templates Demo](http://blueimp.github.com/JavaScript-Templates/)
|
||||
|
||||
## Usage
|
||||
|
||||
### Client-side
|
||||
Include the (minified) JavaScript Templates script in your HTML markup:
|
||||
|
||||
```html
|
||||
<script src="tmpl.min.js"></script>
|
||||
```
|
||||
|
||||
Add a script section with type **"text/html"** and your template definition as content:
|
||||
|
||||
```html
|
||||
<script type="text/html" id="tmpl-demo">
|
||||
<h3>{%=o.title%}</h3>
|
||||
<p>Released under the
|
||||
<a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
|
||||
<h4>Features</h4>
|
||||
<ul>
|
||||
{% for (var i=0; i<o.features.length; i++) { %}
|
||||
<li>{%=o.features[i]%}</li>
|
||||
{% } %}
|
||||
</ul>
|
||||
</script>
|
||||
```
|
||||
|
||||
**"o"** (the lowercase letter) is a reference to the data parameter of the template function (see the API section on how to modify this identifier).
|
||||
|
||||
In your application code, create a JavaScript object to use as data for the template:
|
||||
|
||||
```js
|
||||
var data = {
|
||||
"title": "JavaScript Templates",
|
||||
"license": {
|
||||
"name": "MIT license",
|
||||
"url": "http://www.opensource.org/licenses/MIT"
|
||||
},
|
||||
"features": [
|
||||
"lightweight & fast",
|
||||
"powerful",
|
||||
"zero dependencies"
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
In a real application, this data could be the result of retrieving a [JSON](http://json.org/) resource.
|
||||
|
||||
Render the result by calling the **tmpl()** method with the id of the template and the data object as arguments:
|
||||
|
||||
```js
|
||||
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
|
||||
```
|
||||
|
||||
### Server-side
|
||||
|
||||
The following is an example how to use the JavaScript Templates engine on the server-side with [node.js](http://nodejs.org/).
|
||||
|
||||
Create a new directory and add the **tmpl.js** file. Or alternatively, install the **blueimp-tmpl** package with [npm](http://npmjs.org/):
|
||||
|
||||
```sh
|
||||
npm install blueimp-tmpl
|
||||
```
|
||||
|
||||
Add a file **template.html** with the following content:
|
||||
|
||||
```html
|
||||
<!DOCTYPE HTML>
|
||||
<title>{%=o.title%}</title>
|
||||
<h3><a href="{%=o.url%}">{%=o.title%}</a></h3>
|
||||
<h4>Features</h4>
|
||||
<ul>
|
||||
{% for (var i=0; i<o.features.length; i++) { %}
|
||||
<li>{%=o.features[i]%}</li>
|
||||
{% } %}
|
||||
</ul>
|
||||
```
|
||||
|
||||
Add a file **server.js** with the following content:
|
||||
|
||||
```js
|
||||
require("http").createServer(function (req, res) {
|
||||
var fs = require("fs"),
|
||||
// The tmpl module exports the tmpl() function:
|
||||
tmpl = require("./tmpl").tmpl,
|
||||
// Use the following version if you installed the package with npm:
|
||||
// tmpl = require("blueimp-tmpl").tmpl,
|
||||
// Sample data:
|
||||
data = {
|
||||
"title": "JavaScript Templates",
|
||||
"url": "https://github.com/blueimp/JavaScript-Templates",
|
||||
"features": [
|
||||
"lightweight & fast",
|
||||
"powerful",
|
||||
"zero dependencies"
|
||||
]
|
||||
};
|
||||
// Override the template loading method:
|
||||
tmpl.load = function (id) {
|
||||
var filename = id + ".html";
|
||||
console.log("Loading " + filename);
|
||||
return fs.readFileSync(filename, "utf8");
|
||||
};
|
||||
res.writeHead(200, {"Content-Type": "text/html"});
|
||||
// Render the content:
|
||||
res.end(tmpl("template", data));
|
||||
}).listen(8080, "localhost");
|
||||
console.log("Server running at http://localhost:8080/");
|
||||
```
|
||||
|
||||
Run the application with the following command:
|
||||
|
||||
```sh
|
||||
node server.js
|
||||
```
|
||||
|
||||
## Requirements
|
||||
The JavaScript Templates script has zero dependencies.
|
||||
|
||||
## API
|
||||
|
||||
### tmpl() function
|
||||
The **tmpl()** function is added to the global **window** object and can be called as global function:
|
||||
|
||||
```js
|
||||
var result = tmpl("tmpl-demo", data);
|
||||
```
|
||||
|
||||
The **tmpl()** function can be called with the id of a template, or with a template string:
|
||||
|
||||
```js
|
||||
var result = tmpl("<h3>{%=o.title%}</h3>", data);
|
||||
```
|
||||
|
||||
If called without second argument, **tmpl()** returns a reusable template function:
|
||||
|
||||
```js
|
||||
var func = tmpl("<h3>{%=o.title%}</h3>");
|
||||
document.getElementById("result").innerHTML = func(data);
|
||||
```
|
||||
|
||||
### Templates cache
|
||||
Templates loaded by id are cached in the map **tmpl.cache**, which can be modified:
|
||||
|
||||
```js
|
||||
var func = tmpl("tmpl-demo");
|
||||
var cached = typeof tmpl.cache["tmpl-demo"] === "function"; // true
|
||||
|
||||
tmpl.cache["tmpl-demo"] = tmpl("<h3>{%=o.title%}</h3>");
|
||||
var result = tmpl("tmpl-demo", {title: "JS"}); // Renders "<h3>JS</h3>"
|
||||
```
|
||||
|
||||
### Output encoding
|
||||
The method **tmpl.encode** is used to escape HTML special characters in template output:
|
||||
|
||||
```js
|
||||
var output = tmpl.encode("<>&\"\x00"); // Renders "<>&""
|
||||
```
|
||||
|
||||
**tmpl.encode** makes use of the regular expression **tmpl.encReg** and the encoding map **tmpl.encMap** to match and replace special characters, which can be modified to change the behavior of the output encoding:
|
||||
|
||||
```js
|
||||
// Add single quotes to the encoding rules:
|
||||
tmpl.encReg = /[<>&"'\x00]/g;
|
||||
tmpl.encMap["'"] = "'";
|
||||
|
||||
var output = tmpl.encode("<>&\"'\x00"); // Renders "<>&"'"
|
||||
```
|
||||
|
||||
### Local helper variables
|
||||
The local variables available inside the templates are the following:
|
||||
|
||||
* **o**: The data object given as parameter to the template function (see the next section on how to modify the parameter name).
|
||||
* **_s**: The string for the rendered result content.
|
||||
* **_t**: A reference to the **tmpl** function object.
|
||||
* **_e**: A reference to the **tmpl.encode** method.
|
||||
* **print**: Function to add content to the rendered result string.
|
||||
* **include**: Function to include the return value of a different template in the result.
|
||||
|
||||
To introduce additional local helper variables, the string **tmpl.helper** can be extended. The following adds a convenience function for *console.log* and a streaming function, that streams the template rendering result back to the callback argument (note the comma at the beginning of each variable declaration):
|
||||
|
||||
```js
|
||||
tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" +
|
||||
",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}";
|
||||
```
|
||||
|
||||
Those new helper functions could be used to stream the template contents to the console output:
|
||||
|
||||
```html
|
||||
<script type="text/html" id="tmpl-demo">
|
||||
<h3>{%=o.title%}</h3>
|
||||
{% stream(log); %}
|
||||
<p>Released under the
|
||||
<a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
|
||||
{% stream(log); %}
|
||||
<h4>Features</h4>
|
||||
<ul>
|
||||
{% stream(log); %}
|
||||
{% for (var i=0; i<o.features.length; i++) { %}
|
||||
<li>{%=o.features[i]%}</li>
|
||||
{% stream(log); %}
|
||||
{% } %}
|
||||
</ul>
|
||||
{% stream(log); %}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Template function argument
|
||||
The generated template functions accept one argument, which is the data object given to the **tmpl(id, data)** function. This argument is available inside the template definitions as parameter **o** (the lowercase letter).
|
||||
|
||||
The argument name can be modified by overriding **tmpl.arg**:
|
||||
|
||||
```js
|
||||
tmpl.arg = "p";
|
||||
|
||||
// Renders "<h3>JavaScript Templates</h3>":
|
||||
var result = tmpl("<h3>{%=p.title%}</h3>", {title: "JavaScript Templates"});
|
||||
```
|
||||
|
||||
### Template parsing
|
||||
The template contents are matched and replaced using the regular expression **tmpl.regexp** and the replacement function **tmpl.func**. The replacement function operates based on the [parenthesized submatch strings](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
|
||||
|
||||
To use different tags for the template syntax, override **tmpl.regexp** with a modified regular expression, by exchanging all occurrences of "**\\{%**" and "**%\\}**", e.g. with "**\\[%**" and "**%\\]**":
|
||||
|
||||
```js
|
||||
tmpl.regexp = /(\s+)|('|\\)(?![^%]*%\])|(?:\[%(=|#)(.+?)%\])|(\[%)|(%\])/g;
|
||||
```
|
||||
|
||||
## Templates syntax
|
||||
|
||||
### Interpolation
|
||||
Print variable with HTML special characters escaped:
|
||||
|
||||
```html
|
||||
<h3>{%=o.title%}</h3>
|
||||
```
|
||||
|
||||
Print variable without escaping:
|
||||
|
||||
```html
|
||||
<h3>{%#o.user_id%}</h3>
|
||||
```
|
||||
|
||||
Print output of function calls:
|
||||
|
||||
```html
|
||||
<a href="{%=encodeURI(o.url)%}">Website</a>
|
||||
```
|
||||
|
||||
Use dot notation to print nested properties:
|
||||
|
||||
```html
|
||||
<strong>{%=o.author.name%}</strong>
|
||||
```
|
||||
|
||||
Note that the JavaScript Templates engine prints **falsy** values as empty strings.
|
||||
That is, **undefined**, **null**, **false**, **0** and **NaN** will all be converted to **''**.
|
||||
To be able to print e.g. the number 0, convert it to a String before using it as an output variable:
|
||||
|
||||
```html
|
||||
<h3>{%=0+''%}</h3>
|
||||
```
|
||||
|
||||
### Evaluation
|
||||
Use **print(str)** to add escaped content to the output:
|
||||
|
||||
```html
|
||||
<span>Year: {% var d=new Date(); print(d.getFullYear()); %}</span>
|
||||
```
|
||||
|
||||
Use **print(str, true)** to add unescaped content to the output:
|
||||
|
||||
```html
|
||||
<span>{% print("Fast & powerful", true); %}</span>
|
||||
```
|
||||
|
||||
Use **include(str, obj)** to include content from a different template:
|
||||
|
||||
```html
|
||||
<div>
|
||||
{% include('tmpl-link', {name: "Website", url: "http://example.org"}); %}
|
||||
</div>
|
||||
```
|
||||
|
||||
If else condition:
|
||||
|
||||
```html
|
||||
{% if (o.author.url) { %}
|
||||
<a href="{%=encodeURI(o.author.url)%}">{%=o.author.name%}</a>
|
||||
{% } else { %}
|
||||
<em>No author url.</em>
|
||||
{% } %}
|
||||
```
|
||||
|
||||
For loop:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
{% for (var i=0; i<o.features.length; i++) { %}
|
||||
<li>{%=o.features[i]%}</li>
|
||||
{% } %}
|
||||
</ul>
|
||||
```
|
||||
|
||||
## License
|
||||
The JavaScript Templates script is released under the [MIT license](http://www.opensource.org/licenses/MIT).
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "blueimp-tmpl",
|
||||
"version": "1.0.2",
|
||||
"title": "JavaScript Templates",
|
||||
"description": "< 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"templates",
|
||||
"templating"
|
||||
],
|
||||
"homepage": "https://github.com/blueimp/JavaScript-Templates",
|
||||
"author": {
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/blueimp/JavaScript-Templates.git"
|
||||
},
|
||||
"bugs": "https://github.com/blueimp/JavaScript-Templates/issues",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://www.opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"test": "node ./test/test.js"
|
||||
},
|
||||
"files": [
|
||||
"tmpl.js"
|
||||
],
|
||||
"main": "tmpl.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
* JavaScript Templates 1.0.2
|
||||
* https://github.com/blueimp/JavaScript-Templates
|
||||
*
|
||||
* Copyright 2011, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Inspired by John Resig's JavaScript Micro-Templating:
|
||||
* http://ejohn.org/blog/javascript-micro-templating/
|
||||
*/
|
||||
|
||||
/*jslint evil: true, regexp: true */
|
||||
/*global document, define */
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
var tmpl = function (str, data) {
|
||||
var f = !/[^\-\w]/.test(str) ? tmpl.cache[str] = tmpl.cache[str] ||
|
||||
tmpl(tmpl.load(str)) :
|
||||
new Function(
|
||||
tmpl.arg,
|
||||
("var _s=''" + tmpl.helper + ";_s+='" +
|
||||
str.replace(tmpl.regexp, tmpl.func) +
|
||||
"';return _s;").split("_s+='';").join("")
|
||||
);
|
||||
f.tmpl = f.tmpl || tmpl;
|
||||
return data ? f(data) : f;
|
||||
};
|
||||
tmpl.cache = {};
|
||||
tmpl.load = function (id) {
|
||||
return document.getElementById(id).innerHTML;
|
||||
};
|
||||
tmpl.regexp = /(\s+)|('|\\)(?![^%]*%\})|(?:\{%(=|#)(.+?)%\})|(\{%)|(%\})/g;
|
||||
tmpl.func = function (s, p1, p2, p3, p4, p5, p6, o, str) {
|
||||
if (p1) { // whitespace
|
||||
return o && o + s.length !== str.length ? " " : "";
|
||||
}
|
||||
if (p2) { // single quote or backslash
|
||||
return "\\" + s;
|
||||
}
|
||||
if (p3) { // interpolation: {%=prop%}, or unescaped: {%#prop%}
|
||||
if (p3 === "=") {
|
||||
return "'+_e(" + p4 + ")+'";
|
||||
}
|
||||
return "'+(" + p4 + "||'')+'";
|
||||
}
|
||||
if (p5) { // evaluation start tag: {%
|
||||
return "';";
|
||||
}
|
||||
if (p6) { // evaluation end tag: %}
|
||||
return "_s+='";
|
||||
}
|
||||
};
|
||||
tmpl.encReg = /[<>&"\x00]/g;
|
||||
tmpl.encMap = {
|
||||
"<": "<",
|
||||
">": ">",
|
||||
"&": "&",
|
||||
"\"": """,
|
||||
"\x00": ""
|
||||
};
|
||||
tmpl.encode = function (s) {
|
||||
return String(s || "").replace(
|
||||
tmpl.encReg,
|
||||
function (c) {
|
||||
return tmpl.encMap[c];
|
||||
}
|
||||
);
|
||||
};
|
||||
tmpl.arg = "o";
|
||||
tmpl.helper = ",_t=arguments.callee.tmpl,_e=_t.encode" +
|
||||
",print=function(s,e){_s+=e&&(s||'')||_e(s);}" +
|
||||
",include=function(s,d){_s+=_t(s,d);}";
|
||||
if (typeof define === "function" && define.amd) {
|
||||
// Register as an AMD module:
|
||||
define("tmpl", function () {
|
||||
return tmpl;
|
||||
});
|
||||
} else {
|
||||
$.tmpl = tmpl;
|
||||
}
|
||||
}(this));
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
(function(e){var a=function(b,d){var c=!/[^\-\w]/.test(b)?a.cache[b]=a.cache[b]||a(a.load(b)):new Function(a.arg,("var _s=''"+a.helper+";_s+='"+b.replace(a.regexp,a.func)+"';return _s;").split("_s+='';").join(""));c.tmpl=c.tmpl||a;return d?c(d):c};a.cache={};a.load=function(a){return document.getElementById(a).innerHTML};a.regexp=/(\s+)|('|\\)(?![^%]*%\})|(?:\{%(=|#)(.+?)%\})|(\{%)|(%\})/g;a.func=function(a,d,c,f,g,e,i,h,j){if(d)return h&&h+a.length!==j.length?" ":"";if(c)return"\\"+a;if(f)return"="===
|
||||
f?"'+_e("+g+")+'":"'+("+g+"||'')+'";if(e)return"';";if(i)return"_s+='"};a.encReg=/[<>&"\x00]/g;a.encMap={"<":"<",">":">","&":"&",'"':""","\x00":""};a.encode=function(b){return(""+(b||"")).replace(a.encReg,function(b){return a.encMap[b]})};a.arg="o";a.helper=",_t=arguments.callee.tmpl,_e=_t.encode,print=function(s,e){_s+=e&&(s||'')||_e(s);},include=function(s,d){_s+=_t(s,d);}";"function"===typeof define&&define.amd?define("tmpl",function(){return a}):e.tmpl=a})(this);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
repository_url: git://github.com/blueimp/jQuery-File-Upload.git
|
||||
lock: false
|
||||
repository_class: Piston::Git::Repository
|
||||
format: 1
|
||||
handler:
|
||||
commit: 57f986dad16bb0da500ca2b025a595da0a2b8719
|
||||
branch: master
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
# jQuery File Upload Plugin
|
||||
|
||||
## Demo
|
||||
[Demo File Upload](http://blueimp.github.com/jQuery-File-Upload/)
|
||||
|
||||
## Setup instructions
|
||||
* [How to setup the plugin on your website](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup)
|
||||
* [How to use only the basic plugin (minimal setup guide).](https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin)
|
||||
|
||||
## Features
|
||||
* **Multiple file upload:**
|
||||
Allows to select multiple files at once and upload them simultaneously.
|
||||
* **Drag & Drop support:**
|
||||
Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
|
||||
* **Upload progress bar:**
|
||||
Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
|
||||
* **Cancelable uploads:**
|
||||
Individual file uploads can be canceled to stop the upload progress.
|
||||
* **Resumable uploads:**
|
||||
Aborted uploads can be resumed with browsers supporting the Blob API.
|
||||
* **Chunked uploads:**
|
||||
Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
|
||||
* **Preview images:**
|
||||
A preview of image files can be displayed before uploading with browsers supporting the required HTML5 APIs.
|
||||
* **No browser plugins (e.g. Adobe Flash) required:**
|
||||
The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
|
||||
* **Graceful fallback for legacy browsers:**
|
||||
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
|
||||
* **HTML file upload form fallback:**
|
||||
Shows a standard HTML file upload form if JavaScript is disabled.
|
||||
* **Cross-site file uploads:**
|
||||
Supports uploading files to a different domain with Cross-site XMLHttpRequests.
|
||||
* **Multiple plugin instances:**
|
||||
Allows to use multiple plugin instances on the same webpage.
|
||||
* **Customizable and extensible:**
|
||||
Provides an API to set individual options and define callBack methods for various upload events.
|
||||
* **Multipart and file contents stream uploads:**
|
||||
Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
|
||||
* **Compatible with any server-side application platform:**
|
||||
Works with Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.
|
||||
|
||||
## Requirements
|
||||
* [jQuery](http://jquery.com/) v. 1.6+
|
||||
* [jQuery UI widget factory](http://wiki.jqueryui.com/w/page/12138135/Widget%20factory) v. 1.8.16+
|
||||
* [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.iframe-transport.js) (included)
|
||||
* [JavaScript Load Image function](http://blueimp.github.com/JavaScript-Load-Image) v. 1.1.3+ (optional)
|
||||
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 1.0.2+ (optional)
|
||||
|
||||
The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies.
|
||||
The UI version of the File Upload plugin also requires the JavaScript Templates engine and the JavaScript Load Image function (for the upload image previews). These dependencies are marked as optional, as the basic File Upload plugin can be used without them and the UI version of the plugin can be extended to override these dependencies with alternative solutions.
|
||||
|
||||
The repository also includes the [jQuery XDomainRequest Transport Plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/jquery.xdr-transport.js), which is required for Cross-domain AJAX requests in Microsoft Internet Explorer >= 8. It is only included for the [Demo](http://blueimp.github.com/jQuery-File-Upload/), which makes use of Cross-domain DELETE requests (GET requests for IE) to delete uploaded files from the Demo File Upload service.
|
||||
|
||||
[Cross-domain File Uploads](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads) using the [Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.iframe-transport.js) require a redirect back to the origin server to retrieve the upload results. The example implementation makes use of [result.html](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/result.html) as redirect page. See also the example code in [application.js](https://github.com/blueimp/jQuery-File-Upload/blob/master/application.js) as well as the explanation of all [files in the repository](https://github.com/blueimp/jQuery-File-Upload/wiki/Plugin-files).
|
||||
|
||||
## Browser Support (tested versions)
|
||||
* Google Chrome - 7.0+
|
||||
* Apple Safari - 4.0+
|
||||
* Mozilla Firefox - 3.0+
|
||||
* Opera - 10.0+
|
||||
* Microsoft Internet Explorer 6.0+
|
||||
|
||||
Drag & Drop is only supported on Google Chrome, Firefox 4.0+ and Safari 5.0+.
|
||||
Microsoft Internet Explorer has no support for multiple file selection or upload progress.
|
||||
[Extended browser support information](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
|
||||
|
||||
## License
|
||||
Released under the [MIT license](http://www.opensource.org/licenses/MIT).
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
/*
|
||||
* jQuery postMessage Transport Plugin 1.0
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2011, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/*jslint unparam: true, nomen: true */
|
||||
/*global jQuery, window, document */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
var counter = 0,
|
||||
names = [
|
||||
'accepts',
|
||||
'cache',
|
||||
'contents',
|
||||
'contentType',
|
||||
'crossDomain',
|
||||
'data',
|
||||
'dataType',
|
||||
'headers',
|
||||
'ifModified',
|
||||
'mimeType',
|
||||
'password',
|
||||
'processData',
|
||||
'timeout',
|
||||
'traditional',
|
||||
'type',
|
||||
'url',
|
||||
'username'
|
||||
],
|
||||
convert = function (p) {
|
||||
return p;
|
||||
};
|
||||
|
||||
$.ajaxSetup({
|
||||
converters: {
|
||||
'postmessage text': convert,
|
||||
'postmessage json': convert,
|
||||
'postmessage html': convert
|
||||
}
|
||||
});
|
||||
|
||||
$.ajaxTransport('postmessage', function (options) {
|
||||
if (options.postMessage && window.postMessage) {
|
||||
var iframe,
|
||||
loc = $('<a>').prop('href', options.postMessage)[0],
|
||||
target = loc.protocol + '//' + loc.host,
|
||||
xhrUpload = options.xhr().upload;
|
||||
return {
|
||||
send: function (_, completeCallback) {
|
||||
var message = {
|
||||
id: 'postmessage-transport-' + (counter += 1)
|
||||
},
|
||||
eventName = 'message.' + message.id;
|
||||
iframe = $(
|
||||
'<iframe style="display:none;" src="' +
|
||||
options.postMessage + '" name="' +
|
||||
message.id + '"></iframe>'
|
||||
).bind('load', function () {
|
||||
$.each(names, function (i, name) {
|
||||
message[name] = options[name];
|
||||
});
|
||||
message.dataType = message.dataType.replace('postmessage ', '');
|
||||
$(window).bind(eventName, function (e) {
|
||||
e = e.originalEvent;
|
||||
var data = e.data,
|
||||
ev;
|
||||
if (e.origin === target && data.id === message.id) {
|
||||
if (data.type === 'progress') {
|
||||
ev = document.createEvent('Event');
|
||||
ev.initEvent(data.type, false, true);
|
||||
$.extend(ev, data);
|
||||
xhrUpload.dispatchEvent(ev);
|
||||
} else {
|
||||
completeCallback(
|
||||
data.status,
|
||||
data.statusText,
|
||||
{postmessage: data.result},
|
||||
data.headers
|
||||
);
|
||||
iframe.remove();
|
||||
$(window).unbind(eventName);
|
||||
}
|
||||
}
|
||||
});
|
||||
iframe[0].contentWindow.postMessage(
|
||||
message,
|
||||
target
|
||||
);
|
||||
}).appendTo(document.body);
|
||||
},
|
||||
abort: function () {
|
||||
if (iframe) {
|
||||
iframe.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* jQuery XDomainRequest Transport Plugin 1.0.2
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2011, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Based on Julian Aubourg's ajaxHooks xdr.js:
|
||||
* https://github.com/jaubourg/ajaxHooks/
|
||||
*/
|
||||
|
||||
/*jslint unparam: true */
|
||||
/*global jQuery, window, XDomainRequest */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
if (window.XDomainRequest) {
|
||||
$.ajaxTransport(function (s) {
|
||||
if (s.crossDomain && s.async) {
|
||||
if (s.timeout) {
|
||||
s.xdrTimeout = s.timeout;
|
||||
delete s.timeout;
|
||||
}
|
||||
var xdr;
|
||||
return {
|
||||
send: function (headers, completeCallback) {
|
||||
function callback(status, statusText, responses, responseHeaders) {
|
||||
xdr.onload = xdr.onerror = xdr.ontimeout = jQuery.noop;
|
||||
xdr = null;
|
||||
completeCallback(status, statusText, responses, responseHeaders);
|
||||
}
|
||||
xdr = new XDomainRequest();
|
||||
// XDomainRequest only supports GET and POST:
|
||||
if (s.type === 'DELETE') {
|
||||
s.url = s.url + (/\?/.test(s.url) ? '&' : '?') +
|
||||
'_method=DELETE';
|
||||
s.type = 'POST';
|
||||
} else if (s.type === 'PUT') {
|
||||
s.url = s.url + (/\?/.test(s.url) ? '&' : '?') +
|
||||
'_method=PUT';
|
||||
s.type = 'POST';
|
||||
}
|
||||
xdr.open(s.type, s.url);
|
||||
xdr.onload = function () {
|
||||
callback(
|
||||
200,
|
||||
'OK',
|
||||
{text: xdr.responseText},
|
||||
'Content-Type: ' + xdr.contentType
|
||||
);
|
||||
};
|
||||
xdr.onerror = function () {
|
||||
callback(404, 'Not Found');
|
||||
};
|
||||
if (s.xdrTimeout) {
|
||||
xdr.ontimeout = function () {
|
||||
callback(0, 'timeout');
|
||||
};
|
||||
xdr.timeout = s.xdrTimeout;
|
||||
}
|
||||
xdr.send((s.hasContent && s.data) || null);
|
||||
},
|
||||
abort: function () {
|
||||
if (xdr) {
|
||||
xdr.onerror = jQuery.noop();
|
||||
xdr.abort();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,538 @@
|
|||
/*
|
||||
* jQuery File Upload User Interface Plugin 6.0.3
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2010, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/*jslint nomen: true, unparam: true, regexp: true */
|
||||
/*global window, document, URL, webkitURL, FileReader, jQuery */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// The UI version extends the basic fileupload widget and adds
|
||||
// a complete user interface based on the given upload/download
|
||||
// templates.
|
||||
$.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
|
||||
|
||||
options: {
|
||||
// By default, files added to the widget are uploaded as soon
|
||||
// as the user clicks on the start buttons. To enable automatic
|
||||
// uploads, set the following option to true:
|
||||
autoUpload: false,
|
||||
// The following option limits the number of files that are
|
||||
// allowed to be uploaded using this widget:
|
||||
maxNumberOfFiles: undefined,
|
||||
// The maximum allowed file size:
|
||||
maxFileSize: undefined,
|
||||
// The minimum allowed file size:
|
||||
minFileSize: 1,
|
||||
// The regular expression for allowed file types, matches
|
||||
// against either file type or file name:
|
||||
acceptFileTypes: /.+$/i,
|
||||
// The regular expression to define for which files a preview
|
||||
// image is shown, matched against the file type:
|
||||
previewFileTypes: /^image\/(gif|jpeg|png)$/,
|
||||
// The maximum file size for preview images:
|
||||
previewMaxFileSize: 5000000, // 5MB
|
||||
// The maximum width of the preview images:
|
||||
previewMaxWidth: 80,
|
||||
// The maximum height of the preview images:
|
||||
previewMaxHeight: 80,
|
||||
// By default, preview images are displayed as canvas elements
|
||||
// if supported by the browser. Set the following option to false
|
||||
// to always display preview images as img elements:
|
||||
previewAsCanvas: true,
|
||||
// The expected data type of the upload response, sets the dataType
|
||||
// option of the $.ajax upload requests:
|
||||
dataType: 'json',
|
||||
|
||||
// The add callback is invoked as soon as files are added to the fileupload
|
||||
// widget (via file input selection, drag & drop or add API call).
|
||||
// See the basic file upload widget for more information:
|
||||
add: function (e, data) {
|
||||
var that = $(this).data('fileupload'),
|
||||
files = data.files;
|
||||
that._adjustMaxNumberOfFiles(-files.length);
|
||||
data.isAdjusted = true;
|
||||
data.files.valid = data.isValidated = that._validate(files);
|
||||
data.context = that._renderUpload(files)
|
||||
.appendTo(that._files)
|
||||
.data('data', data);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition && data.context[0].offsetWidth;
|
||||
data.context.addClass('in');
|
||||
if ((that.options.autoUpload || data.autoUpload) &&
|
||||
data.isValidated) {
|
||||
data.submit();
|
||||
}
|
||||
},
|
||||
// Callback for the start of each file upload request:
|
||||
send: function (e, data) {
|
||||
if (!data.isValidated) {
|
||||
var that = $(this).data('fileupload');
|
||||
if (!data.isAdjusted) {
|
||||
that._adjustMaxNumberOfFiles(-data.files.length);
|
||||
}
|
||||
if (!that._validate(data.files)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (data.context && data.dataType &&
|
||||
data.dataType.substr(0, 6) === 'iframe') {
|
||||
// Iframe Transport does not support progress events.
|
||||
// In lack of an indeterminate progress bar, we set
|
||||
// the progress to 100%, showing the full animated bar:
|
||||
data.context.find('.progressbar div').css(
|
||||
'width',
|
||||
parseInt(100, 10) + '%'
|
||||
);
|
||||
}
|
||||
},
|
||||
// Callback for successful uploads:
|
||||
done: function (e, data) {
|
||||
var that = $(this).data('fileupload'),
|
||||
template,
|
||||
preview;
|
||||
if (data.context) {
|
||||
data.context.each(function (index) {
|
||||
var file = ($.isArray(data.result) &&
|
||||
data.result[index]) || {error: 'emptyResult'};
|
||||
if (file.error) {
|
||||
that._adjustMaxNumberOfFiles(1);
|
||||
}
|
||||
that._transitionCallback(
|
||||
$(this).removeClass('in'),
|
||||
function (node) {
|
||||
template = that._renderDownload([file]);
|
||||
preview = node
|
||||
.find('.preview img, .preview canvas');
|
||||
if (preview.length) {
|
||||
template.find('.preview img')
|
||||
.prop('width', preview.prop('width'))
|
||||
.prop('height', preview.prop('height'));
|
||||
}
|
||||
template
|
||||
.replaceAll(node);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition &&
|
||||
template[0].offsetWidth;
|
||||
template.addClass('in');
|
||||
}
|
||||
);
|
||||
});
|
||||
} else {
|
||||
template = that._renderDownload(data.result)
|
||||
.appendTo(that._files);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition && template[0].offsetWidth;
|
||||
template.addClass('in');
|
||||
}
|
||||
},
|
||||
// Callback for failed (abort or error) uploads:
|
||||
fail: function (e, data) {
|
||||
var that = $(this).data('fileupload'),
|
||||
template;
|
||||
that._adjustMaxNumberOfFiles(data.files.length);
|
||||
if (data.context) {
|
||||
data.context.each(function (index) {
|
||||
if (data.errorThrown !== 'abort') {
|
||||
var file = data.files[index];
|
||||
file.error = file.error || data.errorThrown ||
|
||||
true;
|
||||
that._transitionCallback(
|
||||
$(this).removeClass('in'),
|
||||
function (node) {
|
||||
template = that._renderDownload([file])
|
||||
.replaceAll(node);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition &&
|
||||
template[0].offsetWidth;
|
||||
template.addClass('in');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
that._transitionCallback(
|
||||
$(this).removeClass('in'),
|
||||
function (node) {
|
||||
node.remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
} else if (data.errorThrown !== 'abort') {
|
||||
that._adjustMaxNumberOfFiles(-data.files.length);
|
||||
data.context = that._renderUpload(data.files)
|
||||
.appendTo(that._files)
|
||||
.data('data', data);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition && data.context[0].offsetWidth;
|
||||
data.context.addClass('in');
|
||||
}
|
||||
},
|
||||
// Callback for upload progress events:
|
||||
progress: function (e, data) {
|
||||
if (data.context) {
|
||||
data.context.find('.progressbar div').css(
|
||||
'width',
|
||||
parseInt(data.loaded / data.total * 100, 10) + '%'
|
||||
);
|
||||
}
|
||||
},
|
||||
// Callback for global upload progress events:
|
||||
progressall: function (e, data) {
|
||||
$(this).find('.fileupload-progressbar div').css(
|
||||
'width',
|
||||
parseInt(data.loaded / data.total * 100, 10) + '%'
|
||||
);
|
||||
},
|
||||
// Callback for uploads start, equivalent to the global ajaxStart event:
|
||||
start: function () {
|
||||
$(this).find('.fileupload-progressbar')
|
||||
.addClass('in').find('div').css('width', '0%');
|
||||
},
|
||||
// Callback for uploads stop, equivalent to the global ajaxStop event:
|
||||
stop: function () {
|
||||
$(this).find('.fileupload-progressbar')
|
||||
.removeClass('in').find('div').css('width', '0%');
|
||||
},
|
||||
// Callback for file deletion:
|
||||
destroy: function (e, data) {
|
||||
var that = $(this).data('fileupload');
|
||||
if (data.url) {
|
||||
$.ajax(data);
|
||||
}
|
||||
that._adjustMaxNumberOfFiles(1);
|
||||
that._transitionCallback(
|
||||
data.context.removeClass('in'),
|
||||
function (node) {
|
||||
node.remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
// Link handler, that allows to download files
|
||||
// by drag & drop of the links to the desktop:
|
||||
_enableDragToDesktop: function () {
|
||||
var link = $(this),
|
||||
url = link.prop('href'),
|
||||
name = decodeURIComponent(url.split('/').pop())
|
||||
.replace(/:/g, '-'),
|
||||
type = 'application/octet-stream';
|
||||
link.bind('dragstart', function (e) {
|
||||
try {
|
||||
e.originalEvent.dataTransfer.setData(
|
||||
'DownloadURL',
|
||||
[type, name, url].join(':')
|
||||
);
|
||||
} catch (err) {}
|
||||
});
|
||||
},
|
||||
|
||||
_adjustMaxNumberOfFiles: function (operand) {
|
||||
if (typeof this.options.maxNumberOfFiles === 'number') {
|
||||
this.options.maxNumberOfFiles += operand;
|
||||
if (this.options.maxNumberOfFiles < 1) {
|
||||
this._disableFileInputButton();
|
||||
} else {
|
||||
this._enableFileInputButton();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_formatFileSize: function (bytes) {
|
||||
if (typeof bytes !== 'number') {
|
||||
return '';
|
||||
}
|
||||
if (bytes >= 1000000000) {
|
||||
return (bytes / 1000000000).toFixed(2) + ' GB';
|
||||
}
|
||||
if (bytes >= 1000000) {
|
||||
return (bytes / 1000000).toFixed(2) + ' MB';
|
||||
}
|
||||
return (bytes / 1000).toFixed(2) + ' KB';
|
||||
},
|
||||
|
||||
_hasError: function (file) {
|
||||
if (file.error) {
|
||||
return file.error;
|
||||
}
|
||||
// The number of added files is subtracted from
|
||||
// maxNumberOfFiles before validation, so we check if
|
||||
// maxNumberOfFiles is below 0 (instead of below 1):
|
||||
if (this.options.maxNumberOfFiles < 0) {
|
||||
return 'maxNumberOfFiles';
|
||||
}
|
||||
// Files are accepted if either the file type or the file name
|
||||
// matches against the acceptFileTypes regular expression, as
|
||||
// only browsers with support for the File API report the type:
|
||||
if (!(this.options.acceptFileTypes.test(file.type) ||
|
||||
this.options.acceptFileTypes.test(file.name))) {
|
||||
return 'acceptFileTypes';
|
||||
}
|
||||
if (this.options.maxFileSize &&
|
||||
file.size > this.options.maxFileSize) {
|
||||
return 'maxFileSize';
|
||||
}
|
||||
if (typeof file.size === 'number' &&
|
||||
file.size < this.options.minFileSize) {
|
||||
return 'minFileSize';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
_validate: function (files) {
|
||||
var that = this,
|
||||
valid = !!files.length;
|
||||
$.each(files, function (index, file) {
|
||||
file.error = that._hasError(file);
|
||||
if (file.error) {
|
||||
valid = false;
|
||||
}
|
||||
});
|
||||
return valid;
|
||||
},
|
||||
|
||||
_renderTemplate: function (func, files) {
|
||||
return $(this.options.templateContainer).html(func({
|
||||
files: files,
|
||||
formatFileSize: this._formatFileSize,
|
||||
options: this.options
|
||||
})).children();
|
||||
},
|
||||
|
||||
_renderUpload: function (files) {
|
||||
var that = this,
|
||||
options = this.options,
|
||||
nodes = this._renderTemplate(options.uploadTemplate, files);
|
||||
nodes.find('.preview span').each(function (index, node) {
|
||||
var file = files[index];
|
||||
if (options.previewFileTypes.test(file.type) &&
|
||||
(!options.previewMaxFileSize ||
|
||||
file.size < options.previewMaxFileSize)) {
|
||||
window.loadImage(
|
||||
files[index],
|
||||
function (img) {
|
||||
$(node).append(img);
|
||||
// Force reflow:
|
||||
that._reflow = that._transition &&
|
||||
node.offsetWidth;
|
||||
$(node).addClass('in');
|
||||
},
|
||||
{
|
||||
maxWidth: options.previewMaxWidth,
|
||||
maxHeight: options.previewMaxHeight,
|
||||
canvas: options.previewAsCanvas
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
return nodes;
|
||||
},
|
||||
|
||||
_renderDownload: function (files) {
|
||||
var nodes = this._renderTemplate(
|
||||
this.options.downloadTemplate,
|
||||
files
|
||||
);
|
||||
nodes.find('a').each(this._enableDragToDesktop);
|
||||
return nodes;
|
||||
},
|
||||
|
||||
_startHandler: function (e) {
|
||||
e.preventDefault();
|
||||
var button = $(this),
|
||||
tmpl = button.closest('.template-upload'),
|
||||
data = tmpl.data('data');
|
||||
if (data && data.submit && !data.jqXHR && data.submit()) {
|
||||
button.prop('disabled', true);
|
||||
}
|
||||
},
|
||||
|
||||
_cancelHandler: function (e) {
|
||||
e.preventDefault();
|
||||
var tmpl = $(this).closest('.template-upload'),
|
||||
data = tmpl.data('data') || {};
|
||||
if (!data.jqXHR) {
|
||||
data.errorThrown = 'abort';
|
||||
e.data.fileupload._trigger('fail', e, data);
|
||||
} else {
|
||||
data.jqXHR.abort();
|
||||
}
|
||||
},
|
||||
|
||||
_deleteHandler: function (e) {
|
||||
e.preventDefault();
|
||||
var button = $(this);
|
||||
e.data.fileupload._trigger('destroy', e, {
|
||||
context: button.closest('.template-download'),
|
||||
url: button.attr('data-url'),
|
||||
type: button.attr('data-type'),
|
||||
dataType: e.data.fileupload.options.dataType
|
||||
});
|
||||
},
|
||||
|
||||
_transitionCallback: function (node, callback) {
|
||||
var that = this;
|
||||
if (this._transition && node.hasClass('fade')) {
|
||||
node.bind(
|
||||
this._transitionEnd,
|
||||
function (e) {
|
||||
// Make sure we don't respond to other transitions events
|
||||
// in the container element, e.g. from button elements:
|
||||
if (e.target === node[0]) {
|
||||
node.unbind(that._transitionEnd);
|
||||
callback.call(that, node);
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
callback.call(this, node);
|
||||
}
|
||||
},
|
||||
|
||||
_initTransitionSupport: function () {
|
||||
var that = this,
|
||||
style = (document.body || document.documentElement).style,
|
||||
suffix = '.' + that.options.namespace;
|
||||
that._transition = style.transition !== undefined ||
|
||||
style.WebkitTransition !== undefined ||
|
||||
style.MozTransition !== undefined ||
|
||||
style.MsTransition !== undefined ||
|
||||
style.OTransition !== undefined;
|
||||
if (that._transition) {
|
||||
that._transitionEnd = [
|
||||
'MSTransitionEnd',
|
||||
'webkitTransitionEnd',
|
||||
'transitionend',
|
||||
'oTransitionEnd'
|
||||
].join(suffix + ' ') + suffix;
|
||||
}
|
||||
},
|
||||
|
||||
_initButtonBarEventHandlers: function () {
|
||||
var fileUploadButtonBar = this.element.find('.fileupload-buttonbar'),
|
||||
filesList = this._files,
|
||||
ns = this.options.namespace;
|
||||
fileUploadButtonBar.find('.start')
|
||||
.bind('click.' + ns, function (e) {
|
||||
e.preventDefault();
|
||||
filesList.find('.start button').click();
|
||||
});
|
||||
fileUploadButtonBar.find('.cancel')
|
||||
.bind('click.' + ns, function (e) {
|
||||
e.preventDefault();
|
||||
filesList.find('.cancel button').click();
|
||||
});
|
||||
fileUploadButtonBar.find('.delete')
|
||||
.bind('click.' + ns, function (e) {
|
||||
e.preventDefault();
|
||||
filesList.find('.delete input:checked')
|
||||
.siblings('button').click();
|
||||
});
|
||||
fileUploadButtonBar.find('.toggle')
|
||||
.bind('change.' + ns, function (e) {
|
||||
filesList.find('.delete input').prop(
|
||||
'checked',
|
||||
$(this).is(':checked')
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
_destroyButtonBarEventHandlers: function () {
|
||||
this.element.find('.fileupload-buttonbar button')
|
||||
.unbind('click.' + this.options.namespace);
|
||||
this.element.find('.fileupload-buttonbar .toggle')
|
||||
.unbind('change.' + this.options.namespace);
|
||||
},
|
||||
|
||||
_initEventHandlers: function () {
|
||||
$.blueimp.fileupload.prototype._initEventHandlers.call(this);
|
||||
var eventData = {fileupload: this};
|
||||
this._files
|
||||
.delegate(
|
||||
'.start button',
|
||||
'click.' + this.options.namespace,
|
||||
eventData,
|
||||
this._startHandler
|
||||
)
|
||||
.delegate(
|
||||
'.cancel button',
|
||||
'click.' + this.options.namespace,
|
||||
eventData,
|
||||
this._cancelHandler
|
||||
)
|
||||
.delegate(
|
||||
'.delete button',
|
||||
'click.' + this.options.namespace,
|
||||
eventData,
|
||||
this._deleteHandler
|
||||
);
|
||||
this._initButtonBarEventHandlers();
|
||||
this._initTransitionSupport();
|
||||
},
|
||||
|
||||
_destroyEventHandlers: function () {
|
||||
this._destroyButtonBarEventHandlers();
|
||||
this._files
|
||||
.undelegate('.start button', 'click.' + this.options.namespace)
|
||||
.undelegate('.cancel button', 'click.' + this.options.namespace)
|
||||
.undelegate('.delete button', 'click.' + this.options.namespace);
|
||||
$.blueimp.fileupload.prototype._destroyEventHandlers.call(this);
|
||||
},
|
||||
|
||||
_enableFileInputButton: function () {
|
||||
this.element.find('.fileinput-button input')
|
||||
.prop('disabled', false)
|
||||
.parent().removeClass('disabled');
|
||||
},
|
||||
|
||||
_disableFileInputButton: function () {
|
||||
this.element.find('.fileinput-button input')
|
||||
.prop('disabled', true)
|
||||
.parent().addClass('disabled');
|
||||
},
|
||||
|
||||
_initTemplates: function () {
|
||||
this.options.templateContainer = document.createElement(
|
||||
this._files.prop('nodeName')
|
||||
);
|
||||
this.options.uploadTemplate = window.tmpl('template-upload');
|
||||
this.options.downloadTemplate = window.tmpl('template-download');
|
||||
},
|
||||
|
||||
_initFiles: function () {
|
||||
this._files = this.element.find('.files');
|
||||
},
|
||||
|
||||
_create: function () {
|
||||
this._initFiles();
|
||||
$.blueimp.fileupload.prototype._create.call(this);
|
||||
this._initTemplates();
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
$.blueimp.fileupload.prototype.destroy.call(this);
|
||||
},
|
||||
|
||||
enable: function () {
|
||||
$.blueimp.fileupload.prototype.enable.call(this);
|
||||
this.element.find('input, button').prop('disabled', false);
|
||||
this._enableFileInputButton();
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this.element.find('input, button').prop('disabled', true);
|
||||
this._disableFileInputButton();
|
||||
$.blueimp.fileupload.prototype.disable.call(this);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,831 @@
|
|||
/*
|
||||
* jQuery File Upload Plugin 5.5.4
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2010, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/*jslint nomen: true, unparam: true, regexp: true */
|
||||
/*global document, XMLHttpRequestUpload, Blob, File, FormData, location, jQuery */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// The fileupload widget listens for change events on file input fields defined
|
||||
// via fileInput setting and paste or drop events of the given dropZone.
|
||||
// In addition to the default jQuery Widget methods, the fileupload widget
|
||||
// exposes the "add" and "send" methods, to add or directly send files using
|
||||
// the fileupload API.
|
||||
// By default, files added via file input selection, paste, drag & drop or
|
||||
// "add" method are uploaded immediately, but it is possible to override
|
||||
// the "add" callback option to queue file uploads.
|
||||
$.widget('blueimp.fileupload', {
|
||||
|
||||
options: {
|
||||
// The namespace used for event handler binding on the dropZone and
|
||||
// fileInput collections.
|
||||
// If not set, the name of the widget ("fileupload") is used.
|
||||
namespace: undefined,
|
||||
// The drop target collection, by the default the complete document.
|
||||
// Set to null or an empty collection to disable drag & drop support:
|
||||
dropZone: $(document),
|
||||
// The file input field collection, that is listened for change events.
|
||||
// If undefined, it is set to the file input fields inside
|
||||
// of the widget element on plugin initialization.
|
||||
// Set to null or an empty collection to disable the change listener.
|
||||
fileInput: undefined,
|
||||
// By default, the file input field is replaced with a clone after
|
||||
// each input field change event. This is required for iframe transport
|
||||
// queues and allows change events to be fired for the same file
|
||||
// selection, but can be disabled by setting the following option to false:
|
||||
replaceFileInput: true,
|
||||
// The parameter name for the file form data (the request argument name).
|
||||
// If undefined or empty, the name property of the file input field is
|
||||
// used, or "files[]" if the file input name property is also empty:
|
||||
paramName: undefined,
|
||||
// By default, each file of a selection is uploaded using an individual
|
||||
// request for XHR type uploads. Set to false to upload file
|
||||
// selections in one request each:
|
||||
singleFileUploads: true,
|
||||
// To limit the number of files uploaded with one XHR request,
|
||||
// set the following option to an integer greater than 0:
|
||||
limitMultiFileUploads: undefined,
|
||||
// Set the following option to true to issue all file upload requests
|
||||
// in a sequential order:
|
||||
sequentialUploads: false,
|
||||
// To limit the number of concurrent uploads,
|
||||
// set the following option to an integer greater than 0:
|
||||
limitConcurrentUploads: undefined,
|
||||
// Set the following option to true to force iframe transport uploads:
|
||||
forceIframeTransport: false,
|
||||
// Set the following option to the location of a postMessage window,
|
||||
// to enable postMessage transport uploads:
|
||||
postMessage: undefined,
|
||||
// By default, XHR file uploads are sent as multipart/form-data.
|
||||
// The iframe transport is always using multipart/form-data.
|
||||
// Set to false to enable non-multipart XHR uploads:
|
||||
multipart: true,
|
||||
// To upload large files in smaller chunks, set the following option
|
||||
// to a preferred maximum chunk size. If set to 0, null or undefined,
|
||||
// or the browser does not support the required Blob API, files will
|
||||
// be uploaded as a whole.
|
||||
maxChunkSize: undefined,
|
||||
// When a non-multipart upload or a chunked multipart upload has been
|
||||
// aborted, this option can be used to resume the upload by setting
|
||||
// it to the size of the already uploaded bytes. This option is most
|
||||
// useful when modifying the options object inside of the "add" or
|
||||
// "send" callbacks, as the options are cloned for each file upload.
|
||||
uploadedBytes: undefined,
|
||||
// By default, failed (abort or error) file uploads are removed from the
|
||||
// global progress calculation. Set the following option to false to
|
||||
// prevent recalculating the global progress data:
|
||||
recalculateProgress: true,
|
||||
|
||||
// Additional form data to be sent along with the file uploads can be set
|
||||
// using this option, which accepts an array of objects with name and
|
||||
// value properties, a function returning such an array, a FormData
|
||||
// object (for XHR file uploads), or a simple object.
|
||||
// The form of the first fileInput is given as parameter to the function:
|
||||
formData: function (form) {
|
||||
return form.serializeArray();
|
||||
},
|
||||
|
||||
// The add callback is invoked as soon as files are added to the fileupload
|
||||
// widget (via file input selection, drag & drop, paste or add API call).
|
||||
// If the singleFileUploads option is enabled, this callback will be
|
||||
// called once for each file in the selection for XHR file uplaods, else
|
||||
// once for each file selection.
|
||||
// The upload starts when the submit method is invoked on the data parameter.
|
||||
// The data object contains a files property holding the added files
|
||||
// and allows to override plugin options as well as define ajax settings.
|
||||
// Listeners for this callback can also be bound the following way:
|
||||
// .bind('fileuploadadd', func);
|
||||
// data.submit() returns a Promise object and allows to attach additional
|
||||
// handlers using jQuery's Deferred callbacks:
|
||||
// data.submit().done(func).fail(func).always(func);
|
||||
add: function (e, data) {
|
||||
data.submit();
|
||||
},
|
||||
|
||||
// Other callbacks:
|
||||
// Callback for the submit event of each file upload:
|
||||
// submit: function (e, data) {}, // .bind('fileuploadsubmit', func);
|
||||
// Callback for the start of each file upload request:
|
||||
// send: function (e, data) {}, // .bind('fileuploadsend', func);
|
||||
// Callback for successful uploads:
|
||||
// done: function (e, data) {}, // .bind('fileuploaddone', func);
|
||||
// Callback for failed (abort or error) uploads:
|
||||
// fail: function (e, data) {}, // .bind('fileuploadfail', func);
|
||||
// Callback for completed (success, abort or error) requests:
|
||||
// always: function (e, data) {}, // .bind('fileuploadalways', func);
|
||||
// Callback for upload progress events:
|
||||
// progress: function (e, data) {}, // .bind('fileuploadprogress', func);
|
||||
// Callback for global upload progress events:
|
||||
// progressall: function (e, data) {}, // .bind('fileuploadprogressall', func);
|
||||
// Callback for uploads start, equivalent to the global ajaxStart event:
|
||||
// start: function (e) {}, // .bind('fileuploadstart', func);
|
||||
// Callback for uploads stop, equivalent to the global ajaxStop event:
|
||||
// stop: function (e) {}, // .bind('fileuploadstop', func);
|
||||
// Callback for change events of the fileInput collection:
|
||||
// change: function (e, data) {}, // .bind('fileuploadchange', func);
|
||||
// Callback for paste events to the dropZone collection:
|
||||
// paste: function (e, data) {}, // .bind('fileuploadpaste', func);
|
||||
// Callback for drop events of the dropZone collection:
|
||||
// drop: function (e, data) {}, // .bind('fileuploaddrop', func);
|
||||
// Callback for dragover events of the dropZone collection:
|
||||
// dragover: function (e) {}, // .bind('fileuploaddragover', func);
|
||||
|
||||
// The plugin options are used as settings object for the ajax calls.
|
||||
// The following are jQuery ajax settings required for the file uploads:
|
||||
processData: false,
|
||||
contentType: false,
|
||||
cache: false
|
||||
},
|
||||
|
||||
// A list of options that require a refresh after assigning a new value:
|
||||
_refreshOptionsList: ['namespace', 'dropZone', 'fileInput'],
|
||||
|
||||
_isXHRUpload: function (options) {
|
||||
var undef = 'undefined';
|
||||
return !options.forceIframeTransport &&
|
||||
typeof XMLHttpRequestUpload !== undef && typeof File !== undef &&
|
||||
(!options.multipart || typeof FormData !== undef);
|
||||
},
|
||||
|
||||
_getFormData: function (options) {
|
||||
var formData;
|
||||
if (typeof options.formData === 'function') {
|
||||
return options.formData(options.form);
|
||||
} else if ($.isArray(options.formData)) {
|
||||
return options.formData;
|
||||
} else if (options.formData) {
|
||||
formData = [];
|
||||
$.each(options.formData, function (name, value) {
|
||||
formData.push({name: name, value: value});
|
||||
});
|
||||
return formData;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
_getTotal: function (files) {
|
||||
var total = 0;
|
||||
$.each(files, function (index, file) {
|
||||
total += file.size || 1;
|
||||
});
|
||||
return total;
|
||||
},
|
||||
|
||||
_onProgress: function (e, data) {
|
||||
if (e.lengthComputable) {
|
||||
var total = data.total || this._getTotal(data.files),
|
||||
loaded = parseInt(
|
||||
e.loaded / e.total * (data.chunkSize || total),
|
||||
10
|
||||
) + (data.uploadedBytes || 0);
|
||||
this._loaded += loaded - (data.loaded || data.uploadedBytes || 0);
|
||||
data.lengthComputable = true;
|
||||
data.loaded = loaded;
|
||||
data.total = total;
|
||||
// Trigger a custom progress event with a total data property set
|
||||
// to the file size(s) of the current upload and a loaded data
|
||||
// property calculated accordingly:
|
||||
this._trigger('progress', e, data);
|
||||
// Trigger a global progress event for all current file uploads,
|
||||
// including ajax calls queued for sequential file uploads:
|
||||
this._trigger('progressall', e, {
|
||||
lengthComputable: true,
|
||||
loaded: this._loaded,
|
||||
total: this._total
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_initProgressListener: function (options) {
|
||||
var that = this,
|
||||
xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
|
||||
// Accesss to the native XHR object is required to add event listeners
|
||||
// for the upload progress event:
|
||||
if (xhr.upload) {
|
||||
$(xhr.upload).bind('progress', function (e) {
|
||||
var oe = e.originalEvent;
|
||||
// Make sure the progress event properties get copied over:
|
||||
e.lengthComputable = oe.lengthComputable;
|
||||
e.loaded = oe.loaded;
|
||||
e.total = oe.total;
|
||||
that._onProgress(e, options);
|
||||
});
|
||||
options.xhr = function () {
|
||||
return xhr;
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
_initXHRData: function (options) {
|
||||
var formData,
|
||||
file = options.files[0];
|
||||
if (!options.multipart || options.blob) {
|
||||
// For non-multipart uploads and chunked uploads,
|
||||
// file meta data is not part of the request body,
|
||||
// so we transmit this data as part of the HTTP headers.
|
||||
// For cross domain requests, these headers must be allowed
|
||||
// via Access-Control-Allow-Headers or removed using
|
||||
// the beforeSend callback:
|
||||
options.headers = $.extend(options.headers, {
|
||||
'X-File-Name': file.name,
|
||||
'X-File-Type': file.type,
|
||||
'X-File-Size': file.size
|
||||
});
|
||||
if (!options.blob) {
|
||||
// Non-chunked non-multipart upload:
|
||||
options.contentType = file.type;
|
||||
options.data = file;
|
||||
} else if (!options.multipart) {
|
||||
// Chunked non-multipart upload:
|
||||
options.contentType = 'application/octet-stream';
|
||||
options.data = options.blob;
|
||||
}
|
||||
}
|
||||
if (options.multipart && typeof FormData !== 'undefined') {
|
||||
if (options.postMessage) {
|
||||
// window.postMessage does not allow sending FormData
|
||||
// objects, so we just add the File/Blob objects to
|
||||
// the formData array and let the postMessage window
|
||||
// create the FormData object out of this array:
|
||||
formData = this._getFormData(options);
|
||||
if (options.blob) {
|
||||
formData.push({
|
||||
name: options.paramName,
|
||||
value: options.blob
|
||||
});
|
||||
} else {
|
||||
$.each(options.files, function (index, file) {
|
||||
formData.push({
|
||||
name: options.paramName,
|
||||
value: file
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (options.formData instanceof FormData) {
|
||||
formData = options.formData;
|
||||
} else {
|
||||
formData = new FormData();
|
||||
$.each(this._getFormData(options), function (index, field) {
|
||||
formData.append(field.name, field.value);
|
||||
});
|
||||
}
|
||||
if (options.blob) {
|
||||
formData.append(options.paramName, options.blob);
|
||||
} else {
|
||||
$.each(options.files, function (index, file) {
|
||||
// File objects are also Blob instances.
|
||||
// This check allows the tests to run with
|
||||
// dummy objects:
|
||||
if (file instanceof Blob) {
|
||||
formData.append(options.paramName, file);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
options.data = formData;
|
||||
}
|
||||
// Blob reference is not needed anymore, free memory:
|
||||
options.blob = null;
|
||||
},
|
||||
|
||||
_initIframeSettings: function (options) {
|
||||
// Setting the dataType to iframe enables the iframe transport:
|
||||
options.dataType = 'iframe ' + (options.dataType || '');
|
||||
// The iframe transport accepts a serialized array as form data:
|
||||
options.formData = this._getFormData(options);
|
||||
},
|
||||
|
||||
_initDataSettings: function (options) {
|
||||
if (this._isXHRUpload(options)) {
|
||||
if (!this._chunkedUpload(options, true)) {
|
||||
if (!options.data) {
|
||||
this._initXHRData(options);
|
||||
}
|
||||
this._initProgressListener(options);
|
||||
}
|
||||
if (options.postMessage) {
|
||||
// Setting the dataType to postmessage enables the
|
||||
// postMessage transport:
|
||||
options.dataType = 'postmessage ' + (options.dataType || '');
|
||||
}
|
||||
} else {
|
||||
this._initIframeSettings(options, 'iframe');
|
||||
}
|
||||
},
|
||||
|
||||
_initFormSettings: function (options) {
|
||||
// Retrieve missing options from the input field and the
|
||||
// associated form, if available:
|
||||
if (!options.form || !options.form.length) {
|
||||
options.form = $(options.fileInput.prop('form'));
|
||||
}
|
||||
if (!options.paramName) {
|
||||
options.paramName = options.fileInput.prop('name') ||
|
||||
'files[]';
|
||||
}
|
||||
if (!options.url) {
|
||||
options.url = options.form.prop('action') || location.href;
|
||||
}
|
||||
// The HTTP request method must be "POST" or "PUT":
|
||||
options.type = (options.type || options.form.prop('method') || '')
|
||||
.toUpperCase();
|
||||
if (options.type !== 'POST' && options.type !== 'PUT') {
|
||||
options.type = 'POST';
|
||||
}
|
||||
},
|
||||
|
||||
_getAJAXSettings: function (data) {
|
||||
var options = $.extend({}, this.options, data);
|
||||
this._initFormSettings(options);
|
||||
this._initDataSettings(options);
|
||||
return options;
|
||||
},
|
||||
|
||||
// Maps jqXHR callbacks to the equivalent
|
||||
// methods of the given Promise object:
|
||||
_enhancePromise: function (promise) {
|
||||
promise.success = promise.done;
|
||||
promise.error = promise.fail;
|
||||
promise.complete = promise.always;
|
||||
return promise;
|
||||
},
|
||||
|
||||
// Creates and returns a Promise object enhanced with
|
||||
// the jqXHR methods abort, success, error and complete:
|
||||
_getXHRPromise: function (resolveOrReject, context, args) {
|
||||
var dfd = $.Deferred(),
|
||||
promise = dfd.promise();
|
||||
context = context || this.options.context || promise;
|
||||
if (resolveOrReject === true) {
|
||||
dfd.resolveWith(context, args);
|
||||
} else if (resolveOrReject === false) {
|
||||
dfd.rejectWith(context, args);
|
||||
}
|
||||
promise.abort = dfd.promise;
|
||||
return this._enhancePromise(promise);
|
||||
},
|
||||
|
||||
// Uploads a file in multiple, sequential requests
|
||||
// by splitting the file up in multiple blob chunks.
|
||||
// If the second parameter is true, only tests if the file
|
||||
// should be uploaded in chunks, but does not invoke any
|
||||
// upload requests:
|
||||
_chunkedUpload: function (options, testOnly) {
|
||||
var that = this,
|
||||
file = options.files[0],
|
||||
fs = file.size,
|
||||
ub = options.uploadedBytes = options.uploadedBytes || 0,
|
||||
mcs = options.maxChunkSize || fs,
|
||||
// Use the Blob methods with the slice implementation
|
||||
// according to the W3C Blob API specification:
|
||||
slice = file.webkitSlice || file.mozSlice || file.slice,
|
||||
upload,
|
||||
n,
|
||||
jqXHR,
|
||||
pipe;
|
||||
if (!(this._isXHRUpload(options) && slice && (ub || mcs < fs)) ||
|
||||
options.data) {
|
||||
return false;
|
||||
}
|
||||
if (testOnly) {
|
||||
return true;
|
||||
}
|
||||
if (ub >= fs) {
|
||||
file.error = 'uploadedBytes';
|
||||
return this._getXHRPromise(
|
||||
false,
|
||||
options.context,
|
||||
[null, 'error', file.error]
|
||||
);
|
||||
}
|
||||
// n is the number of blobs to upload,
|
||||
// calculated via filesize, uploaded bytes and max chunk size:
|
||||
n = Math.ceil((fs - ub) / mcs);
|
||||
// The chunk upload method accepting the chunk number as parameter:
|
||||
upload = function (i) {
|
||||
if (!i) {
|
||||
return that._getXHRPromise(true, options.context);
|
||||
}
|
||||
// Upload the blobs in sequential order:
|
||||
return upload(i -= 1).pipe(function () {
|
||||
// Clone the options object for each chunk upload:
|
||||
var o = $.extend({}, options);
|
||||
o.blob = slice.call(
|
||||
file,
|
||||
ub + i * mcs,
|
||||
ub + (i + 1) * mcs
|
||||
);
|
||||
// Store the current chunk size, as the blob itself
|
||||
// will be dereferenced after data processing:
|
||||
o.chunkSize = o.blob.size;
|
||||
// Process the upload data (the blob and potential form data):
|
||||
that._initXHRData(o);
|
||||
// Add progress listeners for this chunk upload:
|
||||
that._initProgressListener(o);
|
||||
jqXHR = ($.ajax(o) || that._getXHRPromise(false, o.context))
|
||||
.done(function () {
|
||||
// Create a progress event if upload is done and
|
||||
// no progress event has been invoked for this chunk:
|
||||
if (!o.loaded) {
|
||||
that._onProgress($.Event('progress', {
|
||||
lengthComputable: true,
|
||||
loaded: o.chunkSize,
|
||||
total: o.chunkSize
|
||||
}), o);
|
||||
}
|
||||
options.uploadedBytes = o.uploadedBytes +=
|
||||
o.chunkSize;
|
||||
});
|
||||
return jqXHR;
|
||||
});
|
||||
};
|
||||
// Return the piped Promise object, enhanced with an abort method,
|
||||
// which is delegated to the jqXHR object of the current upload,
|
||||
// and jqXHR callbacks mapped to the equivalent Promise methods:
|
||||
pipe = upload(n);
|
||||
pipe.abort = function () {
|
||||
return jqXHR.abort();
|
||||
};
|
||||
return this._enhancePromise(pipe);
|
||||
},
|
||||
|
||||
_beforeSend: function (e, data) {
|
||||
if (this._active === 0) {
|
||||
// the start callback is triggered when an upload starts
|
||||
// and no other uploads are currently running,
|
||||
// equivalent to the global ajaxStart event:
|
||||
this._trigger('start');
|
||||
}
|
||||
this._active += 1;
|
||||
// Initialize the global progress values:
|
||||
this._loaded += data.uploadedBytes || 0;
|
||||
this._total += this._getTotal(data.files);
|
||||
},
|
||||
|
||||
_onDone: function (result, textStatus, jqXHR, options) {
|
||||
if (!this._isXHRUpload(options)) {
|
||||
// Create a progress event for each iframe load:
|
||||
this._onProgress($.Event('progress', {
|
||||
lengthComputable: true,
|
||||
loaded: 1,
|
||||
total: 1
|
||||
}), options);
|
||||
}
|
||||
options.result = result;
|
||||
options.textStatus = textStatus;
|
||||
options.jqXHR = jqXHR;
|
||||
this._trigger('done', null, options);
|
||||
},
|
||||
|
||||
_onFail: function (jqXHR, textStatus, errorThrown, options) {
|
||||
options.jqXHR = jqXHR;
|
||||
options.textStatus = textStatus;
|
||||
options.errorThrown = errorThrown;
|
||||
this._trigger('fail', null, options);
|
||||
if (options.recalculateProgress) {
|
||||
// Remove the failed (error or abort) file upload from
|
||||
// the global progress calculation:
|
||||
this._loaded -= options.loaded || options.uploadedBytes || 0;
|
||||
this._total -= options.total || this._getTotal(options.files);
|
||||
}
|
||||
},
|
||||
|
||||
_onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) {
|
||||
this._active -= 1;
|
||||
options.textStatus = textStatus;
|
||||
if (jqXHRorError && jqXHRorError.always) {
|
||||
options.jqXHR = jqXHRorError;
|
||||
options.result = jqXHRorResult;
|
||||
} else {
|
||||
options.jqXHR = jqXHRorResult;
|
||||
options.errorThrown = jqXHRorError;
|
||||
}
|
||||
this._trigger('always', null, options);
|
||||
if (this._active === 0) {
|
||||
// The stop callback is triggered when all uploads have
|
||||
// been completed, equivalent to the global ajaxStop event:
|
||||
this._trigger('stop');
|
||||
// Reset the global progress values:
|
||||
this._loaded = this._total = 0;
|
||||
}
|
||||
},
|
||||
|
||||
_onSend: function (e, data) {
|
||||
var that = this,
|
||||
jqXHR,
|
||||
slot,
|
||||
pipe,
|
||||
options = that._getAJAXSettings(data),
|
||||
send = function (resolve, args) {
|
||||
that._sending += 1;
|
||||
jqXHR = jqXHR || (
|
||||
(resolve !== false &&
|
||||
that._trigger('send', e, options) !== false &&
|
||||
(that._chunkedUpload(options) || $.ajax(options))) ||
|
||||
that._getXHRPromise(false, options.context, args)
|
||||
).done(function (result, textStatus, jqXHR) {
|
||||
that._onDone(result, textStatus, jqXHR, options);
|
||||
}).fail(function (jqXHR, textStatus, errorThrown) {
|
||||
that._onFail(jqXHR, textStatus, errorThrown, options);
|
||||
}).always(function (jqXHRorResult, textStatus, jqXHRorError) {
|
||||
that._sending -= 1;
|
||||
that._onAlways(
|
||||
jqXHRorResult,
|
||||
textStatus,
|
||||
jqXHRorError,
|
||||
options
|
||||
);
|
||||
if (options.limitConcurrentUploads &&
|
||||
options.limitConcurrentUploads > that._sending) {
|
||||
// Start the next queued upload,
|
||||
// that has not been aborted:
|
||||
var nextSlot = that._slots.shift();
|
||||
while (nextSlot) {
|
||||
if (!nextSlot.isRejected()) {
|
||||
nextSlot.resolve();
|
||||
break;
|
||||
}
|
||||
nextSlot = that._slots.shift();
|
||||
}
|
||||
}
|
||||
});
|
||||
return jqXHR;
|
||||
};
|
||||
this._beforeSend(e, options);
|
||||
if (this.options.sequentialUploads ||
|
||||
(this.options.limitConcurrentUploads &&
|
||||
this.options.limitConcurrentUploads <= this._sending)) {
|
||||
if (this.options.limitConcurrentUploads > 1) {
|
||||
slot = $.Deferred();
|
||||
this._slots.push(slot);
|
||||
pipe = slot.pipe(send);
|
||||
} else {
|
||||
pipe = (this._sequence = this._sequence.pipe(send, send));
|
||||
}
|
||||
// Return the piped Promise object, enhanced with an abort method,
|
||||
// which is delegated to the jqXHR object of the current upload,
|
||||
// and jqXHR callbacks mapped to the equivalent Promise methods:
|
||||
pipe.abort = function () {
|
||||
var args = [undefined, 'abort', 'abort'];
|
||||
if (!jqXHR) {
|
||||
if (slot) {
|
||||
slot.rejectWith(args);
|
||||
}
|
||||
return send(false, args);
|
||||
}
|
||||
return jqXHR.abort();
|
||||
};
|
||||
return this._enhancePromise(pipe);
|
||||
}
|
||||
return send();
|
||||
},
|
||||
|
||||
_onAdd: function (e, data) {
|
||||
var that = this,
|
||||
result = true,
|
||||
options = $.extend({}, this.options, data),
|
||||
limit = options.limitMultiFileUploads,
|
||||
fileSet,
|
||||
i;
|
||||
if (!(options.singleFileUploads || limit) ||
|
||||
!this._isXHRUpload(options)) {
|
||||
fileSet = [data.files];
|
||||
} else if (!options.singleFileUploads && limit) {
|
||||
fileSet = [];
|
||||
for (i = 0; i < data.files.length; i += limit) {
|
||||
fileSet.push(data.files.slice(i, i + limit));
|
||||
}
|
||||
}
|
||||
data.originalFiles = data.files;
|
||||
$.each(fileSet || data.files, function (index, element) {
|
||||
var files = fileSet ? element : [element],
|
||||
newData = $.extend({}, data, {files: files});
|
||||
newData.submit = function () {
|
||||
newData.jqXHR = this.jqXHR =
|
||||
(that._trigger('submit', e, this) !== false) &&
|
||||
that._onSend(e, this);
|
||||
return this.jqXHR;
|
||||
};
|
||||
return (result = that._trigger('add', e, newData));
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
// File Normalization for Gecko 1.9.1 (Firefox 3.5) support:
|
||||
_normalizeFile: function (index, file) {
|
||||
if (file.name === undefined && file.size === undefined) {
|
||||
file.name = file.fileName;
|
||||
file.size = file.fileSize;
|
||||
}
|
||||
},
|
||||
|
||||
_replaceFileInput: function (input) {
|
||||
var inputClone = input.clone(true);
|
||||
$('<form></form>').append(inputClone)[0].reset();
|
||||
// Detaching allows to insert the fileInput on another form
|
||||
// without loosing the file input value:
|
||||
input.after(inputClone).detach();
|
||||
// Avoid memory leaks with the detached file input:
|
||||
$.cleanData(input.unbind('remove'));
|
||||
// Replace the original file input element in the fileInput
|
||||
// collection with the clone, which has been copied including
|
||||
// event handlers:
|
||||
this.options.fileInput = this.options.fileInput.map(function (i, el) {
|
||||
if (el === input[0]) {
|
||||
return inputClone[0];
|
||||
}
|
||||
return el;
|
||||
});
|
||||
// If the widget has been initialized on the file input itself,
|
||||
// override this.element with the file input clone:
|
||||
if (input[0] === this.element[0]) {
|
||||
this.element = inputClone;
|
||||
}
|
||||
},
|
||||
|
||||
_onChange: function (e) {
|
||||
var that = e.data.fileupload,
|
||||
data = {
|
||||
files: $.each($.makeArray(e.target.files), that._normalizeFile),
|
||||
fileInput: $(e.target),
|
||||
form: $(e.target.form)
|
||||
};
|
||||
if (!data.files.length) {
|
||||
// If the files property is not available, the browser does not
|
||||
// support the File API and we add a pseudo File object with
|
||||
// the input value as name with path information removed:
|
||||
data.files = [{name: e.target.value.replace(/^.*\\/, '')}];
|
||||
}
|
||||
if (that.options.replaceFileInput) {
|
||||
that._replaceFileInput(data.fileInput);
|
||||
}
|
||||
if (that._trigger('change', e, data) === false ||
|
||||
that._onAdd(e, data) === false) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
_onPaste: function (e) {
|
||||
var that = e.data.fileupload,
|
||||
cbd = e.originalEvent.clipboardData,
|
||||
items = (cbd && cbd.items) || [],
|
||||
data = {files: []};
|
||||
$.each(items, function (index, item) {
|
||||
var file = item.getAsFile && item.getAsFile();
|
||||
if (file) {
|
||||
data.files.push(file);
|
||||
}
|
||||
});
|
||||
if (that._trigger('paste', e, data) === false ||
|
||||
that._onAdd(e, data) === false) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
_onDrop: function (e) {
|
||||
var that = e.data.fileupload,
|
||||
dataTransfer = e.dataTransfer = e.originalEvent.dataTransfer,
|
||||
data = {
|
||||
files: $.each(
|
||||
$.makeArray(dataTransfer && dataTransfer.files),
|
||||
that._normalizeFile
|
||||
)
|
||||
};
|
||||
if (that._trigger('drop', e, data) === false ||
|
||||
that._onAdd(e, data) === false) {
|
||||
return false;
|
||||
}
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
_onDragOver: function (e) {
|
||||
var that = e.data.fileupload,
|
||||
dataTransfer = e.dataTransfer = e.originalEvent.dataTransfer;
|
||||
if (that._trigger('dragover', e) === false) {
|
||||
return false;
|
||||
}
|
||||
if (dataTransfer) {
|
||||
dataTransfer.dropEffect = dataTransfer.effectAllowed = 'copy';
|
||||
}
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
_initEventHandlers: function () {
|
||||
var ns = this.options.namespace;
|
||||
this.options.dropZone
|
||||
.bind('dragover.' + ns, {fileupload: this}, this._onDragOver)
|
||||
.bind('drop.' + ns, {fileupload: this}, this._onDrop)
|
||||
.bind('paste.' + ns, {fileupload: this}, this._onPaste);
|
||||
this.options.fileInput
|
||||
.bind('change.' + ns, {fileupload: this}, this._onChange);
|
||||
},
|
||||
|
||||
_destroyEventHandlers: function () {
|
||||
var ns = this.options.namespace;
|
||||
this.options.dropZone
|
||||
.unbind('dragover.' + ns, this._onDragOver)
|
||||
.unbind('drop.' + ns, this._onDrop)
|
||||
.unbind('paste.' + ns, this._onPaste);
|
||||
this.options.fileInput
|
||||
.unbind('change.' + ns, this._onChange);
|
||||
},
|
||||
|
||||
_beforeSetOption: function (key, value) {
|
||||
this._destroyEventHandlers();
|
||||
},
|
||||
|
||||
_afterSetOption: function (key, value) {
|
||||
var options = this.options;
|
||||
if (!options.fileInput) {
|
||||
options.fileInput = $();
|
||||
}
|
||||
if (!options.dropZone) {
|
||||
options.dropZone = $();
|
||||
}
|
||||
this._initEventHandlers();
|
||||
},
|
||||
|
||||
_setOption: function (key, value) {
|
||||
var refresh = $.inArray(key, this._refreshOptionsList) !== -1;
|
||||
if (refresh) {
|
||||
this._beforeSetOption(key, value);
|
||||
}
|
||||
$.Widget.prototype._setOption.call(this, key, value);
|
||||
if (refresh) {
|
||||
this._afterSetOption(key, value);
|
||||
}
|
||||
},
|
||||
|
||||
_create: function () {
|
||||
var options = this.options;
|
||||
options.namespace = options.namespace || this.widgetName;
|
||||
if (options.fileInput === undefined) {
|
||||
options.fileInput = this.element.is('input:file') ?
|
||||
this.element : this.element.find('input:file');
|
||||
} else if (!options.fileInput) {
|
||||
options.fileInput = $();
|
||||
}
|
||||
if (!options.dropZone) {
|
||||
options.dropZone = $();
|
||||
}
|
||||
this._slots = [];
|
||||
this._sequence = this._getXHRPromise(true);
|
||||
this._sending = this._active = this._loaded = this._total = 0;
|
||||
this._initEventHandlers();
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
this._destroyEventHandlers();
|
||||
$.Widget.prototype.destroy.call(this);
|
||||
},
|
||||
|
||||
enable: function () {
|
||||
$.Widget.prototype.enable.call(this);
|
||||
this._initEventHandlers();
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this._destroyEventHandlers();
|
||||
$.Widget.prototype.disable.call(this);
|
||||
},
|
||||
|
||||
// This method is exposed to the widget API and allows adding files
|
||||
// using the fileupload API. The data parameter accepts an object which
|
||||
// must have a files property and can contain additional options:
|
||||
// .fileupload('add', {files: filesList});
|
||||
add: function (data) {
|
||||
if (!data || this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
data.files = $.each($.makeArray(data.files), this._normalizeFile);
|
||||
this._onAdd(null, data);
|
||||
},
|
||||
|
||||
// This method is exposed to the widget API and allows sending files
|
||||
// using the fileupload API. The data parameter accepts an object which
|
||||
// must have a files property and can contain additional options:
|
||||
// .fileupload('send', {files: filesList});
|
||||
// The method returns a Promise object for the file upload call.
|
||||
send: function (data) {
|
||||
if (data && !this.options.disabled) {
|
||||
data.files = $.each($.makeArray(data.files), this._normalizeFile);
|
||||
if (data.files.length) {
|
||||
return this._onSend(null, data);
|
||||
}
|
||||
}
|
||||
return this._getXHRPromise(false, data && data.context);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
/*
|
||||
* jQuery Iframe Transport Plugin 1.2.5
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2011, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/*jslint unparam: true, nomen: true */
|
||||
/*global jQuery, document */
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Helper variable to create unique names for the transport iframes:
|
||||
var counter = 0;
|
||||
|
||||
// The iframe transport accepts three additional options:
|
||||
// options.fileInput: a jQuery collection of file input fields
|
||||
// options.paramName: the parameter name for the file form data,
|
||||
// overrides the name property of the file input field(s)
|
||||
// options.formData: an array of objects with name and value properties,
|
||||
// equivalent to the return data of .serializeArray(), e.g.:
|
||||
// [{name: 'a', value: 1}, {name: 'b', value: 2}]
|
||||
$.ajaxTransport('iframe', function (options) {
|
||||
if (options.async && (options.type === 'POST' || options.type === 'GET')) {
|
||||
var form,
|
||||
iframe;
|
||||
return {
|
||||
send: function (_, completeCallback) {
|
||||
form = $('<form style="display:none;"></form>');
|
||||
// javascript:false as initial iframe src
|
||||
// prevents warning popups on HTTPS in IE6.
|
||||
// IE versions below IE8 cannot set the name property of
|
||||
// elements that have already been added to the DOM,
|
||||
// so we set the name along with the iframe HTML markup:
|
||||
iframe = $(
|
||||
'<iframe src="javascript:false;" name="iframe-transport-' +
|
||||
(counter += 1) + '"></iframe>'
|
||||
).bind('load', function () {
|
||||
var fileInputClones;
|
||||
iframe
|
||||
.unbind('load')
|
||||
.bind('load', function () {
|
||||
var response;
|
||||
// Wrap in a try/catch block to catch exceptions thrown
|
||||
// when trying to access cross-domain iframe contents:
|
||||
try {
|
||||
response = iframe.contents();
|
||||
// Google Chrome and Firefox do not throw an
|
||||
// exception when calling iframe.contents() on
|
||||
// cross-domain requests, so we unify the response:
|
||||
if (!response.length || !response[0].firstChild) {
|
||||
throw new Error();
|
||||
}
|
||||
} catch (e) {
|
||||
response = undefined;
|
||||
}
|
||||
// The complete callback returns the
|
||||
// iframe content document as response object:
|
||||
completeCallback(
|
||||
200,
|
||||
'success',
|
||||
{'iframe': response}
|
||||
);
|
||||
// Fix for IE endless progress bar activity bug
|
||||
// (happens on form submits to iframe targets):
|
||||
$('<iframe src="javascript:false;"></iframe>')
|
||||
.appendTo(form);
|
||||
form.remove();
|
||||
});
|
||||
form
|
||||
.prop('target', iframe.prop('name'))
|
||||
.prop('action', options.url)
|
||||
.prop('method', options.type);
|
||||
if (options.formData) {
|
||||
$.each(options.formData, function (index, field) {
|
||||
$('<input type="hidden"/>')
|
||||
.prop('name', field.name)
|
||||
.val(field.value)
|
||||
.appendTo(form);
|
||||
});
|
||||
}
|
||||
if (options.fileInput && options.fileInput.length &&
|
||||
options.type === 'POST') {
|
||||
fileInputClones = options.fileInput.clone();
|
||||
// Insert a clone for each file input field:
|
||||
options.fileInput.after(function (index) {
|
||||
return fileInputClones[index];
|
||||
});
|
||||
if (options.paramName) {
|
||||
options.fileInput.each(function () {
|
||||
$(this).prop('name', options.paramName);
|
||||
});
|
||||
}
|
||||
// Appending the file input fields to the hidden form
|
||||
// removes them from their original location:
|
||||
form
|
||||
.append(options.fileInput)
|
||||
.prop('enctype', 'multipart/form-data')
|
||||
// enctype must be set as encoding for IE:
|
||||
.prop('encoding', 'multipart/form-data');
|
||||
}
|
||||
form.submit();
|
||||
// Insert the file input fields at their original location
|
||||
// by replacing the clones with the originals:
|
||||
if (fileInputClones && fileInputClones.length) {
|
||||
options.fileInput.each(function (index, input) {
|
||||
var clone = $(fileInputClones[index]);
|
||||
$(input).prop('name', clone.prop('name'));
|
||||
clone.replaceWith(input);
|
||||
});
|
||||
}
|
||||
});
|
||||
form.append(iframe).appendTo(document.body);
|
||||
},
|
||||
abort: function () {
|
||||
if (iframe) {
|
||||
// javascript:false as iframe src aborts the request
|
||||
// and prevents warning popups on HTTPS in IE6.
|
||||
// concat is used to avoid the "Script URL" JSLint error:
|
||||
iframe
|
||||
.unbind('load')
|
||||
.prop('src', 'javascript'.concat(':false;'));
|
||||
}
|
||||
if (form) {
|
||||
form.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// The iframe transport returns the iframe content document as response.
|
||||
// The following adds converters from iframe to text, json, html, and script:
|
||||
$.ajaxSetup({
|
||||
converters: {
|
||||
'iframe text': function (iframe) {
|
||||
return $(iframe[0].body).text();
|
||||
},
|
||||
'iframe json': function (iframe) {
|
||||
return $.parseJSON($(iframe[0].body).text());
|
||||
},
|
||||
'iframe html': function (iframe) {
|
||||
return $(iframe[0].body).html();
|
||||
},
|
||||
'iframe script': function (iframe) {
|
||||
return $.globalEval($(iframe[0].body).text());
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"name": "blueimp-file-upload",
|
||||
"version": "6.0.3",
|
||||
"title": "jQuery File Upload",
|
||||
"description": "File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.",
|
||||
"keywords": [
|
||||
"file",
|
||||
"upload",
|
||||
"widget",
|
||||
"multiple",
|
||||
"selection",
|
||||
"drag",
|
||||
"drop",
|
||||
"progress",
|
||||
"preview",
|
||||
"cross-domain",
|
||||
"cross-site",
|
||||
"chunked",
|
||||
"resume",
|
||||
"gae",
|
||||
"go",
|
||||
"python",
|
||||
"php"
|
||||
],
|
||||
"homepage": "https://github.com/blueimp/jQuery-File-Upload",
|
||||
"author": {
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Sebastian Tschan",
|
||||
"url": "https://blueimp.net"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/blueimp/jQuery-File-Upload.git"
|
||||
},
|
||||
"bugs": "https://github.com/blueimp/jQuery-File-Upload/issues",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://www.opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.6",
|
||||
"jquery.ui.widget": ">=1.8",
|
||||
"blueimp-load-image": ">=1.1.3",
|
||||
"blueimp-tmpl": ">=1.0.2"
|
||||
},
|
||||
"files": [
|
||||
"jquery.iframe-transport.js",
|
||||
"jquery.fileupload.js",
|
||||
"jquery.fileupload-ui.js",
|
||||
"jquery.fileupload-ui.css",
|
||||
"progressbar.gif"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue