How to get image data created by Bootstrap File Input plugin

Question

I've got the following div that does the work of selecting and showing the selected image, changing the image and cancelling it. All of it is done by the Bootstrap File Input plugin.

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-new thumbnail">
        <img src="http://www.placehold.it/512x512/EFEFEF/AAAAAA&amp;text=NO+IMAGE" alt="" class="img-responsive" />
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail">
    </div>
    <div>
        <span class="btn default btn-file">
            <span class="fileinput-new">Select image </span>
            <span class="fileinput-exists">Change </span>
        <input type="file" name="..." >
        </span>
        <a href="#" class="btn red fileinput-exists" data-dismiss="fileinput">Remove </a>
    </div>
</div>

Now this Bootstrap File Input plugin create the following img element, which holds the data for the image. I need that data so I could send that using AngularJS to my node server and save that image inside a folder on my server.

<div class="fileinput-preview fileinput-exists thumbnail">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=...">
</div>

Could somebody help me with getting the dynamically generated data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=... image data by Bootstrap File Input using AngularJS?

Answer 1

Create form data and append all files to it.

var formData = new FormData();

$('#id').on('fileloaded', function (event, file, previewId, index, reader) {
    formData.append('file', file);
});

Now, formData will hold all the files which you have selected and can be sent to the server.

Answer 2

$(Your input id).on('fileloaded', function (event, file, previewId, index, reader) {
    console.log(reader.result)
}

you can get image data from reader.result, just try