Search code examples
jqueryajaxfileuploadconfirm

Confirm before upload button click Blueimp JQuery fileupload


I am having an issue with the Blueimp JQuery AJAX fileupload plugin. What I want to do is bind a function to the upload button to display a confirm alert when the upload button is clicked. The problem is I am using the add: option in the ajax call and this adds the function whenever a file is selected to be uploaded which results in the confirmation message appearing x number of times that the user selects a file to be uploaded. Is there a way to get around this?

function setUploadBtnForm1(token){
        var regexp = new RegExp("/settings\$", "i");
        var url = window.location.origin + window.location.pathname.replace(regexp, '/ajaxUploadSigFile');
            $('#fileUpload').fileupload({
                formData: {_token: token},
                datatype:'json',
                url:url,
                allowedTypes:'png',
                add:function(e, data){
                            $('#signatureUploadBtn1').click(function(){
                                var response = confirm('This will remove the existing signature are you sure?');
                                if(response == true)
                                {
                                    data.submit();
                                }else{
                                    e.preventDefault();
                                }
                    });
                },
                success: function(data){
                    var query = data;
                    if (query.RESULT == 'PASS')
                    {
                        $('#signatureUploadBtn1').hide();
                        //set src attribute of signature image to filename of uploaded file.
                        $('.sigImage1').attr('src', '../images/signatures/'+query.FILENAME);
                            $('.modalLoadContent').fadeOut('fast');
                            $('.modalFinishContent').show();
                    }else{
                        $('#signatureUploadBtn1').text('Failed!');
                    }
                }
            })
    }

Solution

  • I have actually managed to solve this now. I have just added an unbind('click') to the function which adds the click event as below:

    $('#fileUpload1').fileupload({
                    formData: {_token: token},
                    datatype:'json',
                    url:url,
                    allowedTypes:'png',
                    replaceFileInput:false,
                    autoUpload:false,
                    add:function(e, data){
                        uploadButton.unbind('click');
                        uploadButton.click(function(){
                            var response = confirm('This will remove the existing signature are you sure?');
                            if(response == true)
                            {
                                data.submit();
                            }else{
                                data.abort();
                            }
                        })
                    },