imageUpload.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. //https://css-tricks.com/drag-and-drop-file-uploading/
  2. function imageInit(){
  3. // feature detection for drag&drop upload
  4. var isAdvancedUpload = function()
  5. {
  6. var div = document.createElement( 'div' );
  7. return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
  8. }();
  9. // applying the effect for every form
  10. var forms = document.querySelectorAll( '.box' );
  11. Array.prototype.forEach.call( forms, function( form )
  12. {
  13. var input = form.querySelector( 'input[type="file"]' ),
  14. label = form.querySelector( 'label' ),
  15. errorMsg = form.querySelector( '.box__error span' ),
  16. restart = form.querySelectorAll( '.box__restart' ),
  17. droppedFiles = false,
  18. showFiles = function( files )
  19. {
  20. label.textContent = files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
  21. },
  22. triggerFormSubmit = function()
  23. {
  24. $('#imgUpload').submit();
  25. //var event = document.createEvent( 'HTMLEvents' );
  26. //event.initEvent( 'submit', true, false );
  27. //form.dispatchEvent( event );
  28. };
  29. // letting the server side to know we are going to make an Ajax request
  30. var ajaxFlag = document.createElement( 'input' );
  31. ajaxFlag.setAttribute( 'type', 'hidden' );
  32. ajaxFlag.setAttribute( 'name', 'ajax' );
  33. ajaxFlag.setAttribute( 'value', 1 );
  34. form.appendChild( ajaxFlag );
  35. // automatically submit the form on file select
  36. input.addEventListener( 'change', function( e )
  37. {
  38. showFiles( e.target.files );
  39. triggerFormSubmit();
  40. });
  41. // drag&drop files if the feature is available
  42. if( isAdvancedUpload )
  43. {
  44. form.classList.add( 'has-advanced-upload' ); // letting the CSS part to know drag&drop is supported by the browser
  45. [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( function( event )
  46. {
  47. form.addEventListener( event, function( e )
  48. {
  49. // preventing the unwanted behaviours
  50. e.preventDefault();
  51. e.stopPropagation();
  52. });
  53. });
  54. [ 'dragover', 'dragenter' ].forEach( function( event )
  55. {
  56. form.addEventListener( event, function()
  57. {
  58. form.classList.add( 'is-dragover' );
  59. });
  60. });
  61. [ 'dragleave', 'dragend', 'drop' ].forEach( function( event )
  62. {
  63. form.addEventListener( event, function()
  64. {
  65. form.classList.remove( 'is-dragover' );
  66. });
  67. });
  68. form.addEventListener( 'drop', function( e )
  69. {
  70. droppedFiles = e.dataTransfer.files; // the files that were dropped
  71. showFiles( droppedFiles );
  72. triggerFormSubmit();
  73. e.dataTransfer.files = [];
  74. });
  75. }
  76. // if the form was submitted
  77. $('#imgUpload').submit(function(e){
  78. // preventing the duplicate submissions if the current one is in progress
  79. if( form.classList.contains( 'is-uploading' ) ) return false;
  80. form.classList.add( 'is-uploading' );
  81. form.classList.remove( 'is-error' );
  82. var station = $('#pattern_station').text();
  83. var pattern = $('#pattern_ID').text();
  84. var curCount = $('#image_count').text();
  85. var language = $('#image_language option:selected').text();
  86. if( isAdvancedUpload ) // ajax file upload for modern browsers
  87. {
  88. e.preventDefault();
  89. // gathering the form data
  90. var ajaxData;
  91. if( droppedFiles )
  92. {
  93. ajaxData = new FormData();
  94. Array.prototype.forEach.call( droppedFiles, function( file )
  95. {
  96. ajaxData.append( input.getAttribute( 'name' ), file );
  97. });
  98. }
  99. else{
  100. ajaxData = new FormData( form );
  101. }
  102. ajaxData.append("language", language)
  103. /*
  104. $.ajax({
  105. type: "POST",
  106. url: form.getAttribute( 'action' ),
  107. headers: {"content-id": "pattern"},
  108. data: ajaxData,
  109. contentType: false,
  110. processData: false,
  111. success: function(res) {
  112. getPattern(station, pattern)
  113. input.value = "";
  114. },
  115. error: function (request, status, error) {
  116. alert(request.responseText + status + error);
  117. }
  118. });
  119. */
  120. //Original Upload:
  121. // ajax request
  122. var ajax = new XMLHttpRequest();
  123. ajax.open( form.getAttribute( 'method' ), form.getAttribute( 'action' ), false );
  124. ajax.onload = function()
  125. {
  126. form.classList.remove( 'is-uploading' );
  127. if( ajax.status >= 200 && ajax.status < 400 )
  128. {
  129. getPattern(station, pattern)
  130. input.value = "";
  131. //imageInit();
  132. //form.classList.add('is-success');
  133. //old upload php: saveImages(station, pattern, curCount, language, ajax.responseText);
  134. }
  135. else alert( 'Error. Please, contact the webmaster!' );
  136. };
  137. ajax.onerror = function()
  138. {
  139. form.classList.remove( 'is-uploading' );
  140. alert( 'Error. Please, try again!' );
  141. };
  142. ajax.send( ajaxData );
  143. form.classList.remove( 'is-uploading' );
  144. form.classList.remove( 'is-error', 'is-success' );
  145. e.target.files = [];
  146. input.value = "";
  147. droppedFiles = false;
  148. }
  149. else // fallback Ajax solution upload for older browsers
  150. {
  151. var iframeName = 'uploadiframe' + new Date().getTime(),
  152. iframe = document.createElement( 'iframe' );
  153. $iframe = $( '<iframe name="' + iframeName + '" style="display: none;"></iframe>' );
  154. iframe.setAttribute( 'name', iframeName );
  155. iframe.style.display = 'none';
  156. document.body.appendChild( iframe );
  157. form.setAttribute( 'target', iframeName );
  158. iframe.addEventListener( 'load', function()
  159. {
  160. var data = JSON.parse( iframe.contentDocument.body.innerHTML );
  161. form.classList.remove( 'is-uploading' )
  162. form.classList.add( data.success == true ? 'is-success' : 'is-error' )
  163. form.removeAttribute( 'target' );
  164. if( !data.success ) errorMsg.textContent = data.error;
  165. iframe.parentNode.removeChild( iframe );
  166. });
  167. }
  168. /*
  169. if(e.preventDefault){ e.preventDefault()}
  170. else{e.stop()};
  171. e.returnValue = false;
  172. e.stopPropagation();
  173. */
  174. });
  175. // restart the form if has a state of error/success
  176. Array.prototype.forEach.call( restart, function( entry )
  177. {
  178. entry.addEventListener( 'click', function( e )
  179. {
  180. e.preventDefault();
  181. form.classList.remove( 'is-error', 'is-success' );
  182. input.click();
  183. });
  184. });
  185. // Firefox focus bug fix for file input
  186. input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
  187. input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
  188. });
  189. }
  190. $(document).ready(function() {
  191. imageInit();
  192. });