|
0
|
1 /*
|
|
|
2 * jQuery File Upload File Processing Plugin 1.0
|
|
|
3 * https://github.com/blueimp/jQuery-File-Upload
|
|
|
4 *
|
|
|
5 * Copyright 2012, Sebastian Tschan
|
|
|
6 * https://blueimp.net
|
|
|
7 *
|
|
|
8 * Licensed under the MIT license:
|
|
|
9 * http://www.opensource.org/licenses/MIT
|
|
|
10 */
|
|
|
11
|
|
|
12 /*jslint nomen: true, unparam: true, regexp: true */
|
|
|
13 /*global define, window, document */
|
|
|
14
|
|
|
15 (function (factory) {
|
|
|
16 'use strict';
|
|
|
17 if (typeof define === 'function' && define.amd) {
|
|
|
18 // Register as an anonymous AMD module:
|
|
|
19 define([
|
|
|
20 'jquery',
|
|
|
21 'load-image',
|
|
|
22 'canvas-to-blob',
|
|
|
23 './jquery.fileupload'
|
|
|
24 ], factory);
|
|
|
25 } else {
|
|
|
26 // Browser globals:
|
|
|
27 factory(
|
|
|
28 window.jQuery,
|
|
|
29 window.loadImage
|
|
|
30 );
|
|
|
31 }
|
|
|
32 }(function ($, loadImage) {
|
|
|
33 'use strict';
|
|
|
34
|
|
|
35 // The File Upload IP version extends the basic fileupload widget
|
|
|
36 // with file processing functionality:
|
|
|
37 $.widget('blueimpFP.fileupload', $.blueimp.fileupload, {
|
|
|
38
|
|
|
39 options: {
|
|
|
40 // The list of file processing actions:
|
|
|
41 process: [
|
|
|
42 /*
|
|
|
43 {
|
|
|
44 action: 'load',
|
|
|
45 fileTypes: /^image\/(gif|jpeg|png)$/,
|
|
|
46 maxFileSize: 20000000 // 20MB
|
|
|
47 },
|
|
|
48 {
|
|
|
49 action: 'resize',
|
|
|
50 maxWidth: 1920,
|
|
|
51 maxHeight: 1200,
|
|
|
52 minWidth: 800,
|
|
|
53 minHeight: 600
|
|
|
54 },
|
|
|
55 {
|
|
|
56 action: 'save'
|
|
|
57 }
|
|
|
58 */
|
|
|
59 ],
|
|
|
60
|
|
|
61 // The add callback is invoked as soon as files are added to the
|
|
|
62 // fileupload widget (via file input selection, drag & drop or add
|
|
|
63 // API call). See the basic file upload widget for more information:
|
|
|
64 add: function (e, data) {
|
|
|
65 $(this).fileupload('process', data).done(function () {
|
|
|
66 data.submit();
|
|
|
67 });
|
|
|
68 }
|
|
|
69 },
|
|
|
70
|
|
|
71 processActions: {
|
|
|
72 // Loads the image given via data.files and data.index
|
|
|
73 // as canvas element.
|
|
|
74 // Accepts the options fileTypes (regular expression)
|
|
|
75 // and maxFileSize (integer) to limit the files to load:
|
|
|
76 load: function (data, options) {
|
|
|
77 var that = this,
|
|
|
78 file = data.files[data.index],
|
|
|
79 dfd = $.Deferred();
|
|
|
80 if (window.HTMLCanvasElement &&
|
|
|
81 window.HTMLCanvasElement.prototype.toBlob &&
|
|
|
82 ($.type(options.maxFileSize) !== 'number' ||
|
|
|
83 file.size < options.maxFileSize) &&
|
|
|
84 (!options.fileTypes ||
|
|
|
85 options.fileTypes.test(file.type))) {
|
|
|
86 loadImage(
|
|
|
87 file,
|
|
|
88 function (canvas) {
|
|
|
89 data.canvas = canvas;
|
|
|
90 dfd.resolveWith(that, [data]);
|
|
|
91 },
|
|
|
92 {canvas: true}
|
|
|
93 );
|
|
|
94 } else {
|
|
|
95 dfd.rejectWith(that, [data]);
|
|
|
96 }
|
|
|
97 return dfd.promise();
|
|
|
98 },
|
|
|
99 // Resizes the image given as data.canvas and updates
|
|
|
100 // data.canvas with the resized image.
|
|
|
101 // Accepts the options maxWidth, maxHeight, minWidth and
|
|
|
102 // minHeight to scale the given image:
|
|
|
103 resize: function (data, options) {
|
|
|
104 if (data.canvas) {
|
|
|
105 var canvas = loadImage.scale(data.canvas, options);
|
|
|
106 if (canvas.width !== data.canvas.width ||
|
|
|
107 canvas.height !== data.canvas.height) {
|
|
|
108 data.canvas = canvas;
|
|
|
109 data.processed = true;
|
|
|
110 }
|
|
|
111 }
|
|
|
112 return data;
|
|
|
113 },
|
|
|
114 // Saves the processed image given as data.canvas
|
|
|
115 // inplace at data.index of data.files:
|
|
|
116 save: function (data, options) {
|
|
|
117 // Do nothing if no processing has happened:
|
|
|
118 if (!data.canvas || !data.processed) {
|
|
|
119 return data;
|
|
|
120 }
|
|
|
121 var that = this,
|
|
|
122 file = data.files[data.index],
|
|
|
123 name = file.name,
|
|
|
124 dfd = $.Deferred(),
|
|
|
125 callback = function (blob) {
|
|
|
126 if (!blob.name) {
|
|
|
127 if (file.type === blob.type) {
|
|
|
128 blob.name = file.name;
|
|
|
129 } else if (file.name) {
|
|
|
130 blob.name = file.name.replace(
|
|
|
131 /\..+$/,
|
|
|
132 '.' + blob.type.substr(6)
|
|
|
133 );
|
|
|
134 }
|
|
|
135 }
|
|
|
136 // Store the created blob at the position
|
|
|
137 // of the original file in the files list:
|
|
|
138 data.files[data.index] = blob;
|
|
|
139 dfd.resolveWith(that, [data]);
|
|
|
140 };
|
|
|
141 // Use canvas.mozGetAsFile directly, to retain the filename, as
|
|
|
142 // Gecko doesn't support the filename option for FormData.append:
|
|
|
143 if (data.canvas.mozGetAsFile) {
|
|
|
144 callback(data.canvas.mozGetAsFile(
|
|
|
145 (/^image\/(jpeg|png)$/.test(file.type) && name) ||
|
|
|
146 ((name && name.replace(/\..+$/, '')) ||
|
|
|
147 'blob') + '.png',
|
|
|
148 file.type
|
|
|
149 ));
|
|
|
150 } else {
|
|
|
151 data.canvas.toBlob(callback, file.type);
|
|
|
152 }
|
|
|
153 return dfd.promise();
|
|
|
154 }
|
|
|
155 },
|
|
|
156
|
|
|
157 // Resizes the file at the given index and stores the created blob at
|
|
|
158 // the original position of the files list, returns a Promise object:
|
|
|
159 _processFile: function (files, index, options) {
|
|
|
160 var that = this,
|
|
|
161 dfd = $.Deferred().resolveWith(that, [{
|
|
|
162 files: files,
|
|
|
163 index: index
|
|
|
164 }]),
|
|
|
165 chain = dfd.promise();
|
|
|
166 that._processing += 1;
|
|
|
167 $.each(options.process, function (i, settings) {
|
|
|
168 chain = chain.pipe(function (data) {
|
|
|
169 return that.processActions[settings.action]
|
|
|
170 .call(this, data, settings);
|
|
|
171 });
|
|
|
172 });
|
|
|
173 chain.always(function () {
|
|
|
174 that._processing -= 1;
|
|
|
175 if (that._processing === 0) {
|
|
|
176 that.element
|
|
|
177 .removeClass('fileupload-processing');
|
|
|
178 }
|
|
|
179 });
|
|
|
180 if (that._processing === 1) {
|
|
|
181 that.element.addClass('fileupload-processing');
|
|
|
182 }
|
|
|
183 return chain;
|
|
|
184 },
|
|
|
185
|
|
|
186 // Processes the files given as files property of the data parameter,
|
|
|
187 // returns a Promise object that allows to bind a done handler, which
|
|
|
188 // will be invoked after processing all files (inplace) is done:
|
|
|
189 process: function (data) {
|
|
|
190 var that = this,
|
|
|
191 options = $.extend({}, this.options, data);
|
|
|
192 if (options.process && options.process.length &&
|
|
|
193 this._isXHRUpload(options)) {
|
|
|
194 $.each(data.files, function (index, file) {
|
|
|
195 that._processingQueue = that._processingQueue.pipe(
|
|
|
196 function () {
|
|
|
197 var dfd = $.Deferred();
|
|
|
198 that._processFile(data.files, index, options)
|
|
|
199 .always(function () {
|
|
|
200 dfd.resolveWith(that);
|
|
|
201 });
|
|
|
202 return dfd.promise();
|
|
|
203 }
|
|
|
204 );
|
|
|
205 });
|
|
|
206 }
|
|
|
207 return this._processingQueue;
|
|
|
208 },
|
|
|
209
|
|
|
210 _create: function () {
|
|
|
211 $.blueimp.fileupload.prototype._create.call(this);
|
|
|
212 this._processing = 0;
|
|
|
213 this._processingQueue = $.Deferred().resolveWith(this)
|
|
|
214 .promise();
|
|
|
215 }
|
|
|
216
|
|
|
217 });
|
|
|
218
|
|
|
219 }));
|
