Implement multiple drag and drop file uploads within one form using jquery-simple-upload

user_3803217 0
Viewed 275

Using the plugin from kanety jquery-simple-upload works well. However, I am failing when trying to have multiple upload fields within one form. The multiple upload fields are actually created dynamically upon user request using jquery.

<input type="hidden" name="foto_0" value="">
<input type="file" name="bild" multiple="false" id="basic_0">
<div id="basicdropzone_0" class="dropZone"><div>drop pic here</div></div>
<div id="basicprogress_0"></div>
<div id="basicmessage_0"></div>



<input type="hidden" name="foto_1" value="">
<input type="file" name="bild" multiple="false" id="basic_1">
<div id="basicdropzone_1" class="dropZone"><div>drop pic here</div></div>
<div id="basicprogress_1"></div>
<div id="basicmessage_1"></div>

and so on. The numeration is created on the fly. With each new upload element, the plugin is bound to the element by using:

        function BindUpload(i) {
              $('#basic_'+i).simpleUpload({
                url: 'ajax_upload.php',
                method: 'post',
                params: { key: 'test' },
                ajax: {
                  headers: { 'X-Test': 'test' },
                  statusCode: {
                    200: function() {
                      console.log('success!');
                    }
                  }
                },
                dropZone: '#basicdropzone_'+i,
                progress: '#basicprogress_'+i
              }).on('upload:progress', function(e, file, i, loaded, total) {
                console.log('progress ' + i + ' ' + loaded + '/' + total);
              }).on('upload:done', function(e, file, i, data) {
                console.log('done ' + i);
                var picdata=JSON.parse(data);
                $("input[name=foto_"+i+"]").val(picdata.pic);
                console.log(bilddaten.bild);
                $('#basicmessage_'+i).prepend('<p>done: ' + file.name + '</p>');
              });
        }

When I drop a file in the first element, everything works as expected. However, when dropping a file in the second or other element, although it works it still uses the first element and inserts the newly uploaded pic there.

Anyone using this plugin for multiple upload fields within the same form?

upload jquery
1 Answers

Found the problem and the solution. Binding the plugin did not bind the i variable obviously. However, passing the i variable when binding to the server side upload script and passing it back when done, solved the issue.

function BindUpload(i) {
  $('#basic_'+i).simpleUpload({
    url: 'ajax_upload.php',
    method: 'post',
    params: { 'foto': 'foto_'+i },
    ajax: {
      
    },
    dropZone: '#basicdropzone_'+i,
    progress: '#basicprogress_'+i
  }).on('upload:done', function(e, file, i, data) {
    var picdata=JSON.parse(data);
    $("input[name="+picdata.foto+"]").val(picdata.bild);
  });
}

added the params and used it in the callback solved the whole thing.

user_38032170
Related