Can't get image resizing to work with jQuery File Upload

Question 1

Found the solution.

Appears that when using the fileupload-process extension, specifying the add function overrides the functionality of the fileupload-process ext. which invokes the processQueue, which is where image resizing and more are registered.

The solution is to attach an event listener to fileuploadadd instead of overriding the add function:

$('.fileupload').fileupload({ ... }).bind('fileuploadadd', callback)

Alternatively, call the original add method from your own add method:

$('.fileupload').fileupload({
    add: function(e, data) {
        $.blueimp.fileupload.prototype.options.add.call(this, e, data);
    }
});

Question 2

FYI - Found the solution [using latest download from github.com/blueimp/] - resizing worked for "Basic Plus" but not "Basic Plus UI" - so by ditching the main.js and adding the new "hybrid" as per below under the last of the JS scripts - all works a treat for the "Basic Plus UI" version to have client side image resizing.

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'mydomain.com/' ?
        '//mydomain.com/alldevs/jQuery-File-Upload/' : 'server/php/',

    uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });

$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 999000,
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    //disableImageResize: /Android(?!.*Chrome)|Opera/
    //    .test(window.navigator.userAgent),
    previewMaxWidth: 120,
    previewMaxHeight: 120,
    previewCrop: false,

    disableImageResize:false,
    imageMaxWidth: 1024,
    imageMaxHeight: 1024,
    imageCrop: false // Force cropped images
    });

    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.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});

})
});

plus the order of JS scripts placed before the above:

jquery.min.js
tmpl.min.js
jquery.ui.widget.js
load-image.all.min.js
canvas-to-blob.min.js
bootstrap.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.fileupload-audio.js
jquery.fileupload-video.js
jquery.fileupload-validate.js
jquery.fileupload-ui.js

Question 3

I had problems too with jQuery File Upload and manage to solve it by changing the options in the file "jquery.fileupload-image.js" in the following section:

// The File Upload Resize plugin extends the fileupload widget
// with image resize functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        ...
        // The maximum file size of images to load:
        loadImageMaxFileSize: 20000000, // 10MB
        // The maximum width of resized images:
        imageMaxWidth: 250,
        // The maximum height of resized images:
        imageMaxHeight: 250,
        ...
        // Disable the resize image functionality by default:
        disableImageResize: false,
        ...
    },

Somehow do the options put "somewhere else" (in my case, all code copied from the official tutorial from the official page) not override the default options stated/shown here.

That it did not work in my case could be my fault, so no offence. Anyway, if this advice can help someone else, here it is. Try it out if you like or leave it.

Question 4

html

<input type="file" name="image" id="upload-image">
    <br>
<img src="" id="Logo">

js | jquery

<script type="text/javascript">
$(document).ready(function() {

    $('#upload-image').on('change', function (e) {
        e.preventDefault();

        var imageFile = e.target.files[0];
        var reader    = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);

        function imageIsLoaded(e) {

            var image = new Image();

            image.src = e.target.result;

            image.onload = function() {

                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                    ctx.drawImage(image,0, 0, 300, 300);// new width and height | resize 

                var newImage= canvas.toDataURL("image/jpeg");

                $('#Logo').attr('src', newImage);
                
            }; //end of function onload image

        }; //end of function imageIsLoaded

    });//end of change image

});//end of redy fun
</script>