Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uploadAll sending stale formData #225

Closed
PawelDecowski opened this issue Aug 27, 2014 · 14 comments
Closed

uploadAll sending stale formData #225

PawelDecowski opened this issue Aug 27, 2014 · 14 comments

Comments

@PawelDecowski
Copy link

I have a form which, in addition to uploading a file, sends some other fields. For clarity, I send only one field in this example:

$scope.save_with_upload = function(user) {
    $scope.uploader.formData = [{
        name: user.name,
    }];

    $scope.uploader.uploadAll();
}

Let’s say the value of the name input is Test 1.

  1. When I first load the page and click Save, it sends the file but doesn’t send formData at all.
  2. Then I change name field to Test 2 and hit Save. It sends the file and formData, but the value of name it sends is Test 1.
  3. Then I change name field to Test 3 and hit Save. It sends the file and formData, but the value of name it sends is Test 2.
  4. … and so on …

So it seems to always send the data that was assigned to formData before the last call to uploadAll.

To clarify: If I do dir(user, $scope.uploader.formData) just before calling uploadAll, it shows correct up-to-date values in both.

I’ve been struggling with it for a few hours and just can’t seem to see what’s wrong. Any ideas?

@sraparla
Copy link

if you want to send the form data along with the upload..do it this way
var uploader = $scope.uploader = new FileUploader({
url:'someUrl',
formData:[]
})
uploader.onBeforeUploadItem = function(item) {
item.formData.push({kf_Upload: $scope.dynamicUploadID['kf_Upload']});
}

@PawelDecowski
Copy link
Author

@sraparla I can’t do it this way because I don’t know the values of the fields at the time of instantiation of the FileUploader class. The form fields can be edited by the user after the class has been instantiated so I need to be able to assign the formData after the user has hit Save and before calling uploadAll.

@sraparla
Copy link

yeah..i don't understand..can u provide a jsfiddle of what you want

@nervgh
Copy link
Owner

nervgh commented Aug 29, 2014

@PawelDecowski , see faq How to update FileItem options before uploading

// add all fields
uploader.onBeforeUploadItem = function(item) {
    Array.prototype.push.apply(item.formData, uploader.formData);
};

@PawelDecowski
Copy link
Author

@nervgh Thanks, that works. But what fixed it? Because you’ve changed a couple of things. Is it the use of the callback, or the fact that you attach the data to a FileItem, rather than to the FileUploader?

@nervgh
Copy link
Owner

nervgh commented Aug 29, 2014

But what fixed it?

Nothing. FileItem will be created when the file will be added to queue. In this moment uploader options will be copied to FileItem

@nervgh nervgh closed this as completed Aug 29, 2014
@stephaneeybert
Copy link

I'm still puzzled...

First I wonder what is the difference between the options attribute and the uploader.formData property.

Second, I also was pushing the uploaded formData onto the file item formData with:

uploader.onBeforeUploadItem = function(item) {
  Array.prototype.push.apply(item.formData, $scope.uploader.formData);
  console.info('onBeforeUploadItem', item);
};

But doing this would duplicate the file item formData item object and have a formData array of length 2 instead of 1 element.

Here is how I set my uploader.formData property:

$scope.uploader.formData = [{
  rolloutId: currentRollout.id
}];

So I removed the call: Array.prototype.push.apply(item.formData, $scope.uploader.formData);

Now I only do the:

$scope.uploader.formData = [{
  rolloutId: currentRollout.id
}];

And it works fine.

But I sense I don't fully understand the thing...

@rboughani
Copy link

Thanks it work

@mani242530
Copy link

HI.

how do I pass formdata. plz advsie. I was trying for long hours.
I need to pass these three datas along with the file.
accountList: $scope.accountList.Value,
filedescriptor: $scope.filedescriptor,
txntypename: $scope.txntypename

var uploader = $scope.uploader = new FileUploader({
url: 'en/external/bmls/batches/uploadbatch.bml',
formData:[]
});

please reply asap. many thanks

@michaelmccarver
Copy link

$scope.uploader = new FileUploader({
    url: $scope.uploadUrl,
    removeAfterUpload: true,
    onBeforeUploadItem: function (item) {
        var stuff = {
            profiles: [1426, 1427, 1428],
            profiles_groups: '',
            upload_type: 'BROWSER',
            username: $scope.username,
            file_name: $scope.uploader.queue[0].file.name,
            file_size: $scope.uploader.queue[0].file.size,
            file_type: $scope.uploader.queue[0].file.type,
            file_created_date: 135479928,
        }
        item.formData.push(stuff);
    },
    onSuccessItem: function (item, response, status, headers) {

    },
    queueLimit: 1,
});

OR
onBeforeUploadItem: function (item) {
var stuff = {
profiles: [1426, 1427, 1428],
profiles_groups: '',
upload_type: 'BROWSER',
username: $scope.username,
file_name: item.file.name,
file_size: item.file.size,
file_type: item.file.type,
file_created_date: 135479928,
}
item.formData.push(stuff);
},

My biggest misconception was that the form data is attached to the item and not the uploader.
@nervgh Great tool, thanks for your hard work...

@yasharma
Copy link

one can also do like that, if someone wants to send data on click of button with attached function save()

$scope.uploader.onBeforeUploadItem = function(item) {
    item.formData.push($scope.post);
};

$scope.save = function(user) {
    $scope.uploader.uploadAll();
};

$scope.post will contains your data eg. title, body.

@sebastianfelipe
Copy link

On the server side, how can you get the data in that formData? I can't find it, I tried in req.body, req.query, req.params, ctx.args (loopback nodejs). Thanks.

@yasharma
Copy link

@sebastianfelipe you can get your uploaded file on server side within req.file and data would be in req.body.

@sebastianfelipe
Copy link

mmm... I can't receive anything in those variables, I'm using loopback, and in the beforeRemote method it still without appear. In the afterRemote method I can get access at the file variable, but not before. I would like to use the req.body, that is the only but it appears after the whole file has been uploaded, and is late to do some staff, like reject the file :c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants