angularjs POST request gets stuck in OPTIONS and file upload using $http POST

[Jake K.]

Hello,

I am trying to upload a file(s) using this directive: https://github.com/danialfarid/ng-file-upload

In my code I have something like this:

        $upload.http({

            method: 'POST',

            url: 'url-to-api', //this is the url to my api to where I want to upload the file(s)

            file: files, // this a single file or an array of files

            headers: {

                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryuCJ94zRElBkRB6TJ',

                'Access-Control-Allow-Origin': '*'

            }

        })

        .progress(function(evt) {

            console.log('progress');

            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));

        })

        .success(function(data, status, headers, config) {

            // file is uploaded successfully 

            console.log(data);

        });

However the API call gets stuck in the OPTIONS method (which has status 200).

Also, what would be the proper way to send files to a $http POST? I want to try to upload files to the server without using a third party directive (only plain $http post request).

Thanks

[Sander Elias]

Hi Jake,

Does it really get stuck, or is it just uploading a large file?

If I have (multiple) files I want to upload I usually use the browsers FormData helper. and then feed it to $http like this. I believe I got this solution out of this group a long time ago ;)

var payload = new FormData();
// put binary data in your payload here.

$http.post(postUrl, payload, {
  headers: { 'Content-Type': undefined},
  transformRequest: function(data) { return data; }
});

Is this what you where looking for?

Regards

Sander

[Jake K.]

Hello, Sanders

Thanks for getting back to me.

Actually I got it working using the FormData() object. Unfortunately the FormData() is not available in IE9. Now what is really causing an issue is not uploading file(s), but uploading files in IE9.

I am pretty sure it doesn't have to do with file size since I am testing with small files, and as mentioned above I am able to upload files to the server in versions higher than IE 9.

In non IE 9 browsers (Chrome, Firefox, IE >= 10) this piece of code works:

fd = new FormData(); // FormData doesn't work in IE 9

fd.append('file', file);

//call api

$http({ 

    method: 'POST', 

    url: 'upload-to-this-api',

    params: {

        ''param1': paramValue1, 

    },

    data: data, 

    transformRequest: angular.identity,

    headers: {

        'Content-Type': undefined

    }

})

.success(function(data, status){

})

.error(function(data, status){

 

});

Do you happen to know what can be a good replacement for the FormData() object in IE 9?

Thank you, and please let me know if you require more details.

PS: I got my solution from this post: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/KXVWr0eXX1g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

JAKE KWON +1 (604) 655 3109
email: jyk...@gmail.com

• My linkedIn

[Sander Elias]

Hi Jake,

Hmm, so you need to support old legacy stuff. Isn't IE9 only on platforms that can run 10&11? 

There are some polyfills available for ie9 tough: https://github.com/moxiecode/moxie. (No working experience, I'm in the position that I can reject legacy browsers)

Regards

Sander

[Jake K.]

Hello, Elias

Thanks for your reply. I had a look at the legacy support from moxie (https://github.com/moxiecode/moxie)

The only issue that I found is that the documentation doesn't explain how to upload a file in IE 9. The API at https://github.com/moxiecode/moxie/wiki/FileReader doesn't really explain how to create one File image to send to the server for uploading. Moreover there is not a clear set of instructions on how to get a 'ruid', which is required by several of the constructors/methods.

In case you know how to use this plugin, would you be able to guide me on how to use it?

Thanks

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/KXVWr0eXX1g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.