I'm using the bootstrap krajee fileinput plugin to upload a videofile to the server. That works fine, but the problem is I want to send extra data with it, more specifically the video name. Here is my code:

$(document).ready(function() {
var name = "";
$("#videofile").fileinput({
    uploadUrl: "public/php/videos/upload",
    uploadAsync: true,
    maxFileCount: 1,
    allowedFileExtensions: ["mp4", "avi", "ogg", "wmv", "flv"],
    maxFileSize: 50000,
    elErrorContainer: "#error",
    previewFileType: "video",
    browseLabel: "Select video",
    browseClass: "btn btn-success",
    initialCaption: "upload your videos!",
    uploadExtraData: {videoname: name}
    });
$('#videofile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
        files = data.files,
        extra = data.extra,
        response = data.response,
        reader = data.reader;
    console.log(response);
});
$('#videofile').on('filepreupload', function() {
    name = $("#videoname").val();
});
})

It works fine if I send videoname: "videoname" in the uploadExtraData, but when I try to get it from the input field, it doesnt send anything. I've checked in the filepreupload function that the name variable is correct and that it launches before the upload. If someone knows how to get around this I would really appreciate the help.

I'm using the bootstrap krajee fileinput plugin to upload a videofile to the server. That works fine, but the problem is I want to send extra data with it, more specifically the video name. Here is my code:

$(document).ready(function() {
var name = "";
$("#videofile").fileinput({
    uploadUrl: "public/php/videos/upload",
    uploadAsync: true,
    maxFileCount: 1,
    allowedFileExtensions: ["mp4", "avi", "ogg", "wmv", "flv"],
    maxFileSize: 50000,
    elErrorContainer: "#error",
    previewFileType: "video",
    browseLabel: "Select video",
    browseClass: "btn btn-success",
    initialCaption: "upload your videos!",
    uploadExtraData: {videoname: name}
    });
$('#videofile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
        files = data.files,
        extra = data.extra,
        response = data.response,
        reader = data.reader;
    console.log(response);
});
$('#videofile').on('filepreupload', function() {
    name = $("#videoname").val();
});
})

It works fine if I send videoname: "videoname" in the uploadExtraData, but when I try to get it from the input field, it doesnt send anything. I've checked in the filepreupload function that the name variable is correct and that it launches before the upload. If someone knows how to get around this I would really appreciate the help.

• javascript
• twitter-bootstrap
• plugins

Share Improve this question Follow edited May 10, 2015 at 23:48 shaun 1,0171111 silver badges2323 bronze badges asked May 10, 2015 at 19:01 sergeisergei 15733 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You have to add this as an additional input parameter before the upload happens.

This will be triggered when you press the upload button on a single file in the preview window:

$('#videofile').on('filepreupload', function(event, data, previewId, index, jqXHR) {
    data.form.append("videoname", "your_video_name_here");
});

And this will be triggered when you press the upload button to upload every selected file:

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
    data.form = {"videoname": "your_video_name_here"};
});

According to your uploadExtraData parameter, try this:

uploadExtraData: {"videoname": "name"}

If you want, you can also add additional http headers:

$("#videofile").fileinput({
    ajaxSettings: {
        beforeSend: function(xhr){xhr.setRequestHeader('new_header', 'new_header_Value');},
    },
});

I used the same as this but it didnt work

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
data.form = {"videoname": "your_video_name_here"};
});

You can use it instead of that

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
data.form.append('videoname',  $("#videoname").val());
};

Then you have to remove this at the first of your code

uploadExtraData: {videoname: name}

You can use your code but with a little edit:

$('#videofile').on('filepreupload', function (event, data, previewId, index) {
    data.form.append('videoname', $("#videoname").val());
});

And you can Delete 'uploadExtraData' or you can use it to send any static data.

uploadExtraData: {
'static_variable_1': 'static_value_1',
'static_variable_2': 'static_value_2'
}