title: Implement directory uploads with jQuery File Upload and Rails
body: <p>I'm trying to implement directory uploads with jQuery File Upload plugin by Blueimp. Rails 4 is my backend, and for attachments, I'm using Carrierwave. </p>
  
  <p>The issue now is that, the jquery plugin is not able to recognize the folder that I'm uploading. I already have webkitdirectory parameter passed in the input field. Can someone help me with this?</p>
  
  <p>Thanks in advance. </p>
  
  <p>Here's the jQuery File Upload code in application.js:</p>
  
  <pre><code>$('#fileupload').fileupload({
      dataType: "script",
      sequentialUploads: true,
      // This function is called when a file is added to the queue;
      // either via the browse button, or via drag/drop:
      add: function(e, data) {
          data.context = $(tmpl("template-upload", data.files[
                  0]))
          data.context.addClass('working');
          //$('.upload-status-box').addClass('working');
          $('#Upload-Bar').append(data.context);
          $('.upload-status-box').show();
          // Listen for clicks on the cancel button
          data.context.find('span.cancel-upload').click(
              function() {
                  jqXHR.abort();
                  data.context.fadeOut(function() {
                      data.context.remove();
                  });
                  count = count - 1;
                  removeUploadStatusBoxOnCompletion();
              });
          var jqXHR = data.submit();
          count = count + 1;
      },
      progress: function(e, data) {
          if (data.context) {
              $('.upload-status-box').show();
              progress = parseInt((data.loaded / data.total) *
                  100);
              var uploadMeta = parseInt(data.loaded / 1000000) +
                  "/" + parseInt(data.total / 1000000) +
                  " MB - " + progress + "%";
              data.context.find('.progress-bar').css('width',
                  progress + '%');
              data.context.find('.status').text(uploadMeta);
          }
      },
      done: function(e, data) {
          console.log(
              'Your files have been uploaded successfully!'
          );
          // alert('Your files have been uploaded successfully! Depending on the file size, you might have to wait for a while before performing any actions.');
          count = count - 1;
          data.context.removeClass('working');
          data.context.find('button.cancel-upload').hide();
          removeUploadStatusBoxOnCompletion();
      }
  });
  </code></pre>
  
  <p>And here's my input field:</p>
  
  <pre><code>&lt;div class="awesome-file-uploads" id="inline-upload-status"&gt;
  &lt;%= form_for [myfolder, Myfile.new], html: { multipart: true, :id =&gt; "fileupload" } do |f| %&gt;
      &lt;%= f.file_field :attachment, multiple: true, id: "fileinput", style: "display:none;", "webkitdirectory"=&gt; "", "directory"=&gt; "" %&gt;
      &lt;%= f.hidden_field :myfolder_parent_id, value: myfolder.id %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's the code for uploading and processing the files inside the folder:</p>
  
  <pre><code>    $('#folderupload').change(function(e) {
      e.preventDefault();
      NProgress.done();
      var items = e.target.files;
      var paths = ""; //
      // var myfolder_id = $(this).parent();
      for (var i=0, file; file=items[i]; i++) { 
      paths += file.webkitRelativePath+"###";
      } //
      // uploadFiles(items, myfolder_id.data('inside'));
      $("#paths").val(paths);
      $("#folderupload").submit(); //
  });
  function uploadFiles(items, myfolder_id){
     xhr = new XMLHttpRequest();
      data = new FormData();
      paths = "";
  
      var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
      data.append('authenticity_token', AUTH_TOKEN);
  
      // Set how to handle the response text from the server
      xhr.onreadystatechange = function(ev){
          console.debug(xhr.responseText);
      };
  
      for (var i=0, file; file=items[i]; i++) {
          paths += file.webkitRelativePath+"###";
          data.append(i, file);
      }
  
      data.append('paths', paths);
  
      xhr.open('POST', "/myfolders/"+myfolder_id+"/create_from_folder", true);
      xhr.send(this.data);
  }
  </code></pre>