jQuery.AjaxFileUpload.js Setting params on submitting?

Hi Jordan

First: Thanks a ton for this plugin! It's great!

Except...

I need to pass some form-vars along with the file. But the formvars aren't set, yet, when the instance is initialized.

When I add 'params':{ 'data': $('#myForm').serialize()} I get an empty Element, because the formvars aren't set, yet.

I tried to access the params in the «onStart»-part, but for the life of me, I can't figure out how...

Any ideas?

Thanks a ton!

Aug 23 '12 12:08 swissdude

What are you doing in your onstart to access the values that isn't working?

Can you paste that code?

~J

(via phone) On Aug 23, 2012 5:37 AM, "swissdude" [email protected] wrote:

Hi Jordan

First: Thanks a ton for this plugin! It's great!

Except...

I need to pass some form-vars along with the file. But the formvars aren't set, yet, when the instance is initialized.

When I add 'params':{ 'data': $('#myForm').serialize()} I get an empty Element, because the formvars aren't set, yet.

I tried to access the params in the «onStart»-part, but for the life of me, I can't figure out how...

Any ideas?

Thanks a ton!

— Reply to this email directly or view it on GitHubhttps://github.com/jfeldstein/jQuery.AjaxFileUpload.js/issues/13.

Aug 23 '12 14:08 jfeldstein

I tried something like

$(this).params.data = 'test';

I think I'm just too stupid to access the variables :)

Aug 23 '12 14:08 swissdude

$(this).params isn't what you think it is. Try console.log($(this).params) to see.

I can help you find out how to access the right .params if you paste the code you're using to initialize the plugin.

Aug 23 '12 15:08 jfeldstein

Thanks for the help - here's the code:

$('input[type="file"]').ajaxfileupload({ 'action': 'form_action.php', 'params': { 'id': $('#id').val(), 'data': $('#form').serialize() }, 'onComplete': function(response) {

      var id = toTitleCase($(this).attr('id'));

      console.log(response);
      if(response.result == "ok"){
        // Do stuff
      }else if(response.result == "file"){
          // Do other stuff

      }else{
        // Show alert
      }

  },
  'onStart': function() {

      //here's my foul attempt :)

      $('#portfolio').ajaxfileupload.setSettings({'params': {'id':$('#id').val(),'data':$('#form').serialize()}}); 

      // Do other stuff
  },
  'onCancel': function() {
    //console.log('no file selected');
  },
  'valid_extensions' : ['gif','png','jpg','jpeg','pdf']
});

Aug 23 '12 18:08 swissdude

If you add console.log($('#form').serialize()) inside the onStart callback, does it print the data you'd expect to be sent with the form?

We're trying to determine if we're even getting the right data, and, assuming we are, the next thing we'll do is try to figure out why it's not being sent. But have to make sure we're getting the data we want to send in the first place, first. :^)

~ J

Aug 23 '12 23:08 jfeldstein

Yes, serialize() spits out the expected data when entered in the onStart callback. When added in the params-section, it just reads the form as initialized.

Aug 24 '12 02:08 swissdude

Ok, if anyone has the same problem, here's the solution:

I have an ID that can change while the form is present (calling other functions and then replace some id that I need)

Changing params onSubmit

in the constructor - $('.inputFileField').ajaxfileupload('...') look for the onSubmit()-Function and add something like this:

return {'topID':$('#id_master').val()};

Then, in the plugin, look for this:

var upload_file = function(){...

// let onStart have the option to cancel the upload if(ret !== false) { if(ret.topID != undefined) settings.params.topID = ret.topID; }

this changes the topID in the settings and the new value will be transmitted in the _POST-Array

Hope that helps someone...

Oct 14 '12 14:10 swissdude

swissDude - I've tried your approach and I can't get it to work. i've got this code in the constructor:

$(document).ready(function(){
    $('#fileSelector').ajaxfileupload({
       'action': 'UploadFile',
       'onSubmit': function() {return {'filePath':$('#filePathInput').val()};},
       'params':{
           'filePath':''
           },
       'onComplete': function(response) {         
         $('#infoDiv').html("File Uploaded").fadeOut(5000);
       },
       'onStart': function() {
         console.log($('#filePathInput').val())
         $('#infoDiv').html("Uploading").show();
       }
    });
});

and I've changes the plugin to be this:

uploading_file = true;

              // Creates the form, extra inputs and iframe used to 
              //  submit / upload the file
              wrapElement($element);

              // Call user-supplied (or default) onStart(), setting
              //  it's this context to the file DOM element
              var ret = settings.onStart.apply($element, [settings.params]);

              // let onStart have the option to cancel the upload
              if(ret !== false)
              {
                if(ret.filePath != undefined){
                      settings.params.filePath = ret.filePath;
                }
                $element.parent('form').submit(function(e) { e.stopPropagation(); }).submit();
              }

what am i doing wrong?

Jul 14 '14 16:07 smashmirrorcardboardface

I found out what it is - the function() {return {'filePath':$('#filePathInput').val()};} needs to be in onStart, not onSubmit.

Jul 14 '14 16:07 smashmirrorcardboardface

actually you have to set the parameters as a function . 'params': { 'id': function(){return $('#id').val()}, 'title': function(){return $('#title').val()} }, and in this way you can have the updated values posted. hope this helps