title: bootstrap krajee fileinput upload text from input field
body: <p>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:</p>
  
  <pre><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();
  });
  })
  </code></pre>
  
  <p>It works fine if I send <code>videoname: "videoname"</code> 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.</p>