Blueimp jQuery File Upload Button Triggering

Question

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>

jackocnr · Accepted Answer · 2013-11-14 23:58:21Z

5

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

answered Nov 14, 2013 at 23:58

jackocnr

17.4k10 gold badges58 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicholas Petersen Over a year ago

That did it! But this is clearly ridiculous, the element name should have no effect on this, and its only FireFox that has this bug. It needs to be called a bug.

shanabus · Accepted Answer · 2013-03-07 14:53:01Z

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

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

Bablu Ahmed · Accepted Answer · 2018-09-27 04:25:30Z

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({
      //....
    });
});

Collectives™ on Stack Overflow

Blueimp jQuery File Upload Button Triggering

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related