title: jQuery : a drag-and-drop upload with multi dropzone
body: <p>I want to develop a tree of folders and files with a drag-and-drop upload on folders.</p>
  
  <p>Example:</p>
  
  <p><img src="https://i.stack.imgur.com/DGr3G.png" alt="enter image description here"></p>
  
  <p>For the drag-and-drop upload, I fund <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow noreferrer"><strong>jQuery File Upload</strong></a>.</p>
  
  <p>The basic code is:</p>
  
  <pre><code>$('#fileupload').fileupload({
      dataType: 'json',
      url: 'php/index.php',
      dropZone: $(document),
      done: function (e, data) {
          $.each(data.result, function (index, file) {
              $('&lt;p/&gt;').text(file.name).appendTo(document.body);
          });
      }
  });
  </code></pre>
  
  <p>In my project, I've multi dropzone (my folders) like for example :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Bookmarks&lt;/li&gt;
      &lt;li&gt;Search&lt;/li&gt;
      &lt;li&gt;Web dev&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>How to change the code above to handle the multi dropzone with id, class and jQuery selectors?</strong></p>
  
  <hr>
  
  <p>I tried something like this but obviously it doesn't work:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="folder1" class="folder"&gt;Bookmarks&lt;/li&gt;
      &lt;li id="folder2" class="folder"&gt;Search&lt;/li&gt;
      &lt;li id="folder3" class="folder"&gt;Web dev&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>$('.folder').fileupload({
      dataType: 'json',
      url: 'php/index.php',
      dropZone: $('.folder'),
      done: function (e, data) {
          $.each(data.result, function (index, file) {
              $('&lt;p/&gt;').text($(this).attr(id)).appendTo(document.body);
          });
      }
  });
  </code></pre>
  
  <p><strong>Issues:</strong></p>
  
  <ul>
  <li>the upload is done 3 times.</li>
  <li>$(this) doesn't exist.</li>
  </ul>