1 if ( typeof wp === 'undefined' ) |
|
2 var wp = {}; |
|
3 |
|
4 (function( exports, $ ) { |
|
5 var Uploader; |
|
6 |
|
7 if ( typeof _wpPluploadSettings === 'undefined' ) |
|
8 return; |
|
9 |
|
10 /* |
|
11 * An object that helps create a WordPress uploader using plupload. |
|
12 * |
|
13 * @param options - object - The options passed to the new plupload instance. |
|
14 * Requires the following parameters: |
|
15 * - container - The id of uploader container. |
|
16 * - browser - The id of button to trigger the file select. |
|
17 * - dropzone - The id of file drop target. |
|
18 * - plupload - An object of parameters to pass to the plupload instance. |
|
19 * - params - An object of parameters to pass to $_POST when uploading the file. |
|
20 * Extends this.plupload.multipart_params under the hood. |
|
21 * |
|
22 * @param attributes - object - Attributes and methods for this specific instance. |
|
23 */ |
|
24 Uploader = function( options ) { |
|
25 var self = this, |
|
26 elements = { |
|
27 container: 'container', |
|
28 browser: 'browse_button', |
|
29 dropzone: 'drop_element' |
|
30 }, |
|
31 key; |
|
32 |
|
33 this.supports = { |
|
34 upload: Uploader.browser.supported |
|
35 }; |
|
36 |
|
37 this.supported = this.supports.upload; |
|
38 |
|
39 if ( ! this.supported ) |
|
40 return; |
|
41 |
|
42 // Use deep extend to ensure that multipart_params and other objects are cloned. |
|
43 this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults ); |
|
44 this.container = document.body; // Set default container. |
|
45 |
|
46 // Extend the instance with options |
|
47 // |
|
48 // Use deep extend to allow options.plupload to override individual |
|
49 // default plupload keys. |
|
50 $.extend( true, this, options ); |
|
51 |
|
52 // Proxy all methods so this always refers to the current instance. |
|
53 for ( key in this ) { |
|
54 if ( $.isFunction( this[ key ] ) ) |
|
55 this[ key ] = $.proxy( this[ key ], this ); |
|
56 } |
|
57 |
|
58 // Ensure all elements are jQuery elements and have id attributes |
|
59 // Then set the proper plupload arguments to the ids. |
|
60 for ( key in elements ) { |
|
61 if ( ! this[ key ] ) |
|
62 continue; |
|
63 |
|
64 this[ key ] = $( this[ key ] ).first(); |
|
65 |
|
66 if ( ! this[ key ].length ) { |
|
67 delete this[ key ]; |
|
68 continue; |
|
69 } |
|
70 |
|
71 if ( ! this[ key ].prop('id') ) |
|
72 this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ ); |
|
73 this.plupload[ elements[ key ] ] = this[ key ].prop('id'); |
|
74 } |
|
75 |
|
76 // If the uploader has neither a browse button nor a dropzone, bail. |
|
77 if ( ! ( this.browser && this.browser.length ) && ! ( this.dropzone && this.dropzone.length ) ) |
|
78 return; |
|
79 |
|
80 this.uploader = new plupload.Uploader( this.plupload ); |
|
81 delete this.plupload; |
|
82 |
|
83 // Set default params and remove this.params alias. |
|
84 this.param( this.params || {} ); |
|
85 delete this.params; |
|
86 |
|
87 this.uploader.init(); |
|
88 |
|
89 this.supports.dragdrop = this.uploader.features.dragdrop && ! Uploader.browser.mobile; |
|
90 |
|
91 // Generate drag/drop helper classes. |
|
92 (function( dropzone, supported ) { |
|
93 var sensitivity = 50, |
|
94 active; |
|
95 |
|
96 if ( ! dropzone ) |
|
97 return; |
|
98 |
|
99 dropzone.toggleClass( 'supports-drag-drop', !! supported ); |
|
100 |
|
101 if ( ! supported ) |
|
102 return dropzone.unbind('.wp-uploader'); |
|
103 |
|
104 // 'dragenter' doesn't fire correctly, |
|
105 // simulate it with a limited 'dragover' |
|
106 dropzone.bind( 'dragover.wp-uploader', function(){ |
|
107 if ( active ) |
|
108 return; |
|
109 |
|
110 dropzone.addClass('drag-over'); |
|
111 active = true; |
|
112 }); |
|
113 |
|
114 dropzone.bind('dragleave.wp-uploader, drop.wp-uploader', function(){ |
|
115 active = false; |
|
116 dropzone.removeClass('drag-over'); |
|
117 }); |
|
118 }( this.dropzone, this.supports.dragdrop )); |
|
119 |
|
120 if ( this.browser ) { |
|
121 this.browser.on( 'mouseenter', this.refresh ); |
|
122 } else { |
|
123 this.uploader.disableBrowse( true ); |
|
124 // If HTML5 mode, hide the auto-created file container. |
|
125 $('#' + this.uploader.id + '_html5_container').hide(); |
|
126 } |
|
127 |
|
128 this.uploader.bind( 'UploadProgress', this.progress ); |
|
129 |
|
130 this.uploader.bind( 'FileUploaded', function( up, file, response ) { |
|
131 try { |
|
132 response = JSON.parse( response.response ); |
|
133 } catch ( e ) { |
|
134 return self.error( pluploadL10n.default_error, e ); |
|
135 } |
|
136 |
|
137 if ( ! response || ! response.type || ! response.data ) |
|
138 return self.error( pluploadL10n.default_error ); |
|
139 |
|
140 if ( 'error' === response.type ) |
|
141 return self.error( response.data.message, response.data ); |
|
142 |
|
143 if ( 'success' === response.type ) |
|
144 return self.success( response.data ); |
|
145 |
|
146 }); |
|
147 |
|
148 this.uploader.bind( 'Error', function( up, error ) { |
|
149 var message = pluploadL10n.default_error, |
|
150 key; |
|
151 |
|
152 // Check for plupload errors. |
|
153 for ( key in Uploader.errorMap ) { |
|
154 if ( error.code === plupload[ key ] ) { |
|
155 message = Uploader.errorMap[ key ]; |
|
156 break; |
|
157 } |
|
158 } |
|
159 |
|
160 self.error( message, error ); |
|
161 up.refresh(); |
|
162 }); |
|
163 |
|
164 this.uploader.bind( 'FilesAdded', function( up, files ) { |
|
165 $.each( files, function() { |
|
166 self.added( this ); |
|
167 }); |
|
168 |
|
169 up.refresh(); |
|
170 up.start(); |
|
171 }); |
|
172 |
|
173 this.init(); |
|
174 }; |
|
175 |
|
176 // Adds the 'defaults' and 'browser' properties. |
|
177 $.extend( Uploader, _wpPluploadSettings ); |
|
178 |
|
179 Uploader.uuid = 0; |
|
180 |
|
181 Uploader.errorMap = { |
|
182 'FAILED': pluploadL10n.upload_failed, |
|
183 'FILE_EXTENSION_ERROR': pluploadL10n.invalid_filetype, |
|
184 // 'FILE_SIZE_ERROR': '', |
|
185 'IMAGE_FORMAT_ERROR': pluploadL10n.not_an_image, |
|
186 'IMAGE_MEMORY_ERROR': pluploadL10n.image_memory_exceeded, |
|
187 'IMAGE_DIMENSIONS_ERROR': pluploadL10n.image_dimensions_exceeded, |
|
188 'GENERIC_ERROR': pluploadL10n.upload_failed, |
|
189 'IO_ERROR': pluploadL10n.io_error, |
|
190 'HTTP_ERROR': pluploadL10n.http_error, |
|
191 'SECURITY_ERROR': pluploadL10n.security_error |
|
192 }; |
|
193 |
|
194 $.extend( Uploader.prototype, { |
|
195 /** |
|
196 * Acts as a shortcut to extending the uploader's multipart_params object. |
|
197 * |
|
198 * param( key ) |
|
199 * Returns the value of the key. |
|
200 * |
|
201 * param( key, value ) |
|
202 * Sets the value of a key. |
|
203 * |
|
204 * param( map ) |
|
205 * Sets values for a map of data. |
|
206 */ |
|
207 param: function( key, value ) { |
|
208 if ( arguments.length === 1 && typeof key === 'string' ) |
|
209 return this.uploader.settings.multipart_params[ key ]; |
|
210 |
|
211 if ( arguments.length > 1 ) { |
|
212 this.uploader.settings.multipart_params[ key ] = value; |
|
213 } else { |
|
214 $.extend( this.uploader.settings.multipart_params, key ); |
|
215 } |
|
216 }, |
|
217 |
|
218 init: function() {}, |
|
219 error: function() {}, |
|
220 success: function() {}, |
|
221 added: function() {}, |
|
222 progress: function() {}, |
|
223 complete: function() {}, |
|
224 refresh: function() { |
|
225 this.uploader.refresh(); |
|
226 } |
|
227 }); |
|
228 |
|
229 exports.Uploader = Uploader; |
|
230 })( wp, jQuery ); |
|