2 * JavaScript for Special:Upload
3 * Note that additional code still lives in skins/common/upload.js
6 jQuery( function( $ ) {
8 * Is the FileAPI available with sufficient functionality?
10 function hasFileAPI(){
11 return typeof window
.FileReader
!== 'undefined';
15 * Check if this is a recognizable image type...
16 * Also excludes files over 10M to avoid going insane on memory usage.
18 * @todo is there a way we can ask the browser what's supported in <img>s?
23 function fileIsPreviewable( file
) {
24 var known
= ['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml'],
25 tooHuge
= 10 * 1024 * 1024;
26 return ( $.inArray( file
.type
, known
) !== -1 ) && file
.size
> 0 && file
.size
< tooHuge
;
30 * Show a thumbnail preview of PNG, JPEG, GIF, and SVG files prior to upload
31 * in browsers supporting HTML5 FileAPI.
33 * As of this writing, known good:
35 * - Chrome 7.something
37 * @todo check file size limits and warn of likely failures
41 function showPreview( file
) {
42 var previewSize
= 180,
43 thumb
= $( '<div id="mw-upload-thumbnail" class="thumb tright">' +
44 '<div class="thumbinner">' +
45 '<canvas width="' + previewSize
+ '" height="' + previewSize
+ '" ></canvas>' +
46 '<div class="thumbcaption"><div class="filename"></div><div class="fileinfo"></div></div>' +
49 thumb
.find( '.filename' ).text( file
.name
).end()
50 .find( '.fileinfo' ).text( prettySize( file
.size
) ).end();
52 var ctx
= thumb
.find( 'canvas' )[0].getContext( '2d' ),
53 spinner
= new Image();
54 spinner
.onload = function() {
55 ctx
.drawImage( spinner
, (previewSize
- spinner
.width
) / 2,
56 (previewSize
- spinner
.height
) / 2 );
58 spinner
.src
= mw
.config
.get( 'wgScriptPath' ) + '/skins/common/images/spinner.gif';
59 $( '#mw-htmlform-source' ).parent().prepend( thumb
);
61 fetchPreview( file
, function( dataURL
) {
62 var img
= new Image(),
64 img
.onload = function() {
65 // Fit the image within the previewSizexpreviewSize box
66 if ( img
.width
> img
.height
) {
68 height
= img
.height
/ img
.width
* previewSize
;
71 width
= img
.width
/ img
.height
* previewSize
;
73 // Determine the offset required to center the image
74 dx
= (180 - width
) / 2;
75 dy
= (180 - height
) / 2;
77 // If a rotation is applied, the direction of the axis
78 // changes as well. You can derive the values below by
79 // drawing on paper an axis system, rotate it and see
80 // where the positive axis direction is
99 ctx
.clearRect( 0, 0, 180, 180 );
100 ctx
.rotate( rotation
/ 180 * Math
.PI
);
101 ctx
.drawImage( img
, x
, y
, width
, height
);
104 var info
= mw
.msg( 'widthheight', img
.width
, img
.height
) +
105 ', ' + prettySize( file
.size
);
106 $( '#mw-upload-thumbnail .fileinfo' ).text( info
);
113 * Start loading a file into memory; when complete, pass it as a
114 * data URL to the callback function.
117 * @param {function} callback
119 function fetchPreview( file
, callback
) {
120 var reader
= new FileReader();
121 reader
.onload = function() {
122 callback( reader
.result
);
124 reader
.readAsDataURL( file
);
128 * Format a file size attractively.
129 * @todo match numeric formatting
134 function prettySize( s
) {
135 var sizes
= ['size-bytes', 'size-kilobytes', 'size-megabytes', 'size-gigabytes'];
136 while ( s
>= 1024 && sizes
.length
> 1 ) {
138 sizes
= sizes
.slice( 1 );
140 return mw
.msg( sizes
[0], Math
.round( s
) );
144 * Clear the file upload preview area.
146 function clearPreview() {
147 $( '#mw-upload-thumbnail' ).remove();
151 if ( hasFileAPI() ) {
152 // Update thumbnail when the file selection control is updated.
153 $( '#wpUploadFile' ).change( function() {
155 if ( this.files
&& this.files
.length
) {
156 // Note: would need to be updated to handle multiple files.
157 var file
= this.files
[0];
158 if ( fileIsPreviewable( file
) ) {