jQuery file upload cropper process

https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html

 

Initially initialization jquery.ui.widget.js in the factory (jQuery);

 

 

jquery.fileupload.js in

1. }(function ($) {

2. factory(window.jQuery);

3.$.widget('blueimp.fileupload', {

// The fileupload widget listens for change events on file input fields defined
// via fileInput setting and paste or drop events of the given dropZone.
// In addition to the default jQuery Widget methods, the fileupload widget
// exposes the "add" and "send" methods, to add or directly send files using
// the fileupload API.
// By default, files added via file input selection, paste, drag & drop or
// "add" method are uploaded immediately, but it is possible to override
// the "add" callback option to queue file uploads.

Initialization Upload File
$ .widget ( 'blueimp.fileupload', {

 

Then jquery.ui.widget.js

4. $.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
// proxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];

base._childConstructors.push( constructor );

5 $ widget.bridge (name, constructor);.. // name here is the file upload, constructor corresponding to the line 79

6. Back above} (function ($) {

 

Initialization jquery.fileupload-process.js in, also

factory(
window.jQuery
);

var originalAdd = $.blueimp.fileupload.prototype.options.add;

// The File Upload Processing plugin extends the fileupload widget
// with file processing functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {

 

 

= $ In constructor [namespace] [name] =  function (Options, Element)  {set breakpoints

The initialization sequence

jquery.fileupload.js

jquery.fileupload-process.js

jquery.fileupload-image.js

jquery.fileupload-image-editor.js

jquery.fileupload-ui.js

Then start trigger is main.js

 

 

https://github.com/tkvw/jQuery-File-Upload/blob/master/js/main.js

Main.js program in the inlet,

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: 'http://localhost:81/jquery-file-upload-server/php/'
});

Then, jquery.ui.widget.js line 79

$[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}

 

$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) {

 

 

Then jquery.fileupload-ui.js inside method _create

jquery.fileupload-process.js inside method _create

Method jquery.fileupload.js inside _create

_initEventHandlers jquery.fileupload-ui.js method in which this._super () ;, triggered following

jquery.fileupload-image-editor.js inside method _initEventHandlers

The method continues _initButtonBarEventHandlers jquery.fileupload-ui.js in this method in which the above _initEventHandlers

this._on(fileUploadButtonBar.find('.start'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.start').click();
    }
});
this._on(fileUploadButtonBar.find('.cancel'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.cancel').click();
    }
});
this._on(fileUploadButtonBar.find('.delete'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.toggle:checked')
            .closest('.template-download')
            .find('.delete').click();
        fileUploadButtonBar.find('.toggle')
            .prop('checked', false);
    }
});
this._on(fileUploadButtonBar.find('.toggle'), {
    change: function (e) {
        filesList.find('.toggle').prop(
            'checked',
            $(e.currentTarget).is(':checked')
        );
    }
});

jquery.fileupload-process.js _create the method,

_create: function () {
this._super();
this._processing = 0;
this._processingQueue = $.Deferred().resolveWith(this)
.promise();
}

jquery.fileupload-ui.js

_create: function () {
this._super();
this._resetFinishedDeferreds();
if (!$.support.fileInput) {
this._disableFileInputButton();
}
},

 

_resetFinishedDeferreds: function () {
this._finishedUploads = [];
},

 

We found that these create methods are behind the trigger method code jquery.ui.widget.js in _createWidget

_createWidget: function( options, element ) {

this._create();
this._trigger( "create", null, this._getCreateEventData() );

this._init();

 

Then in the last part main.js

  $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });