2 * JavaScript for Special:Upload
3 * Note that additional code still lives in skins/common/upload.js
7 * Add a preview to the upload form
9 jQuery( function( $ ) {
11 * Is the FileAPI available with sufficient functionality?
13 function hasFileAPI(){
14 return typeof window
.FileReader
!== 'undefined';
18 * Check if this is a recognizable image type...
19 * Also excludes files over 10M to avoid going insane on memory usage.
21 * @todo is there a way we can ask the browser what's supported in <img>s?
22 * @todo put SVG back after working around Firefox 7 bug <https://bugzilla.wikimedia.org/show_bug.cgi?id=31643>
27 function fileIsPreviewable( file
) {
28 var known
= ['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml'],
29 tooHuge
= 10 * 1024 * 1024;
30 return ( $.inArray( file
.type
, known
) !== -1 ) && file
.size
> 0 && file
.size
< tooHuge
;
34 * Show a thumbnail preview of PNG, JPEG, GIF, and SVG files prior to upload
35 * in browsers supporting HTML5 FileAPI.
37 * As of this writing, known good:
39 * - Chrome 7.something
41 * @todo check file size limits and warn of likely failures
45 function showPreview( file
) {
46 var previewSize
= 180,
47 thumb
= $( '<div id="mw-upload-thumbnail" class="thumb tright">' +
48 '<div class="thumbinner">' +
49 '<div class="mw-small-spinner" style="width: 180px; height: 180px"></div>' +
50 '<div class="thumbcaption"><div class="filename"></div><div class="fileinfo"></div></div>' +
53 thumb
.find( '.filename' ).text( file
.name
).end()
54 .find( '.fileinfo' ).text( prettySize( file
.size
) ).end();
56 var $canvas
= $('<canvas width="' + previewSize
+ '" height="' + previewSize
+ '" ></canvas>'),
57 ctx
= $canvas
[0].getContext( '2d' );
58 $( '#mw-htmlform-source' ).parent().prepend( thumb
);
61 fetchPreview( file
, function( dataURL
) {
62 var img
= new Image(),
65 if ( meta
&& meta
.tiff
&& meta
.tiff
.Orientation
) {
66 rotation
= (360 - function () {
67 // See includes/media/Bitmap.php
68 switch ( meta
.tiff
.Orientation
.value
) {
81 img
.onload = function() {
82 var width
, height
, x
, y
, dx
, dy
, logicalWidth
, logicalHeight
;
83 // Fit the image within the previewSizexpreviewSize box
84 if ( img
.width
> img
.height
) {
86 height
= img
.height
/ img
.width
* previewSize
;
89 width
= img
.width
/ img
.height
* previewSize
;
91 // Determine the offset required to center the image
92 dx
= (180 - width
) / 2;
93 dy
= (180 - height
) / 2;
95 // If a rotation is applied, the direction of the axis
96 // changes as well. You can derive the values below by
97 // drawing on paper an axis system, rotate it and see
98 // where the positive axis direction is
102 logicalWidth
= img
.width
;
103 logicalHeight
= img
.height
;
108 y
= dy
- previewSize
;
109 logicalWidth
= img
.height
;
110 logicalHeight
= img
.width
;
113 x
= dx
- previewSize
;
114 y
= dy
- previewSize
;
115 logicalWidth
= img
.width
;
116 logicalHeight
= img
.height
;
119 x
= dx
- previewSize
;
121 logicalWidth
= img
.height
;
122 logicalHeight
= img
.width
;
126 ctx
.clearRect( 0, 0, 180, 180 );
127 ctx
.rotate( rotation
/ 180 * Math
.PI
);
128 ctx
.drawImage( img
, x
, y
, width
, height
);
129 thumb
.find('.mw-small-spinner').replaceWith($canvas
);
132 var info
= mw
.msg( 'widthheight', logicalWidth
, logicalHeight
) +
133 ', ' + prettySize( file
.size
);
134 $( '#mw-upload-thumbnail .fileinfo' ).text( info
);
137 }, mw
.config
.get( 'wgFileCanRotate' ) ? function ( data
) {
139 meta
= mw
.libs
.jpegmeta( data
, file
.fileName
);
140 meta
._binary_data
= null;
148 * Start loading a file into memory; when complete, pass it as a
149 * data URL to the callback function. If the callbackBinary is set it will
150 * first be read as binary and afterwards as data URL. Useful if you want
151 * to do preprocessing on the binary data first.
154 * @param {function} callback
155 * @param {function} callbackBinary
157 function fetchPreview( file
, callback
, callbackBinary
) {
158 var reader
= new FileReader();
159 if ( callbackBinary
&& 'readAsBinaryString' in reader
) {
160 // To fetch JPEG metadata we need a binary string; start there.
162 reader
.onload = function() {
163 callbackBinary( reader
.result
);
165 // Now run back through the regular code path.
166 fetchPreview( file
, callback
);
168 reader
.readAsBinaryString( file
);
169 } else if ( callbackBinary
&& 'readAsArrayBuffer' in reader
) {
170 // readAsArrayBuffer replaces readAsBinaryString
171 // However, our JPEG metadata library wants a string.
172 // So, this is going to be an ugly conversion.
173 reader
.onload = function() {
174 var buffer
= new Uint8Array( reader
.result
),
176 for ( var i
= 0; i
< buffer
.byteLength
; i
++ ) {
177 string
+= String
.fromCharCode( buffer
[i
] );
179 callbackBinary( string
);
181 // Now run back through the regular code path.
182 fetchPreview( file
, callback
);
184 reader
.readAsArrayBuffer( file
);
185 } else if ( 'URL' in window
&& 'createObjectURL' in window
.URL
) {
186 // Supported in Firefox 4.0 and above <https://developer.mozilla.org/en/DOM/window.URL.createObjectURL>
187 // WebKit has it in a namespace for now but that's ok. ;)
189 // Lifetime of this URL is until document close, which is fine
190 // for Special:Upload -- if this code gets used on longer-running
191 // pages, add a revokeObjectURL() when it's no longer needed.
193 // Prefer this over readAsDataURL for Firefox 7 due to bug reading
194 // some SVG files from data URIs <https://bugzilla.mozilla.org/show_bug.cgi?id=694165>
195 callback( window
.URL
.createObjectURL( file
) );
197 // This ends up decoding the file to base-64 and back again, which
198 // feels horribly inefficient.
199 reader
.onload = function() {
200 callback( reader
.result
);
202 reader
.readAsDataURL( file
);
207 * Format a file size attractively.
208 * @todo match numeric formatting
213 function prettySize( s
) {
214 var sizes
= ['size-bytes', 'size-kilobytes', 'size-megabytes', 'size-gigabytes'];
215 while ( s
>= 1024 && sizes
.length
> 1 ) {
217 sizes
= sizes
.slice( 1 );
219 return mw
.msg( sizes
[0], Math
.round( s
) );
223 * Clear the file upload preview area.
225 function clearPreview() {
226 $( '#mw-upload-thumbnail' ).remove();
230 * Check if the file does not exceed the maximum size
232 function checkMaxUploadSize( file
) {
233 function getMaxUploadSize( type
) {
234 var sizes
= mw
.config
.get( 'wgMaxUploadSize' );
235 if ( sizes
[type
] !== undefined ) {
240 $( '.mw-upload-source-error' ).remove();
242 var maxSize
= getMaxUploadSize( 'file' );
243 if ( file
.size
> maxSize
) {
244 var error
= $( '<p class="error mw-upload-source-error" id="wpSourceTypeFile-error">' +
245 mw
.message( 'largefileserver', file
.size
, maxSize
).escaped() + '</p>' );
246 $( '#wpUploadFile' ).after( error
);
256 if ( hasFileAPI() ) {
257 // Update thumbnail when the file selection control is updated.
258 $( '#wpUploadFile' ).change( function() {
260 if ( this.files
&& this.files
.length
) {
261 // Note: would need to be updated to handle multiple files.
262 var file
= this.files
[0];
264 if ( !checkMaxUploadSize( file
) ) {
268 if ( fileIsPreviewable( file
) ) {
277 * Disable all upload source fields except the selected one
279 jQuery( function ( $ ) {
280 var rows
= $( '.mw-htmlform-field-UploadSourceField' );
281 for ( var i
= rows
.length
; i
; i
-- ) {
282 var row
= rows
[i
- 1];
283 $( 'input[name="wpSourceType"]', row
).change( function () {
284 var currentRow
= row
; // Store current row in our own scope
286 $( '.mw-upload-source-error' ).remove();
287 if ( this.checked
) {
288 // Disable all inputs
289 $( 'input[name!="wpSourceType"]', rows
).prop( 'disabled', 'disabled' );
290 // Re-enable the current one
291 $( 'input', currentRow
).prop( 'disabled', false );