CODEWITHSUNDEEP
jqueryajaxfileuploadconfirm
Alex Carter
Alex Carter

Reputation: 75

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!');
                    }
                }
            })
    }

Upvotes: 1

Views: 2870

Answers (1)

Alex Carter
Alex Carter

Reputation: 75

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();
                        }
                    })
                },

Upvotes: 2

Related Questions