Setting params on submitting?

[swissdude]

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!

[jfeldstein]

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//issues/13.

[swissdude]

I tried something like

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

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

[jfeldstein]

$(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.

[swissdude]

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']
});

[jfeldstein]

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

[swissdude]

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.

[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...

[smashmirrorcardboardface]

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?

[smashmirrorcardboardface]

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

[usman-arham]

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

[xzdead]

usman-arham 's solution worked perfectly.

Many thanks!

[enasoft]

Thanks usman-arham, solution worked

[usman-arham]

@xzdead @enasoft u r welcome guys , i am happy that my solution worked for u too :)

[zds-d]

@usman-arham I am using jcrop + AjaxFileUpload + nodejs to achieve a picture cut to the server's demo, O (∩ _ ∩) O Thank you for your answer. perfect

[koffisani]

@usman-arham thank you. You saved me.