Twitter Bootstrap FileUpload

Question

I would like to use the bootstrap-fileupload.js (http://jasny.github.com/bootstrap/javascript.html#fileupload) but I am confused on the event trigger.

How can I trigger an event sending the image to a web script (php for example) once a media asset is selected?

Answer 1

I recommend you to use https://github.com/blueimp/jQuery-File-Upload for file upload.

Answer 2

I stumbled upon similar problem where I wanted to upload an image via AJAX request as soon as the image is browsed/selected by user and update a hidden field with saved Image ID . I could not find the solution with bootstrap-fileupload.js. So below approach worked for me.

<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript"> 
var options = { 
        success:       showResponse  // post-submit callback 
    }; 
    $(document).ready(function()
    {
        $('#photoimg').live('change', function()
        {
            $("#imageform").ajaxForm(options).submit();         
        });
    });

    function showResponse(responseText, statusText, xhr, $form)  { 
        $('#photoUrl').val(responseText);
    }
</script>

Image Form : ( must not be a nested form ! )

<form id="imageform" action="${pageContext.request.contextPath}/app/upload/saveimage" method="post" enctype="multipart/form-data">
                <div style="top: 25px">
                <div class="span6" style="margin-top: -545px; margin-left:680px">
                <div class="control-group">
                <label class="control-label " style="text-align: left">Photo: </label>
                <div data-fileupload="image" class="fileupload fileupload-new">
                    <div style="margin-left:-235px ;width: 150px; height: 150px; line-height: 150px;" class="fileupload-preview thumbnail" ></div>
                    <div>
                        <span class="btn btn-file" style="margin-right: 135px"><span class="fileupload-new" >Select image</span><span class="fileupload-exists">Change</span><input type="file" name="fileData" id="photoimg"/></span> <a data-dismiss="fileupload" class="btn fileupload-exists" href="#" style="margin-left: -75px">Remove</a>
                    </div>
                </div>
                </div>

                </div>
                </div>
            </form>

<input type="hidden" name="individualCustomer.personInfo.photoUrl" id="photoUrl" />

Answer 3

You can integrate it with jQuery File Upload (https://github.com/blueimp/jQuery-File-Upload) by removing the bootstrap.fileupload.js file as it has a naming conflict with jQuery File Uploader and will not work correctly with it. This means that you will not be able to use the more advanced features of the Jasny componenet. But I suggest you read the code and implement your own solution (it is not that hard :)).

The other thing you can do is use a different component for bootstrap. This component works well out of the box, no need to modify your markup: http://gregpike.net/demos/bootstrap-file-input/demo.html. It is simpler than the jasny component and therefore might be more suitable in some cases.