Question

I’m using the excellent Jquery-Filedrop [weixiyen] used by tutorialzine and I’m stuck on a problem trying to send dynamic POST variables, explained as follows:

I have an html form select drop-down (photo_tab_index) where user can choose a slideshow number (say 1-5) and then a dropbox canvas where the user drops their photos onto to upload to the web server.

In the filedrop javascript I have the following:

$(function(){
  var dropbox = $('#dropbox'),
  message = $('.message', dropbox);

  var slideshow = document.getElementById('photo_tab_index').value;

  dropbox.filedrop({
    // The name of the $_FILES entry:
    paramname:'pic',
    data: {
      param1: slideshow,           // send POST variables
    },
    ...

    // Called before each upload is started
    beforeEach: function(file){
      if(!file.type.match(/^image\//)){
        alert('Only images are allowed!');
        return false;
      }
    },
    ...

The problem I have is that the javascript reads the value of the photo_tab_index when it renders the page (and hence are always sent as “1”) but what I really want is for it to read the slideshow dropdown value at the point that photos are dropped on the drop box. In my limited JQuery knowledge I have a feeling that I want to be updating the dropbox.filedata “data: param1” field in the beforeEach: function but I’m not sure how I would reference it?

Answer 1

So to conclude for those having the same problem, you can use the example param2 function to calculate the POST variable at the point of uploading, so:

data: {
   param2: function(){
       var slideshow = document.getElementById('photo_tab_index').value;     
       return slideshow; // calculate data at time of upload,           
   },     
},