xp-dev.com Git - namibia/blob - public/scripts/blueimp-jQuery-File-Upload/js/jquery.fileupload-ip.js

   1 /*
   2  * jQuery File Upload Image 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.js',
  22             './canvas-to-blob.js',
  23             './jquery.fileupload.js'
  24         ], factory);
  25     } else {
  26         // Browser globals:
  27         factory(
  28             window.jQuery,
  29             window.loadImage,
  30             window.canvasToBlob
  31         );
  32     }
  33 }(function ($, loadImage, canvasToBlob) {
  34     'use strict';
  35
  36     // The File Upload IP version extends the basic fileupload widget
  37     // with image processing functionality:
  38     $.widget('blueimpIP.fileupload', $.blueimp.fileupload, {
  39
  40         options: {
  41             // The regular expression to define which image files are to be
  42             // resized, given that the browser supports the operation:
  43             resizeSourceFileTypes: /^image\/(gif|jpeg|png)$/,
  44             // The maximum file size of images that are to be resized:
  45             resizeSourceMaxFileSize: 20000000, // 20MB
  46             // The maximum width of the resized images:
  47             resizeMaxWidth: undefined,
  48             // The maximum height of the resized images:
  49             resizeMaxHeight: undefined,
  50             // The minimum width of the resized images:
  51             resizeMinWidth: undefined,
  52             // The minimum height of the resized images:
  53             resizeMinHeight: undefined,
  54
  55             // The add callback is invoked as soon as files are added to the fileupload
  56             // widget (via file input selection, drag & drop or add API call).
  57             // See the basic file upload widget for more information:
  58             add: function (e, data) {
  59                 $(this).fileupload('resize', data).done(function () {
  60                     data.submit();
  61                 });
  62             }
  63         },
  64
  65         // Resizes the image file at the given index and stores the created blob
  66         // at the original position of the files list, returns a Promise object:
  67         _resizeImage: function (files, index) {
  68             var that = this,
  69                 options = this.options,
  70                 file = files[index],
  71                 deferred = $.Deferred(),
  72                 canvas,
  73                 blob;
  74             loadImage(
  75                 file,
  76                 function (img) {
  77                     var width = img.width,
  78                         height = img.height;
  79                     canvas = loadImage.scale(img, {
  80                         maxWidth: options.resizeMaxWidth,
  81                         maxHeight: options.resizeMaxHeight,
  82                         minWidth: options.resizeMinWidth,
  83                         minHeight: options.resizeMinHeight,
  84                         canvas: true
  85                     });
  86                     if (width !== canvas.width || height !== canvas.height) {
  87                         canvasToBlob(canvas, function (blob) {
  88                             if (!blob.name) {
  89                                 if (file.type === blob.type) {
  90                                     blob.name = file.name;
  91                                 } else if (file.name) {
  92                                     blob.name = file.name.replace(
  93                                         /\..+$/,
  94                                         '.' + blob.type.substr(6)
  95                                     );
  96                                 }
  97                             }
  98                             files[index] = blob;
  99                             deferred.resolve();
 100                         }, file);
 101                     } else {
 102                         deferred.resolve();
 103                     }
 104                 }
 105             );
 106             return deferred.promise();
 107         },
 108
 109         // Resizes the images given as files property of the data parameter,
 110         // returns a Promise object that allows to bind a done handler, which
 111         // will be invoked after processing all images is done:
 112         resize: function (data) {
 113             var that = this,
 114                 options = $.extend({}, this.options, data),
 115                 resizeAll = $.type(options.resizeSourceMaxFileSize) !== 'number';
 116             $.each(data.files, function (index, file) {
 117                 if (that._resizeSupport &&
 118                         (options.resizeMaxWidth || options.resizeMaxHeight ||
 119                             options.resizeMinWidth || options.resizeMinHeight) &&
 120                         (resizeAll || file.size < options.resizeSourceMaxFileSize) &&
 121                         options.resizeSourceFileTypes.test(file.type)) {
 122                     that._processing += 1;
 123                     if (that._processing === 1) {
 124                         that.element.addClass('fileupload-processing');
 125                     }
 126                     that._processingQueue = that._processingQueue.pipe(function () {
 127                         var deferred = $.Deferred();
 128                         that._resizeImage(
 129                             data.files,
 130                             index
 131                         ).done(function () {
 132                             that._processing -= 1;
 133                             if (that._processing === 0) {
 134                                 that.element
 135                                     .removeClass('fileupload-processing');
 136                             }
 137                             deferred.resolve();
 138                         });
 139                         return deferred.promise();
 140                     });
 141                 }
 142             });
 143             return this._processingQueue;
 144         },
 145
 146         _create: function () {
 147             $.blueimp.fileupload.prototype._create.call(this);
 148             this._processing = 0;
 149             this._processingQueue = $.Deferred().resolveWith(this).promise();
 150             this._resizeSupport = canvasToBlob(
 151                 document.createElement('canvas'),
 152                 $.noop
 153             );
 154         }
 155
 156     });
 157
 158 }));