CODEWITHSUNDEEP
ajaxjqueryfile-upload
Matt Stern
Matt Stern

Reputation: 727

Blueimp jQuery File Upload Button Triggering

This sounds pretty elemetary, but I cannot find a code example for Blueimp jQuery File Upload that makes the browser's default file input box (the one that says "Choose file..." and Browse) element hidden and instead triggers the dialog via a button. Coould someone show me how to do this?

I've tried just putting the input element inside a button element as shown in this demo, but it does not work on Firefox. Is there some way to use jQuery to trigger the dialog. I'm not really sure why this works in Chrome other than the "Browse" button happens to line up with the button in Chrome but not in FF.

Here's what I'm trying to do essentially:

<button id="upload-button" class="btn btn-primary btn-large" type="button"> <input type="file" name="image" id="fileupload" multiple data-url=""/> Upload Images
</button><br>

Upvotes: 2

Views: 7919

Answers (3)

Bablu Ahmed
Bablu Ahmed

Reputation: 5010

As soon as selecting files will start uploading

$('#fileupload').fileupload({
    dataType: 'json',
    url: '<?php echo base_url(); ?>asset/applicant/blueimp/server/php/',
    add: function (e, data) {
        //Renaming files name
        var count = data.files.length;
        var i;
        for (i = 0; i < count; i++) {
            data.files[i].uploadName =
                Math.floor(Math.random() * 1000) + '_' + data.files[i].name;
        }
        data.submit();
    }
});

Triggering a button to upload files

$('#fileupload').fileupload({
        dataType: 'json',
        url: '<?php echo base_url(); ?>asset/applicant/blueimp/server/php/',
        add:function (e, data) {
           $("#uploadBtn").off('click').on('click',function () {           
             data.submit();
           });
        }
    });

Try to keep the plugin inside the jquery document ready function for avoiding unexpected jquery error as follows

$(document).ready(function () {
    $('#fileupload').fileupload({
      //....
    });
});

Upvotes: 0

jackocnr
jackocnr

Reputation: 17416

Change the button element to a span (and just style it like a button), like on the plugin's demo page.

Upvotes: 5

shanabus
shanabus

Reputation: 13115

It sounds like you are asking a few questions here so I will try address them.

  1. hidden default input - on the example page here, you can see that his CSS takes care of hiding the default file input element:

    .fileinput-button input { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); }

  2. How to trigger - there are at least 2 ways to do this:

    2.1 Basic instantiation like so: $('#fileupload').fileupload();

    2.2 Pragmatically by binding to another event, in this case a change event:

    $('#some-file-input-field').bind('change', function (e) { $('#fileupload').fileupload('add', { fileInput: $(this) }); });

    That examples is also found on the API

Upvotes: 2

Related Questions