How to submit blueimp jquery file upload externally when I can't bind the button

Question

I am looking into jquery file upload and am unable to submit. Firstly I will explain the process and then issue.

1. A user selects an image they want to change
2. This fires a change event on an input
3. The image is rendered in a custom made image cropper
4. If the user accepts the cropping changes after optionally moving the image about/zooming etc then the image needs to be submitted to the server

Problems: The button is not rendered on the page until after the image is selected. I tried doing the following:

Firstly, instantiate the plugin on page render complete for the form containing the file input, as this is always on the page. It is a hidden form.

$el.fileupload({
     url: self.uploadImageUrl,
     autoUpload: true,
     add: function (e, data) {
           if (beforeUpload(data, e))
                 data.submit();
     },
     error: function (jqXHR, textStatus, errorThrown) {
                    helper.Logger.error(errorThrown);
     }
});

The beforeUpload function basically returns true if: - the image cropper template is currently displayed in the screen - the image src matches the src currently in the cropper Otherwise, it returns false.

The idea was then, the first time a user selects an image, beforeUpload() turns false as the image cropper isnt rendered. That would allow the user to do their cropping, and on clicking the accept button, I just simply do:

$inputFileButtonWithinFileUploadForm.change()

This would run through beforeUpload which this time would return true, causing the plugin to send off the form along with it's other data. (I want to submit the cropping details along with the file)

Unfortunately, .change() on the input element is being ignored by the plugin for whatever reason.

I can only see one solution which feels dirty - have two inputs, one for the image choice and another for the form. When the user accepts the image, the form input is updated. I would like a cleaner solution though if possible. I don't understand why the plugin does not simply have a .submit() method that doesn't need parameters - it already knows the form. I have seen a submit method in the API, but it needs the files as a parameter and I want to send both the file and the cropping data - is that possible?

Thanks

Answer 1

Found the answer here: jQuery file upload: Is it possible to trigger upload with a submit button?

Basically, bind the form with

               add: function (e, data) {
                    options.onFileAdd(data, e);

                    $el.on(customEventName, function () {
                        data.submit();
                    });                            
                },

and then the external button with:

$btn.on("click", function() { $yourForm.trigger("customEventName"); })