2 * JavaScript for Special:Upload
5 * @class mw.special.upload
9 /* eslint-disable no-use-before-define */
10 /* global Uint8Array */
12 ( function ( mw
, $ ) {
13 var uploadWarning
, uploadLicense
,
14 ajaxUploadDestCheck
= mw
.config
.get( 'wgAjaxUploadDestCheck' ),
15 $license
= $( '#wpLicense' );
17 window
.wgUploadWarningObj
= uploadWarning
= {
18 responseCache
: { '': ' ' },
24 keypress: function () {
25 if ( !ajaxUploadDestCheck
) {
29 // Find file to upload
30 if ( !$( '#wpDestFile' ).length
|| !$( '#wpDestFile-warning' ).length
) {
34 this.nameToCheck
= $( '#wpDestFile' ).val();
37 if ( this.timeoutID
) {
38 clearTimeout( this.timeoutID
);
40 // Check response cache
41 if ( this.responseCache
.hasOwnProperty( this.nameToCheck
) ) {
42 this.setWarning( this.responseCache
[ this.nameToCheck
] );
46 this.timeoutID
= setTimeout( function () {
47 uploadWarning
.timeout();
51 checkNow: function ( fname
) {
52 if ( !ajaxUploadDestCheck
) {
55 if ( this.timeoutID
) {
56 clearTimeout( this.timeoutID
);
58 this.nameToCheck
= fname
;
62 timeout: function () {
63 var $spinnerDestCheck
, title
;
64 if ( !ajaxUploadDestCheck
|| this.nameToCheck
=== '' ) {
67 $spinnerDestCheck
= $.createSpinner().insertAfter( '#wpDestFile' );
68 title
= mw
.Title
.newFromText( this.nameToCheck
, mw
.config
.get( 'wgNamespaceIds' ).file
);
70 ( new mw
.Api() ).get( {
73 // If title is empty, user input is invalid, the API call will produce details about why
74 titles
: title
? title
.getPrefixedText() : this.nameToCheck
,
76 iiprop
: 'uploadwarning'
77 } ).done( function ( result
) {
80 page
= result
.query
.pages
[ 0 ];
81 if ( page
.imageinfo
) {
82 resultOut
= page
.imageinfo
[ 0 ].html
;
83 } else if ( page
.invalidreason
) {
84 resultOut
= mw
.html
.escape( page
.invalidreason
);
86 uploadWarning
.processResult( resultOut
, uploadWarning
.nameToCheck
);
87 } ).always( function () {
88 $spinnerDestCheck
.remove();
92 processResult: function ( result
, fileName
) {
93 this.setWarning( result
);
94 this.responseCache
[ fileName
] = result
;
97 setWarning: function ( warning
) {
98 var $warningBox
= $( '#wpDestFile-warning' ),
99 $warning
= $( $.parseHTML( warning
) );
100 mw
.hook( 'wikipage.content' ).fire( $warning
);
101 $warningBox
.empty().append( $warning
);
103 // Set a value in the form indicating that the warning is acknowledged and
104 // doesn't need to be redisplayed post-upload
106 $( '#wpDestFileWarningAck' ).val( '' );
107 $warningBox
.removeAttr( 'class' );
109 $( '#wpDestFileWarningAck' ).val( '1' );
110 $warningBox
.attr( 'class', 'mw-destfile-warning' );
118 responseCache
: { '': '' },
120 fetchPreview: function ( license
) {
122 if ( !mw
.config
.get( 'wgAjaxLicensePreview' ) ) {
125 if ( this.responseCache
.hasOwnProperty( license
) ) {
126 this.showPreview( this.responseCache
[ license
] );
130 $spinnerLicense
= $.createSpinner().insertAfter( '#wpLicense' );
132 ( new mw
.Api() ).get( {
135 text
: '{{' + license
+ '}}',
136 title
: $( '#wpDestFile' ).val() || 'File:Sample.jpg',
139 } ).done( function ( result
) {
140 uploadLicense
.processResult( result
, license
);
141 } ).always( function () {
142 $spinnerLicense
.remove();
146 processResult: function ( result
, license
) {
147 this.responseCache
[ license
] = result
.parse
.text
;
148 this.showPreview( this.responseCache
[ license
] );
151 showPreview: function ( preview
) {
152 $( '#mw-license-preview' ).html( preview
);
158 // AJAX wpDestFile warnings
159 if ( ajaxUploadDestCheck
) {
160 // Insert an event handler that fetches upload warnings when wpDestFile
162 $( '#wpDestFile' ).change( function () {
163 uploadWarning
.checkNow( $( this ).val() );
165 // Insert a row where the warnings will be displayed just below the
167 $( '#mw-htmlform-description tbody' ).append(
170 .attr( 'id', 'wpDestFile-warning' )
171 .attr( 'colspan', 2 )
176 if ( mw
.config
.get( 'wgAjaxLicensePreview' ) && $license
.length
) {
177 // License selector check
178 $license
.change( function () {
179 // We might show a preview
180 uploadLicense
.fetchPreview( $license
.val() );
183 // License selector table row
184 $license
.closest( 'tr' ).after(
187 $( '<td>' ).attr( 'id', 'mw-license-preview' )
192 // fillDestFile setup
193 $.each( mw
.config
.get( 'wgUploadSourceIds' ), function ( index
, sourceId
) {
194 $( '#' + sourceId
).change( function () {
195 var path
, slash
, backslash
, fname
;
196 if ( !mw
.config
.get( 'wgUploadAutoFill' ) ) {
199 // Remove any previously flagged errors
200 $( '#mw-upload-permitted' ).attr( 'class', '' );
201 $( '#mw-upload-prohibited' ).attr( 'class', '' );
203 path
= $( this ).val();
204 // Find trailing part
205 slash
= path
.lastIndexOf( '/' );
206 backslash
= path
.lastIndexOf( '\\' );
207 if ( slash
=== -1 && backslash
=== -1 ) {
209 } else if ( slash
> backslash
) {
210 fname
= path
.slice( slash
+ 1 );
212 fname
= path
.slice( backslash
+ 1 );
215 // Clear the filename if it does not have a valid extension.
216 // URLs are less likely to have a useful extension, so don't include them in the
219 mw
.config
.get( 'wgCheckFileExtensions' ) &&
220 mw
.config
.get( 'wgStrictFileExtensions' ) &&
221 mw
.config
.get( 'wgFileExtensions' ) &&
222 $( this ).attr( 'id' ) !== 'wpUploadFileURL'
225 fname
.lastIndexOf( '.' ) === -1 ||
227 fname
.slice( fname
.lastIndexOf( '.' ) + 1 ).toLowerCase(),
228 $.map( mw
.config
.get( 'wgFileExtensions' ), function ( element
) {
229 return element
.toLowerCase();
233 // Not a valid extension
234 // Clear the upload and set mw-upload-permitted to error
236 $( '#mw-upload-permitted' ).attr( 'class', 'error' );
237 $( '#mw-upload-prohibited' ).attr( 'class', 'error' );
238 // Clear wpDestFile as well
239 $( '#wpDestFile' ).val( '' );
245 // Replace spaces by underscores
246 fname
= fname
.replace( / /g
, '_' );
247 // Capitalise first letter if needed
248 if ( mw
.config
.get( 'wgCapitalizeUploads' ) ) {
249 fname
= fname
[ 0 ].toUpperCase() + fname
.slice( 1 );
253 if ( $( '#wpDestFile' ).length
) {
254 // Call decodeURIComponent function to remove possible URL-encoded characters
255 // from the file name (T32390). Especially likely with upload-form-url.
256 // decodeURIComponent can throw an exception if input is invalid utf-8
258 $( '#wpDestFile' ).val( decodeURIComponent( fname
) );
260 $( '#wpDestFile' ).val( fname
);
262 uploadWarning
.checkNow( fname
);
268 // Add a preview to the upload form
271 * Is the FileAPI available with sufficient functionality?
275 function hasFileAPI() {
276 return window
.FileReader
!== undefined;
280 * Check if this is a recognizable image type...
281 * Also excludes files over 10M to avoid going insane on memory usage.
283 * TODO: Is there a way we can ask the browser what's supported in `<img>`s?
285 * TODO: Put SVG back after working around Firefox 7 bug <https://phabricator.wikimedia.org/T33643>
290 function fileIsPreviewable( file
) {
291 var known
= [ 'image/png', 'image/gif', 'image/jpeg', 'image/svg+xml' ],
292 tooHuge
= 10 * 1024 * 1024;
293 return ( $.inArray( file
.type
, known
) !== -1 ) && file
.size
> 0 && file
.size
< tooHuge
;
297 * Format a file size attractively.
299 * TODO: Match numeric formatting
304 function prettySize( s
) {
305 var sizeMsgs
= [ 'size-bytes', 'size-kilobytes', 'size-megabytes', 'size-gigabytes' ];
306 while ( s
>= 1024 && sizeMsgs
.length
> 1 ) {
308 sizeMsgs
= sizeMsgs
.slice( 1 );
310 return mw
.msg( sizeMsgs
[ 0 ], Math
.round( s
) );
314 * Show a thumbnail preview of PNG, JPEG, GIF, and SVG files prior to upload
315 * in browsers supporting HTML5 FileAPI.
317 * As of this writing, known good:
320 * - Chrome 7.something
322 * TODO: Check file size limits and warn of likely failures
326 function showPreview( file
) {
331 $spinner
= $.createSpinner( { size
: 'small', type
: 'block' } )
332 .css( { width
: previewSize
, height
: previewSize
} ),
333 thumb
= mw
.template
.get( 'mediawiki.special.upload', 'thumbnail.html' ).render();
336 .find( '.filename' ).text( file
.name
).end()
337 .find( '.fileinfo' ).text( prettySize( file
.size
) ).end()
338 .find( '.thumbinner' ).prepend( $spinner
).end();
340 $canvas
= $( '<canvas>' ).attr( { width
: previewSize
, height
: previewSize
} );
341 ctx
= $canvas
[ 0 ].getContext( '2d' );
342 $( '#mw-htmlform-source' ).parent().prepend( thumb
);
344 fetchPreview( file
, function ( dataURL
) {
345 var img
= new Image(),
348 if ( meta
&& meta
.tiff
&& meta
.tiff
.Orientation
) {
349 rotation
= ( 360 - ( function () {
350 // See includes/media/Bitmap.php
351 switch ( meta
.tiff
.Orientation
.value
) {
364 img
.onload = function () {
365 var info
, width
, height
, x
, y
, dx
, dy
, logicalWidth
, logicalHeight
;
367 // Fit the image within the previewSizexpreviewSize box
368 if ( img
.width
> img
.height
) {
370 height
= img
.height
/ img
.width
* previewSize
;
372 height
= previewSize
;
373 width
= img
.width
/ img
.height
* previewSize
;
375 // Determine the offset required to center the image
376 dx
= ( 180 - width
) / 2;
377 dy
= ( 180 - height
) / 2;
378 switch ( rotation
) {
379 // If a rotation is applied, the direction of the axis
380 // changes as well. You can derive the values below by
381 // drawing on paper an axis system, rotate it and see
382 // where the positive axis direction is
386 logicalWidth
= img
.width
;
387 logicalHeight
= img
.height
;
392 y
= dy
- previewSize
;
393 logicalWidth
= img
.height
;
394 logicalHeight
= img
.width
;
397 x
= dx
- previewSize
;
398 y
= dy
- previewSize
;
399 logicalWidth
= img
.width
;
400 logicalHeight
= img
.height
;
403 x
= dx
- previewSize
;
405 logicalWidth
= img
.height
;
406 logicalHeight
= img
.width
;
410 ctx
.clearRect( 0, 0, 180, 180 );
411 ctx
.rotate( rotation
/ 180 * Math
.PI
);
412 ctx
.drawImage( img
, x
, y
, width
, height
);
413 $spinner
.replaceWith( $canvas
);
416 info
= mw
.msg( 'widthheight', logicalWidth
, logicalHeight
) +
417 ', ' + prettySize( file
.size
);
419 $( '#mw-upload-thumbnail .fileinfo' ).text( info
);
421 img
.onerror = function () {
422 // Can happen for example for invalid SVG files
426 }, mw
.config
.get( 'wgFileCanRotate' ) ? function ( data
) {
428 meta
= mw
.libs
.jpegmeta( data
, file
.fileName
);
429 // eslint-disable-next-line no-underscore-dangle, camelcase
430 meta
._binary_data
= null;
438 * Start loading a file into memory; when complete, pass it as a
439 * data URL to the callback function. If the callbackBinary is set it will
440 * first be read as binary and afterwards as data URL. Useful if you want
441 * to do preprocessing on the binary data first.
444 * @param {Function} callback
445 * @param {Function} callbackBinary
447 function fetchPreview( file
, callback
, callbackBinary
) {
448 var reader
= new FileReader();
449 if ( callbackBinary
&& 'readAsBinaryString' in reader
) {
450 // To fetch JPEG metadata we need a binary string; start there.
452 reader
.onload = function () {
453 callbackBinary( reader
.result
);
455 // Now run back through the regular code path.
456 fetchPreview( file
, callback
);
458 reader
.readAsBinaryString( file
);
459 } else if ( callbackBinary
&& 'readAsArrayBuffer' in reader
) {
460 // readAsArrayBuffer replaces readAsBinaryString
461 // However, our JPEG metadata library wants a string.
462 // So, this is going to be an ugly conversion.
463 reader
.onload = function () {
465 buffer
= new Uint8Array( reader
.result
),
467 for ( i
= 0; i
< buffer
.byteLength
; i
++ ) {
468 string
+= String
.fromCharCode( buffer
[ i
] );
470 callbackBinary( string
);
472 // Now run back through the regular code path.
473 fetchPreview( file
, callback
);
475 reader
.readAsArrayBuffer( file
);
476 } else if ( 'URL' in window
&& 'createObjectURL' in window
.URL
) {
477 // Supported in Firefox 4.0 and above <https://developer.mozilla.org/en/DOM/window.URL.createObjectURL>
478 // WebKit has it in a namespace for now but that's ok. ;)
480 // Lifetime of this URL is until document close, which is fine
481 // for Special:Upload -- if this code gets used on longer-running
482 // pages, add a revokeObjectURL() when it's no longer needed.
484 // Prefer this over readAsDataURL for Firefox 7 due to bug reading
485 // some SVG files from data URIs <https://bugzilla.mozilla.org/show_bug.cgi?id=694165>
486 callback( window
.URL
.createObjectURL( file
) );
488 // This ends up decoding the file to base-64 and back again, which
489 // feels horribly inefficient.
490 reader
.onload = function () {
491 callback( reader
.result
);
493 reader
.readAsDataURL( file
);
498 * Clear the file upload preview area.
500 function clearPreview() {
501 $( '#mw-upload-thumbnail' ).remove();
505 * Check if the file does not exceed the maximum size
510 function checkMaxUploadSize( file
) {
513 function getMaxUploadSize( type
) {
514 var sizes
= mw
.config
.get( 'wgMaxUploadSize' );
516 if ( sizes
[ type
] !== undefined ) {
517 return sizes
[ type
];
522 $( '.mw-upload-source-error' ).remove();
524 maxSize
= getMaxUploadSize( 'file' );
525 if ( file
.size
> maxSize
) {
526 $error
= $( '<p class="error mw-upload-source-error" id="wpSourceTypeFile-error">' +
527 mw
.message( 'largefileserver', file
.size
, maxSize
).escaped() + '</p>' );
529 $( '#wpUploadFile' ).after( $error
);
538 if ( hasFileAPI() ) {
539 // Update thumbnail when the file selection control is updated.
540 $( '#wpUploadFile' ).change( function () {
543 if ( this.files
&& this.files
.length
) {
544 // Note: would need to be updated to handle multiple files.
545 file
= this.files
[ 0 ];
547 if ( !checkMaxUploadSize( file
) ) {
551 if ( fileIsPreviewable( file
) ) {
559 // Disable all upload source fields except the selected one
561 var $rows
= $( '.mw-htmlform-field-UploadSourceField' );
563 $rows
.on( 'change', 'input[type="radio"]', function ( e
) {
564 var currentRow
= e
.delegateTarget
;
566 if ( !this.checked
) {
570 $( '.mw-upload-source-error' ).remove();
572 // Enable selected upload method
573 $( currentRow
).find( 'input' ).prop( 'disabled', false );
575 // Disable inputs of other upload methods
576 // (except for the radio button to re-enable it)
579 .find( 'input[type!="radio"]' )
580 .prop( 'disabled', true );
584 if ( !$( '#wpSourceTypeurl' ).prop( 'checked' ) ) {
585 $( '#wpUploadFileURL' ).prop( 'disabled', true );
590 // Prevent losing work
591 var allowCloseWindow
,
592 $uploadForm
= $( '#mw-upload-form' );
594 if ( !mw
.user
.options
.get( 'useeditwarning' ) ) {
595 // If the user doesn't want edit warnings, don't set things up.
599 $uploadForm
.data( 'origtext', $uploadForm
.serialize() );
601 allowCloseWindow
= mw
.confirmCloseWindow( {
603 return $( '#wpUploadFile' ).get( 0 ).files
.length
!== 0 ||
604 $uploadForm
.data( 'origtext' ) !== $uploadForm
.serialize();
607 message
: mw
.msg( 'editwarning-warning' ),
608 namespace: 'uploadwarning'
611 $uploadForm
.submit( function () {
612 allowCloseWindow
.release();
615 }( mediaWiki
, jQuery
) );