123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- function imageInit(){
-
- var isAdvancedUpload = function()
- {
- var div = document.createElement( 'div' );
- return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
- }();
-
- var forms = document.querySelectorAll( '.box' );
- Array.prototype.forEach.call( forms, function( form )
- {
- var input = form.querySelector( 'input[type="file"]' ),
- label = form.querySelector( 'label' ),
- errorMsg = form.querySelector( '.box__error span' ),
- restart = form.querySelectorAll( '.box__restart' ),
- droppedFiles = false,
- showFiles = function( files )
- {
- label.textContent = files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
- },
- triggerFormSubmit = function()
- {
- $('#imgUpload').submit();
-
-
-
- };
-
- var ajaxFlag = document.createElement( 'input' );
- ajaxFlag.setAttribute( 'type', 'hidden' );
- ajaxFlag.setAttribute( 'name', 'ajax' );
- ajaxFlag.setAttribute( 'value', 1 );
- form.appendChild( ajaxFlag );
-
- input.addEventListener( 'change', function( e )
- {
- showFiles( e.target.files );
- triggerFormSubmit();
- });
-
- if( isAdvancedUpload )
- {
- form.classList.add( 'has-advanced-upload' );
- [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( function( event )
- {
- form.addEventListener( event, function( e )
- {
-
- e.preventDefault();
- e.stopPropagation();
- });
- });
- [ 'dragover', 'dragenter' ].forEach( function( event )
- {
- form.addEventListener( event, function()
- {
- form.classList.add( 'is-dragover' );
- });
- });
- [ 'dragleave', 'dragend', 'drop' ].forEach( function( event )
- {
- form.addEventListener( event, function()
- {
- form.classList.remove( 'is-dragover' );
- });
- });
- form.addEventListener( 'drop', function( e )
- {
- droppedFiles = e.dataTransfer.files;
- showFiles( droppedFiles );
-
- triggerFormSubmit();
- e.dataTransfer.files = [];
- });
- }
-
- $('#imgUpload').submit(function(e){
-
- if( form.classList.contains( 'is-uploading' ) ) return false;
- form.classList.add( 'is-uploading' );
- form.classList.remove( 'is-error' );
-
- var station = $('#pattern_station').text();
- var pattern = $('#pattern_ID').text();
- var curCount = $('#image_count').text();
- var language = $('#image_language option:selected').text();
-
-
- if( isAdvancedUpload )
- {
- e.preventDefault();
-
- var ajaxData;
-
-
- var i = 0;
- if( droppedFiles )
- {
- ajaxData = new FormData();
- Array.prototype.forEach.call( droppedFiles, function( file )
- {
- ajaxData.append( input.getAttribute( 'name' ), file );
- });
- }
- else{
- ajaxData = new FormData( form );
- }
-
-
-
- var ajax = new XMLHttpRequest();
- ajax.open( form.getAttribute( 'method' ), form.getAttribute( 'action' ), false );
- ajax.onload = function()
- {
- form.classList.remove( 'is-uploading' );
- if( ajax.status >= 200 && ajax.status < 400 )
- {
- listData($("#selectfolders").val())
-
- input.value = "";
-
-
-
-
-
- }
- else alert( 'Error. Please, contact the webmaster!' );
- };
- ajax.onerror = function()
- {
- form.classList.remove( 'is-uploading' );
- alert( 'Error. Please, try again!' );
- };
-
-
-
- var object = {};
- ajaxData.forEach(function(value, key){
- object[key] = value;
- });
- console.log(JSON.stringify(object));
- ajax.send( ajaxData );
- form.classList.remove( 'is-uploading' );
- form.classList.remove( 'is-error', 'is-success' );
-
- e.target.files = [];
- input.value = "";
- droppedFiles = false;
- }
- else
- {
- var iframeName = 'uploadiframe' + new Date().getTime(),
- iframe = document.createElement( 'iframe' );
- $iframe = $( '<iframe name="' + iframeName + '" style="display: none;"></iframe>' );
- iframe.setAttribute( 'name', iframeName );
- iframe.style.display = 'none';
- document.body.appendChild( iframe );
- form.setAttribute( 'target', iframeName );
- iframe.addEventListener( 'load', function()
- {
- var data = JSON.parse( iframe.contentDocument.body.innerHTML );
- form.classList.remove( 'is-uploading' )
- form.classList.add( data.success == true ? 'is-success' : 'is-error' )
- form.removeAttribute( 'target' );
- if( !data.success ) errorMsg.textContent = data.error;
- iframe.parentNode.removeChild( iframe );
- });
- }
- });
-
- Array.prototype.forEach.call( restart, function( entry )
- {
- entry.addEventListener( 'click', function( e )
- {
- e.preventDefault();
- form.classList.remove( 'is-error', 'is-success' );
- input.click();
- });
- });
-
- input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
- input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
- });
- }
- $(document).ready(function() {
- imageInit();
- });
|