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'],
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 '<canvas width="' + previewSize
+ '" height="' + previewSize
+ '" ></canvas>' +
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 ctx
= thumb
.find( 'canvas' )[0].getContext( '2d' ),
57 spinner
= new Image();
58 spinner
.onload = function() {
59 ctx
.drawImage( spinner
, (previewSize
- spinner
.width
) / 2,
60 (previewSize
- spinner
.height
) / 2 );
62 spinner
.src
= mw
.config
.get( 'wgScriptPath' ) + '/skins/common/images/spinner.gif';
63 $( '#mw-htmlform-source' ).parent().prepend( thumb
);
66 fetchPreview( file
, function( dataURL
) {
67 var img
= new Image(),
70 if ( meta
&& meta
.tiff
&& meta
.tiff
.Orientation
) {
71 rotation
= (360 - function () {
72 // See includes/media/Bitmap.php
73 switch ( meta
.tiff
.Orientation
.value
) {
86 img
.onload = function() {
87 var width
, height
, x
, y
, dx
, dy
, logicalWidth
, logicalHeight
;
88 // Fit the image within the previewSizexpreviewSize box
89 if ( img
.width
> img
.height
) {
91 height
= img
.height
/ img
.width
* previewSize
;
94 width
= img
.width
/ img
.height
* previewSize
;
96 // Determine the offset required to center the image
97 dx
= (180 - width
) / 2;
98 dy
= (180 - height
) / 2;
100 // If a rotation is applied, the direction of the axis
101 // changes as well. You can derive the values below by
102 // drawing on paper an axis system, rotate it and see
103 // where the positive axis direction is
107 logicalWidth
= img
.width
;
108 logicalHeight
= img
.height
;
113 y
= dy
- previewSize
;
114 logicalWidth
= img
.height
;
115 logicalHeight
= img
.width
;
118 x
= dx
- previewSize
;
119 y
= dy
- previewSize
;
120 logicalWidth
= img
.width
;
121 logicalHeight
= img
.height
;
124 x
= dx
- previewSize
;
126 logicalWidth
= img
.height
;
127 logicalHeight
= img
.width
;
131 ctx
.clearRect( 0, 0, 180, 180 );
132 ctx
.rotate( rotation
/ 180 * Math
.PI
);
133 ctx
.drawImage( img
, x
, y
, width
, height
);
136 var info
= mw
.msg( 'widthheight', logicalWidth
, logicalHeight
) +
137 ', ' + prettySize( file
.size
);
138 $( '#mw-upload-thumbnail .fileinfo' ).text( info
);
141 }, mw
.config
.get( 'wgFileCanRotate' ) ? function ( data
) {
143 meta
= mw
.libs
.jpegmeta( data
, file
.fileName
);
144 meta
._binary_data
= null;
152 * Start loading a file into memory; when complete, pass it as a
153 * data URL to the callback function. If the callbackBinary is set it will
154 * first be read as binary and afterwards as data URL. Useful if you want
155 * to do preprocessing on the binary data first.
158 * @param {function} callback
159 * @param {function} callbackBinary
161 function fetchPreview( file
, callback
, callbackBinary
) {
162 var reader
= new FileReader();
163 reader
.onload = function() {
164 if ( callbackBinary
) {
165 callbackBinary( reader
.result
);
166 reader
.onload = function() {
167 callback( reader
.result
);
169 reader
.readAsDataURL( file
);
171 callback( reader
.result
);
174 if ( callbackBinary
) {
175 reader
.readAsBinaryString( file
);
177 reader
.readAsDataURL( file
);
182 * Format a file size attractively.
183 * @todo match numeric formatting
188 function prettySize( s
) {
189 var sizes
= ['size-bytes', 'size-kilobytes', 'size-megabytes', 'size-gigabytes'];
190 while ( s
>= 1024 && sizes
.length
> 1 ) {
192 sizes
= sizes
.slice( 1 );
194 return mw
.msg( sizes
[0], Math
.round( s
) );
198 * Clear the file upload preview area.
200 function clearPreview() {
201 $( '#mw-upload-thumbnail' ).remove();
205 * Check if the file does not exceed the maximum size
207 function checkMaxUploadSize( file
) {
208 function getMaxUploadSize( type
) {
209 var sizes
= mw
.config
.get( 'wgMaxUploadSize' );
210 if ( sizes
[type
] !== undefined ) {
215 $( '.mw-upload-source-error' ).remove();
217 var maxSize
= getMaxUploadSize( 'file' );
218 if ( file
.size
> maxSize
) {
219 var error
= $( '<p class="error mw-upload-source-error" id="wpSourceTypeFile-error">' +
220 mw
.message( 'largefileserver', file
.size
, maxSize
).escaped() + '</p>' );
221 $( '#wpUploadFile' ).after( error
);
231 if ( hasFileAPI() ) {
232 // Update thumbnail when the file selection control is updated.
233 $( '#wpUploadFile' ).change( function() {
235 if ( this.files
&& this.files
.length
) {
236 // Note: would need to be updated to handle multiple files.
237 var file
= this.files
[0];
239 if ( !checkMaxUploadSize( file
) ) {
243 if ( fileIsPreviewable( file
) ) {
252 * Disable all upload source fields except the selected one
254 jQuery( function ( $ ) {
255 var rows
= $( '.mw-htmlform-field-UploadSourceField' );
256 for ( var i
= rows
.length
; i
; i
-- ) {
257 var row
= rows
[i
- 1];
258 $( 'input[name="wpSourceType"]', row
).change( function () {
259 var currentRow
= row
; // Store current row in our own scope
261 $( '.mw-upload-source-error' ).remove();
262 if ( this.checked
) {
263 // Disable all inputs
264 $( 'input[name!="wpSourceType"]', rows
).prop( 'disabled', 'disabled' );
265 // Re-enable the current one
266 $( 'input', currentRow
).prop( 'disabled', false );