1

I am trying to display a pop-up with bootbox.dialog(...). Inside this bootbox, I would like to put an input type="file" and retrieve the file uploaded. How can I get the uploaded file ?

BOOTBOX (inside my AngularJS Controller)

 bootbox.dialog({
            title: "More information",
            message: '<div class="row"> ' +
                '<div class="col-md12"> ' +
                '<form class="form-horizontal"> ' +

                    '<div class="form-group">' +
                        '<label class="col-md-3 control-label" for="logo">Logo</label> ' +
                        '<div class="col-md-4">' +
                            '<img id="logo" name="logo" class="customerImg"/>' +
                        '</div>' +
                        '<span class="btn btn-default btn-file col-md-3">Browse another logo<input type="file" fileread="customerLogo" />' +
                    '</div>' +

                '</form>' +
                '</div>' +
                '</div>',
            buttons: {
                danger: {
                    label: "Cancel",
                    className: "btn btn-primary"
                },
                success: {
                    label: "Generate word",
                    className: "btn btn-primary",
                    callback: function () {
                        console.log(document.getElementById('logo').val());
                    }
                }
            }
        });
Weedoze
  • 13,683
  • 1
  • 33
  • 63

2 Answers2

1

It's not entirely relevant to your question, but you can also use a template (via a <script type="text/template"> tag) for your form; it would make some of the errors in your current template a little more obvious (you're missing a closing span and one of the BS classes is missing a hyphen). Here's an example: https://jsfiddle.net/fLaa0p4d/

Template

<script type="text/template" id="file-template">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label" for="logo">Logo</label>
                    <div class="col-md-4">
                        <img id="logo" name="logo" class="customerImg"/>
                    </div>
                    <span class="btn btn-default btn-file col-md-3">
                        Browse another logo
                        <input type="file" name="imageFile" fileread="customerLogo" />
                    </span>
                </div>
            </form>
        </div>
    </div>
</script>

Adjusted script

bootbox.dialog({
    title: "More information",
    message: $('#file-template').html(),
    buttons: {
        danger: {
            label: "Cancel",
            className: "btn btn-primary"
        },
        success: {
            label: "Generate word",
            className: "btn btn-primary",
            callback: function () {
                console.log(document.getElementById('logo').val());
            }
        }
    }
});
Community
  • 1
  • 1
Tieson T.
  • 20,774
  • 6
  • 77
  • 92
0

Ng input file is not allowed for use ng-model.

Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

Detail.

You can take file path and use with Jquery File Upload functions.

This will help you: File Upload using AngularJS

Community
  • 1
  • 1
hurricane
  • 6,521
  • 2
  • 34
  • 44