1/* global plupload, pluploadL10n, ajaxurl, post_id, wpUploaderInit, deleteUserSetting, setUserSetting, getUserSetting, shortform */
2var topWin = window.dialogArguments || opener || parent || top, uploader, uploader_init;
3
4// Progress and success handlers for media multi uploads.
5function fileQueued( fileObj ) {
6 // Get rid of unused form.
7 jQuery( '.media-blank' ).remove();
8
9 var items = jQuery( '#media-items' ).children(), postid = post_id || 0;
10
11 // Collapse a single item.
12 if ( items.length == 1 ) {
13 items.removeClass( 'open' ).find( '.slidetoggle' ).slideUp( 200 );
14 }
15 // Create a progress bar containing the filename.
16 jQuery( '<div class="media-item">' )
17 .attr( 'id', 'media-item-' + fileObj.id )
18 .addClass( 'child-of-' + postid )
19 .append( jQuery( '<div class="filename original">' ).text( ' ' + fileObj.name ),
20 '<div class="progress"><div class="percent">0%</div><div class="bar"></div></div>' )
21 .appendTo( jQuery( '#media-items' ) );
22
23 // Disable submit.
24 jQuery( '#insert-gallery' ).prop( 'disabled', true );
25}
26
27function uploadStart() {
28 try {
29 if ( typeof topWin.tb_remove != 'undefined' )
30 topWin.jQuery( '#TB_overlay' ).unbind( 'click', topWin.tb_remove );
31 } catch( e ){}
32
33 return true;
34}
35
36function uploadProgress( up, file ) {
37 var item = jQuery( '#media-item-' + file.id );
38
39 jQuery( '.bar', item ).width( ( 200 * file.loaded ) / file.size );
40 jQuery( '.percent', item ).html( file.percent + '%' );
41}
42
43// Check to see if a large file failed to upload.
44function fileUploading( up, file ) {
45 var hundredmb = 100 * 1024 * 1024,
46 max = parseInt( up.settings.max_file_size, 10 );
47
48 if ( max > hundredmb && file.size > hundredmb ) {
49 setTimeout( function() {
50 if ( file.status < 3 && file.loaded === 0 ) { // Not uploading.
51 wpFileError( file, pluploadL10n.big_upload_failed.replace( '%1$s', '<a class="uploader-html" href="#">' ).replace( '%2$s', '</a>' ) );
52 up.stop(); // Stop the whole queue.
53 up.removeFile( file );
54 up.start(); // Restart the queue.
55 }
56 }, 10000 ); // Wait for 10 seconds for the file to start uploading.
57 }
58}
59
60function updateMediaForm() {
61 var items = jQuery( '#media-items' ).children();
62
63 // Just one file, no need for collapsible part.
64 if ( items.length == 1 ) {
65 items.addClass( 'open' ).find( '.slidetoggle' ).show();
66 jQuery( '.insert-gallery' ).hide();
67 } else if ( items.length > 1 ) {
68 items.removeClass( 'open' );
69 // Only show Gallery/Playlist buttons when there are at least two files.
70 jQuery( '.insert-gallery' ).show();
71 }
72
73 // Only show Save buttons when there is at least one file.
74 if ( items.not( '.media-blank' ).length > 0 )
75 jQuery( '.savebutton' ).show();
76 else
77 jQuery( '.savebutton' ).hide();
78}
79
80function uploadSuccess( fileObj, serverData ) {
81 var item = jQuery( '#media-item-' + fileObj.id );
82
83 // On success serverData should be numeric,
84 // fix bug in html4 runtime returning the serverData wrapped in a <pre> tag.
85 if ( typeof serverData === 'string' ) {
86 serverData = serverData.replace( /^<pre>(\d+)<\/pre>$/, '$1' );
87
88 // If async-upload returned an error message, place it in the media item div and return.
89 if ( /media-upload-error|error-div/.test( serverData ) ) {
90 item.html( serverData );
91 return;
92 }
93 }
94
95 item.find( '.percent' ).html( pluploadL10n.crunching );
96
97 prepareMediaItem( fileObj, serverData );
98 updateMediaForm();
99
100 // Increment the counter.
101 if ( post_id && item.hasClass( 'child-of-' + post_id ) ) {
102 jQuery( '#attachments-count' ).text( 1 * jQuery( '#attachments-count' ).text() + 1 );
103 }
104}
105
106function setResize( arg ) {
107 if ( arg ) {
108 if ( window.resize_width && window.resize_height ) {
109 uploader.settings.resize = {
110 enabled: true,
111 width: window.resize_width,
112 height: window.resize_height,
113 quality: 100
114 };
115 } else {
116 uploader.settings.multipart_params.image_resize = true;
117 }
118 } else {
119 delete( uploader.settings.multipart_params.image_resize );
120 }
121}
122
123function prepareMediaItem( fileObj, serverData ) {
124 var f = ( typeof shortform == 'undefined' ) ? 1 : 2, item = jQuery( '#media-item-' + fileObj.id );
125 if ( f == 2 && shortform > 2 )
126 f = shortform;
127
128 try {
129 if ( typeof topWin.tb_remove != 'undefined' )
130 topWin.jQuery( '#TB_overlay' ).click( topWin.tb_remove );
131 } catch( e ){}
132
133 if ( isNaN( serverData ) || !serverData ) {
134 // Old style: Append the HTML returned by the server -- thumbnail and form inputs.
135 item.append( serverData );
136 prepareMediaItemInit( fileObj );
137 } else {
138 // New style: server data is just the attachment ID, fetch the thumbnail and form html from the server.
139 item.load( 'async-upload.php', {attachment_id:serverData, fetch:f}, function(){prepareMediaItemInit( fileObj );updateMediaForm();});
140 }
141}
142
143function prepareMediaItemInit( fileObj ) {
144 var item = jQuery( '#media-item-' + fileObj.id );
145 // Clone the thumbnail as a "pinkynail" -- a tiny image to the left of the filename.
146 jQuery( '.thumbnail', item ).clone().attr( 'class', 'pinkynail toggle' ).prependTo( item );
147
148 // Replace the original filename with the new (unique) one assigned during upload.
149 jQuery( '.filename.original', item ).replaceWith( jQuery( '.filename.new', item ) );
150
151 // Bind Ajax to the new Delete button.
152 jQuery( 'a.delete', item ).on( 'click', function(){
153 // Tell the server to delete it. TODO: Handle exceptions.
154 jQuery.ajax({
155 url: ajaxurl,
156 type: 'post',
157 success: deleteSuccess,
158 error: deleteError,
159 id: fileObj.id,
160 data: {
161 id : this.id.replace(/[^0-9]/g, '' ),
162 action : 'trash-post',
163 _ajax_nonce : this.href.replace(/^.*wpnonce=/,'' )
164 }
165 });
166 return false;
167 });
168
169 // Bind Ajax to the new Undo button.
170 jQuery( 'a.undo', item ).on( 'click', function(){
171 // Tell the server to untrash it. TODO: Handle exceptions.
172 jQuery.ajax({
173 url: ajaxurl,
174 type: 'post',
175 id: fileObj.id,
176 data: {
177 id : this.id.replace(/[^0-9]/g,'' ),
178 action: 'untrash-post',
179 _ajax_nonce: this.href.replace(/^.*wpnonce=/,'' )
180 },
181 success: function( ){
182 var type,
183 item = jQuery( '#media-item-' + fileObj.id );
184
185 if ( type = jQuery( '#type-of-' + fileObj.id ).val() )
186 jQuery( '#' + type + '-counter' ).text( jQuery( '#' + type + '-counter' ).text()-0+1 );
187
188 if ( post_id && item.hasClass( 'child-of-'+post_id ) )
189 jQuery( '#attachments-count' ).text( jQuery( '#attachments-count' ).text()-0+1 );
190
191 jQuery( '.filename .trashnotice', item ).remove();
192 jQuery( '.filename .title', item ).css( 'font-weight','normal' );
193 jQuery( 'a.undo', item ).addClass( 'hidden' );
194 jQuery( '.menu_order_input', item ).show();
195 item.css( {backgroundColor:'#ceb'} ).animate( {backgroundColor: '#fff'}, { queue: false, duration: 500, complete: function(){ jQuery( this ).css({backgroundColor:''}); } }).removeClass( 'undo' );
196 }
197 });
198 return false;
199 });
200
201 // Open this item if it says to start open (e.g. to display an error).
202 jQuery( '#media-item-' + fileObj.id + '.startopen' ).removeClass( 'startopen' ).addClass( 'open' ).find( 'slidetoggle' ).fadeIn();
203}
204
205// Generic error message.
206function wpQueueError( message ) {
207 jQuery( '#media-upload-error' ).show().html( '<div class="notice notice-error"><p>' + message + '</p></div>' );
208}
209
210// File-specific error messages.
211function wpFileError( fileObj, message ) {
212 itemAjaxError( fileObj.id, message );
213}
214
215function itemAjaxError( id, message ) {
216 var item = jQuery( '#media-item-' + id ), filename = item.find( '.filename' ).text(), last_err = item.data( 'last-err' );
217
218 if ( last_err == id ) // Prevent firing an error for the same file twice.
219 return;
220
221 item.html( '<div class="error-div">' +
222 '<a class="dismiss" href="#">' + pluploadL10n.dismiss + '</a>' +
223 '<strong>' + pluploadL10n.error_uploading.replace( '%s', jQuery.trim( filename )) + '</strong> ' +
224 message +
225 '</div>' ).data( 'last-err', id );
226}
227
228function deleteSuccess( data ) {
229 var type, id, item;
230 if ( data == '-1' )
231 return itemAjaxError( this.id, 'You do not have permission. Has your session expired?' );
232
233 if ( data == '0' )
234 return itemAjaxError( this.id, 'Could not be deleted. Has it been deleted already?' );
235
236 id = this.id;
237 item = jQuery( '#media-item-' + id );
238
239 // Decrement the counters.
240 if ( type = jQuery( '#type-of-' + id ).val() )
241 jQuery( '#' + type + '-counter' ).text( jQuery( '#' + type + '-counter' ).text() - 1 );
242
243 if ( post_id && item.hasClass( 'child-of-'+post_id ) )
244 jQuery( '#attachments-count' ).text( jQuery( '#attachments-count' ).text() - 1 );
245
246 if ( jQuery( 'form.type-form #media-items' ).children().length == 1 && jQuery( '.hidden', '#media-items' ).length > 0 ) {
247 jQuery( '.toggle' ).toggle();
248 jQuery( '.slidetoggle' ).slideUp( 200 ).siblings().removeClass( 'hidden' );
249 }
250
251 // Vanish it.
252 jQuery( '.toggle', item ).toggle();
253 jQuery( '.slidetoggle', item ).slideUp( 200 ).siblings().removeClass( 'hidden' );
254 item.css( {backgroundColor:'#faa'} ).animate( {backgroundColor:'#f4f4f4'}, {queue:false, duration:500} ).addClass( 'undo' );
255
256 jQuery( '.filename:empty', item ).remove();
257 jQuery( '.filename .title', item ).css( 'font-weight','bold' );
258 jQuery( '.filename', item ).append( '<span class="trashnotice"> ' + pluploadL10n.deleted + ' </span>' ).siblings( 'a.toggle' ).hide();
259 jQuery( '.filename', item ).append( jQuery( 'a.undo', item ).removeClass( 'hidden' ) );
260 jQuery( '.menu_order_input', item ).hide();
261
262 return;
263}
264
265function deleteError() {
266}
267
268function uploadComplete() {
269 jQuery( '#insert-gallery' ).prop( 'disabled', false );
270}
271
272function switchUploader( s ) {
273 if ( s ) {
274 deleteUserSetting( 'uploader' );
275 jQuery( '.media-upload-form' ).removeClass( 'html-uploader' );
276
277 if ( typeof( uploader ) == 'object' )
278 uploader.refresh();
279
280 jQuery( '#plupload-browse-button' ).trigger( 'focus' );
281 } else {
282 setUserSetting( 'uploader', '1' ); // 1 == html uploader.
283 jQuery( '.media-upload-form' ).addClass( 'html-uploader' );
284 jQuery( '#async-upload' ).trigger( 'focus' );
285 }
286}
287
288function uploadError( fileObj, errorCode, message, up ) {
289 var hundredmb = 100 * 1024 * 1024, max;
290
291 switch ( errorCode ) {
292 case plupload.FAILED:
293 wpFileError( fileObj, pluploadL10n.upload_failed );
294 break;
295 case plupload.FILE_EXTENSION_ERROR:
296 wpFileExtensionError( up, fileObj, pluploadL10n.invalid_filetype );
297 break;
298 case plupload.FILE_SIZE_ERROR:
299 uploadSizeError( up, fileObj );
300 break;
301 case plupload.IMAGE_FORMAT_ERROR:
302 wpFileError( fileObj, pluploadL10n.not_an_image );
303 break;
304 case plupload.IMAGE_MEMORY_ERROR:
305 wpFileError( fileObj, pluploadL10n.image_memory_exceeded );
306 break;
307 case plupload.IMAGE_DIMENSIONS_ERROR:
308 wpFileError( fileObj, pluploadL10n.image_dimensions_exceeded );
309 break;
310 case plupload.GENERIC_ERROR:
311 wpQueueError( pluploadL10n.upload_failed );
312 break;
313 case plupload.IO_ERROR:
314 max = parseInt( up.settings.filters.max_file_size, 10 );
315
316 if ( max > hundredmb && fileObj.size > hundredmb ) {
317 wpFileError( fileObj, pluploadL10n.big_upload_failed.replace( '%1$s', '<a class="uploader-html" href="#">' ).replace( '%2$s', '</a>' ) );
318 } else {
319 wpQueueError( pluploadL10n.io_error );
320 }
321
322 break;
323 case plupload.HTTP_ERROR:
324 wpQueueError( pluploadL10n.http_error );
325 break;
326 case plupload.INIT_ERROR:
327 jQuery( '.media-upload-form' ).addClass( 'html-uploader' );
328 break;
329 case plupload.SECURITY_ERROR:
330 wpQueueError( pluploadL10n.security_error );
331 break;
332/* case plupload.UPLOAD_ERROR.UPLOAD_STOPPED:
333 case plupload.UPLOAD_ERROR.FILE_CANCELLED:
334 jQuery( '#media-item-' + fileObj.id ).remove();
335 break;*/
336 default:
337 wpFileError( fileObj, pluploadL10n.default_error );
338 }
339}
340
341function uploadSizeError( up, file ) {
342 var message, errorDiv;
343
344 message = pluploadL10n.file_exceeds_size_limit.replace( '%s', file.name );
345
346 // Construct the error div.
347 errorDiv = jQuery( '<div />' )
348 .attr( {
349 'id': 'media-item-' + file.id,
350 'class': 'media-item error'
351 } )
352 .append(
353 jQuery( '<p />' )
354 .text( message )
355 );
356
357 // Append the error.
358 jQuery( '#media-items' ).append( errorDiv );
359 up.removeFile( file );
360}
361
362function wpFileExtensionError( up, file, message ) {
363 jQuery( '#media-items' ).append( '<div id="media-item-' + file.id + '" class="media-item error"><p>' + message + '</p></div>' );
364 up.removeFile( file );
365}
366
367/**
368 * Copies the attachment URL to the clipboard.
369 *
370 * @since 5.8.0
371 *
372 * @param {MouseEvent} event A click event.
373 *
374 * @return {void}
375 */
376function copyAttachmentUploadURLClipboard() {
377 var clipboard = new ClipboardJS( '.copy-attachment-url' ),
378 successTimeout;
379
380 clipboard.on( 'success', function( event ) {
381 var triggerElement = jQuery( event.trigger ),
382 successElement = jQuery( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
383
384 // Clear the selection and move focus back to the trigger.
385 event.clearSelection();
386 // Show success visual feedback.
387 clearTimeout( successTimeout );
388 successElement.removeClass( 'hidden' );
389 // Hide success visual feedback after 3 seconds since last success.
390 successTimeout = setTimeout( function() {
391 successElement.addClass( 'hidden' );
392 }, 3000 );
393 // Handle success audible feedback.
394 wp.a11y.speak( pluploadL10n.file_url_copied );
395 } );
396}
397
398jQuery( document ).ready( function( $ ) {
399 copyAttachmentUploadURLClipboard();
400 var tryAgainCount = {};
401 var tryAgain;
402
403 $( '.media-upload-form' ).on( 'click.uploader', function( e ) {
404 var target = $( e.target ), tr, c;
405
406 if ( target.is( 'input[type="radio"]' ) ) { // Remember the last used image size and alignment.
407 tr = target.closest( 'tr' );
408
409 if ( tr.hasClass( 'align' ) )
410 setUserSetting( 'align', target.val() );
411 else if ( tr.hasClass( 'image-size' ) )
412 setUserSetting( 'imgsize', target.val() );
413
414 } else if ( target.is( 'button.button' ) ) { // Remember the last used image link url.
415 c = e.target.className || '';
416 c = c.match( /url([^ '"]+)/ );
417
418 if ( c && c[1] ) {
419 setUserSetting( 'urlbutton', c[1] );
420 target.siblings( '.urlfield' ).val( target.data( 'link-url' ) );
421 }
422 } else if ( target.is( 'a.dismiss' ) ) {
423 target.parents( '.media-item' ).fadeOut( 200, function() {
424 $( this ).remove();
425 } );
426 } else if ( target.is( '.upload-flash-bypass button' ) || target.is( 'a.uploader-html' ) ) { // Switch uploader to html4.
427 $( '#media-items, p.submit, span.big-file-warning' ).css( 'display', 'none' );
428 switchUploader( 0 );
429 e.preventDefault();
430 } else if ( target.is( '.upload-html-bypass button' ) ) { // Switch uploader to multi-file.
431 $( '#media-items, p.submit, span.big-file-warning' ).css( 'display', '' );
432 switchUploader( 1 );
433 e.preventDefault();
434 } else if ( target.is( 'a.describe-toggle-on' ) ) { // Show.
435 target.parent().addClass( 'open' );
436 target.siblings( '.slidetoggle' ).fadeIn( 250, function() {
437 var S = $( window ).scrollTop(),
438 H = $( window ).height(),
439 top = $( this ).offset().top,
440 h = $( this ).height(),
441 b,
442 B;
443
444 if ( H && top && h ) {
445 b = top + h;
446 B = S + H;
447
448 if ( b > B ) {
449 if ( b - B < top - S )
450 window.scrollBy( 0, ( b - B ) + 10 );
451 else
452 window.scrollBy( 0, top - S - 40 );
453 }
454 }
455 } );
456
457 e.preventDefault();
458 } else if ( target.is( 'a.describe-toggle-off' ) ) { // Hide.
459 target.siblings( '.slidetoggle' ).fadeOut( 250, function() {
460 target.parent().removeClass( 'open' );
461 } );
462
463 e.preventDefault();
464 }
465 });
466
467 // Attempt to create image sub-sizes when an image was uploaded successfully
468 // but the server responded with an HTTP 5xx error.
469 tryAgain = function( up, error ) {
470 var file = error.file;
471 var times;
472 var id;
473
474 if ( ! error || ! error.responseHeaders ) {
475 wpQueueError( pluploadL10n.http_error_image );
476 return;
477 }
478
479 id = error.responseHeaders.match( /x-wp-upload-attachment-id:\s*(\d+)/i );
480
481 if ( id && id[1] ) {
482 id = id[1];
483 } else {
484 wpQueueError( pluploadL10n.http_error_image );
485 return;
486 }
487
488 times = tryAgainCount[ file.id ];
489
490 if ( times && times > 4 ) {
491 /*
492 * The file may have been uploaded and attachment post created,
493 * but post-processing and resizing failed...
494 * Do a cleanup then tell the user to scale down the image and upload it again.
495 */
496 $.ajax({
497 type: 'post',
498 url: ajaxurl,
499 dataType: 'json',
500 data: {
501 action: 'media-create-image-subsizes',
502 _wpnonce: wpUploaderInit.multipart_params._wpnonce,
503 attachment_id: id,
504 _wp_upload_failed_cleanup: true,
505 }
506 });
507
508 if ( error.message && ( error.status < 500 || error.status >= 600 ) ) {
509 wpQueueError( error.message );
510 } else {
511 wpQueueError( pluploadL10n.http_error_image );
512 }
513
514 return;
515 }
516
517 if ( ! times ) {
518 tryAgainCount[ file.id ] = 1;
519 } else {
520 tryAgainCount[ file.id ] = ++times;
521 }
522
523 // Try to create the missing image sizes.
524 $.ajax({
525 type: 'post',
526 url: ajaxurl,
527 dataType: 'json',
528 data: {
529 action: 'media-create-image-subsizes',
530 _wpnonce: wpUploaderInit.multipart_params._wpnonce,
531 attachment_id: id,
532 _legacy_support: 'true',
533 }
534 }).done( function( response ) {
535 var message;
536
537 if ( response.success ) {
538 uploadSuccess( file, response.data.id );
539 } else {
540 if ( response.data && response.data.message ) {
541 message = response.data.message;
542 }
543
544 wpQueueError( message || pluploadL10n.http_error_image );
545 }
546 }).fail( function( jqXHR ) {
547 // If another HTTP 5xx error, try try again...
548 if ( jqXHR.status >= 500 && jqXHR.status < 600 ) {
549 tryAgain( up, error );
550 return;
551 }
552
553 wpQueueError( pluploadL10n.http_error_image );
554 });
555 }
556
557 // Init and set the uploader.
558 uploader_init = function() {
559 uploader = new plupload.Uploader( wpUploaderInit );
560
561 $( '#image_resize' ).on( 'change', function() {
562 var arg = $( this ).prop( 'checked' );
563
564 setResize( arg );
565
566 if ( arg )
567 setUserSetting( 'upload_resize', '1' );
568 else
569 deleteUserSetting( 'upload_resize' );
570 });
571
572 uploader.bind( 'Init', function( up ) {
573 var uploaddiv = $( '#plupload-upload-ui' );
574
575 setResize( getUserSetting( 'upload_resize', false ) );
576
577 if ( up.features.dragdrop && ! $( document.body ).hasClass( 'mobile' ) ) {
578 uploaddiv.addClass( 'drag-drop' );
579
580 $( '#drag-drop-area' ).on( 'dragover.wp-uploader', function() { // dragenter doesn't fire right :(
581 uploaddiv.addClass( 'drag-over' );
582 }).on( 'dragleave.wp-uploader, drop.wp-uploader', function() {
583 uploaddiv.removeClass( 'drag-over' );
584 });
585 } else {
586 uploaddiv.removeClass( 'drag-drop' );
587 $( '#drag-drop-area' ).off( '.wp-uploader' );
588 }
589
590 if ( up.runtime === 'html4' ) {
591 $( '.upload-flash-bypass' ).hide();
592 }
593 });
594
595 uploader.bind( 'postinit', function( up ) {
596 up.refresh();
597 });
598
599 uploader.init();
600
601 uploader.bind( 'FilesAdded', function( up, files ) {
602 $( '#media-upload-error' ).empty();
603 uploadStart();
604
605 plupload.each( files, function( file ) {
606 if ( file.type === 'image/heic' && up.settings.heic_upload_error ) {
607 // Show error but do not block uploading.
608 wpQueueError( pluploadL10n.unsupported_image );
609 } else if ( file.type === 'image/webp' && up.settings.webp_upload_error ) {
610 // Disallow uploading of WebP images if the server cannot edit them.
611 wpQueueError( pluploadL10n.noneditable_image );
612 up.removeFile( file );
613 return;
614 } else if ( file.type === 'image/avif' && up.settings.avif_upload_error ) {
615 // Disallow uploading of AVIF images if the server cannot edit them.
616 wpQueueError( pluploadL10n.noneditable_image );
617 up.removeFile( file );
618 return;
619 }
620
621 fileQueued( file );
622 });
623
624 up.refresh();
625 up.start();
626 });
627
628 uploader.bind( 'UploadFile', function( up, file ) {
629 fileUploading( up, file );
630 });
631
632 uploader.bind( 'UploadProgress', function( up, file ) {
633 uploadProgress( up, file );
634 });
635
636 uploader.bind( 'Error', function( up, error ) {
637 var isImage = error.file && error.file.type && error.file.type.indexOf( 'image/' ) === 0;
638 var status = error && error.status;
639
640 // If the file is an image and the error is HTTP 5xx try to create sub-sizes again.
641 if ( isImage && status >= 500 && status < 600 ) {
642 tryAgain( up, error );
643 return;
644 }
645
646 uploadError( error.file, error.code, error.message, up );
647 up.refresh();
648 });
649
650 uploader.bind( 'FileUploaded', function( up, file, response ) {
651 uploadSuccess( file, response.response );
652 });
653
654 uploader.bind( 'UploadComplete', function() {
655 uploadComplete();
656 });
657 };
658
659 if ( typeof( wpUploaderInit ) == 'object' ) {
660 uploader_init();
661 }
662
663});
664