Sending file upload with form data.

[wpoosanguansit]

Hi,

Is it possible to send other form data like input strings along with the file upload? Can I just gather the information into the scope and manually send it with the $http.uploadFile function? Thank you for your help.

[danialfarid]

Currently no, but it is pretty straightforward to add that in, I am gonna update the Demo and example with that either tomorrow or the day after. In case you are using Java for the server side, I will also post the server side code in the demo which is deployed on google appengine.
Basically you just need to provide 'data' parameter to the uploadFile function.
It's gonna be available on version 0.1.1

[wpoosanguansit]

Thank you for your help. It would be very helpful if you can show multiple files with multiple inputs upload programmatically from clicking a submit button. I hope that is possible with your directive.

On Aug 8, 2013, at 10:06 PM, danialfarid [email protected] wrote:

Currently no, but it is pretty straightforward to add that in, I am gonna update the Demo and example with that either tomorrow or the day after. In case you are using Java for the server side, I will also post the server side code in the demo which is deployed on google appengine.
Basically you just need to provide 'data' parameter to the uploadFile function.
It's gonna be available on version 0.1.1

—
Reply to this email directly or view it on GitHub.

[danialfarid]

Since FileAPI submit multiple files one by one to the server it is not possible to submit multiple files and inputs together.
Submitting the data and file upload together is not a good idea anyway. If you want a responsive UI it's better to start uploading the file as soon as the user selects it in the background and let them fill up the rest of the form then once the upload is done you can submit the rest of the form with an id to the file that is uploaded. On the server side you can save the uploaded file in a tmp directory with a generated uuid as its name. Then you can return that uuid to the client and the client code can send the data on the page along with the uuid to the server so you would know which file is assigned to this form on the server.

If you have multiple files you can call uploadFile in a loop for each of them. You can send data along with each file to the server in the next version.
I will update the code to allow sending data with the file. But it is gonna be a single file and for multiple files it needs to be done in a loop, NOT a single transaction for all of them, which I believe is a more ajaxy way of doing it like the way gmail attachments work.

[danialfarid]

Ok I have updated the code and demo with the new version 0.1.1 which allows sending data along with the file.
Let me know if this works for you.

[wpoosanguansit]

Thank you, I will try it out.

On Aug 13, 2013, at 5:03 PM, danialfarid [email protected] wrote:

Ok I have updated the code and demo with the new version which allows sending data along with the file.
Let me know if this works for you.

—
Reply to this email directly or view it on GitHub.

[candreoliveira]

When I try to upload a form with a file and data using:

$upload.upload({
                url: "url",
                data: { 'js': 'object'},
                file: $file,
...

I get the data object as a string "[object Object]".
Any idea?

[danialfarid]

What version? do you get 'js' as string or 'data' as string?
Do you have any transformRequest in the option?

[candreoliveira]

version: 1.1.2
The data is received as a string "[object Object]" on server. I have nothing in options beyond url, data and file.

[danialfarid]

It is fixed in 1.1.4 and later. Try the latest version or 1.1.4.

[candreoliveira]

👍

Please, link me the commit to fix that. I'd like to understand the problem.

[danialfarid]

https://github.com/danialfarid/angular-file-upload/blob/1.1.4/angular-file-upload.js#L20
This is the original fix but the newer version uses angular default transformRequest to convert it to json.