CODEWITHSUNDEEP
jqueryfile-uploadblueimp
Ravi Ram
Ravi Ram

Reputation: 24488

blueimp - jquery fileupload onClick event

We are using Blueimp Jquery File Upload.

How do we add a button to fire the upload?

Right now the upload occurs as soon as a user selects a file. We would like to have the user select files then click a UPLOAD NOW button.

I have changed the JS file, turned on the autoUplaod to false, but can figure out how to get the OnClick to work.

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

Upvotes: 2

Views: 15495

Answers (2)

hecman
hecman

Reputation: 1

i tried modifying the "add" function, and it kinda works except that in all of internet explorer browsers the file selected does not appear in the input box. also, in my experience, if you changed it multiple times before the button click, all the files get uploaded. this worked for me: 1. do not instantiate the blueimp fileupload object right away 2. create a function that basically instantiates the fileupload object 3. attach the function in #2 above to a button click i realize there are some redundancies in my code below. also i force the IframeTransport, you can probably do a browser check for that one. you can also do the browser check for the add function, for ie you can use "fileInput", for everyone else you can use "file". this works fine for me in all browsers, except for the progress bar, i need to tween the "forceIframeTransport" to check the browser

<script>
    $(function () {
        /*do your jquery stuff here, but do not call fileupload*/
        $("btnUpload").click(function(){
            /*i can add additional post params*/
            /*some of this is redundant*/
            var post = Array({name:"hello", value:"there"});
            uploadFileOnClick("fileupload", $("#fileupload") ,post, true);
        });
    });
    function uploadFileOnClick(id, file, post, _autoUpload) {
        $('#'+id).fileupload({
            dataType: 'json',
            multipart: true,
            autoUpload: true,
            formData: post,
            forceIframeTransport: true,
            progress: function (e, data) {
                /*insert progress code here*/
            },
            done: function (e, data) {
                /*insert your code here*/
            }
        });
        if (_autoUpload) {
            $('#'+id).fileupload('add', {files: file});
        }
    }
</script>
<body>
    <form method="post" enctype="multipart/form-data">
        <input type="file" id="fileupload" name="somename" data-url="yourserver.php?goeshere=true"/>
    </form>
    <!-- i use a link in my case, it will work if you use a button in the form as well-->
    <a href="javascript:void(0);" id="btnUpload">Upload</a>
</body>

Upvotes: -1

A. Wolff
A. Wolff

Reputation: 74420

Maybe you are looking for add function callback:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        add:function (e, data) {
           $("#uploadBtn").off('click').on('click',function () {           
             data.submit();
           });
        }
    });
});

Upvotes: 15

Related Questions