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

3 Answers 3

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'
}