Setting custom headers for $upload.upload() or sending file with $upload.http() in IE8-9

Question

Setting custom headers for $upload.upload() or sending file with $upload.http() in IE8-9

benbracha opened this issue 11 years ago · comments

I wanted to send file's content to the server, and it expects a
'Content-Type': 'application/octet-stream'
But even when setting it in the $upload.upload() (setting the 'headers'), it gets overridden.

Daniel answer for this:
$upload.upload() need to have the content type formdata-multipart for the server to be able to decode the content of the request so you cannot change that.

For that purpose, we should use the $upload.http() call, as here:
See this: #88 (comment)

Danial Farid · Answer 1 · Tue Feb 11 2014 23:31:05 GMT+0800 (China Standard Time)

This is just a warning so you can ignore it:

ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.

Ben Bracha · Answer 2 · Tue Feb 11 2014 23:36:08 GMT+0800 (China Standard Time)

I see.
Well I used this instead:
fileReader.readAsBinaryString(file);

And I think it is ok.

Ben Bracha · Answer 3 · Wed Feb 12 2014 00:00:31 GMT+0800 (China Standard Time)

Hey,

I now see that FileReader is not defined in IE9. And I need to support that..
As I understand, the $upload.upload() takes care of old browsers, but I'm using $upload.http() and therefore I need the file reader, as you said.

What is your suggestion?

Danial Farid · Answer 4 · Wed Feb 12 2014 00:10:34 GMT+0800 (China Standard Time)

Use a FileReader polyfill library for those browsers like this:
https://github.com/Jahdrien/FileReader

Ben Bracha · Answer 5 · Wed Feb 12 2014 00:42:10 GMT+0800 (China Standard Time)

Thanks.

Added it, and now I have a file reader.
But it seems that I don't get any files from your directive.

$scope.onFileSelect = function ($files) {
certFile = $files[0];
};

I get an empty array when I chose a single file..
Once again, IE9

Danial Farid · Answer 6 · Wed Feb 12 2014 01:55:27 GMT+0800 (China Standard Time)

include angular-file-upload-shim.js

Ben Bracha · Answer 7 · Wed Feb 12 2014 01:56:25 GMT+0800 (China Standard Time)

Did that (the min version).. and put it before angular.js

Danial Farid · Answer 8 · Wed Feb 12 2014 06:40:17 GMT+0800 (China Standard Time)

Then I need to see your code and any errors you get in the logs.

Ben Bracha · Answer 9 · Wed Feb 12 2014 16:22:14 GMT+0800 (China Standard Time)

Ok.
Regarding console - I do get this when setting IE to IE9 document-mode, but I don't think it is related:

LiveReload disabled because the browser does not seem to support web sockets
SCRIPT5007: Unable to get property 'addPlugin' of undefined or null reference
File: livereload.js, Line: 956, Column: 5

Regarding code:

Here is the order of loading scripts:

src="libraries/jquery/jquery.js"
src="libraries/ng-file-upload/angular-file-upload-html5-shim.min.js"
src="libraries/angular/angular.js"
src="libraries/ng-file-upload/angular-file-upload.min.js"

And here is the part for loading the file-reader

src="libraries/swfobject/swfobject/swfobject.js"
src="libraries/jquery-ui/ui/minified/jquery-ui.min.js"
src="externals/filereader/jquery.FileReader.min.js"

As for the view, I'm just using an input with type=file and binding using the ng-file-select directive.
And the controller:

var certFile = null;
$scope.onFileSelect = function ($files) {
certFile = $files[0];
};

The function is called, but the $files is an empty array.

In the file-reader documentation, I should initialized the file-reader using:
$(“#element(s)”).fileReader( options );
Probably on the element of the file-input... I didn't do that though, but I don't think it is related as well.
BTW - I'm not sure what exactly I should do in this initialization.

Thanks

Danial Farid · Answer 10 · Thu Feb 13 2014 02:50:42 GMT+0800 (China Standard Time)

include src="libraries/ng-file-upload/angular-file-upload-shim.min.js" not
src="libraries/ng-file-upload/angular-file-upload-html5-shim.min.js"

Ben Bracha · Answer 11 · Thu Feb 13 2014 05:18:38 GMT+0800 (China Standard Time)

Nice, now I see that the controller gets the selected file.
But I don't see the file name in the input-box near to the "browse" button.
Is that a bug?

Danial Farid · Answer 12 · Thu Feb 13 2014 05:53:25 GMT+0800 (China Standard Time)

No it's not a bug, that's a flash button, show the file name using angular $files[0].name
If you see the demo page only the button is visible and then the selected file is shown to the user by angular.

Ben Bracha · Answer 13 · Thu Feb 13 2014 06:02:35 GMT+0800 (China Standard Time)

Thanks.
What demo do you mean? Can you send a link?

I still can't get it worked. When doing:
var fileReader = new FileReader();
fileReader.readAsBinaryString(file);

I get the following error:
Could not complete the operation due to error 8070000b.

Did you encounter such issue? I cannot find any information on this.

Danial Farid · Answer 14 · Thu Feb 13 2014 06:16:28 GMT+0800 (China Standard Time)

The Demo is the first link on the README home page of this module.

If you are using FileReader polyfill to read the file you gotta use their own way of reading the files in order to work. See the https://github.com/Jahdrien/FileReader Usage.
So you gotta define your own directive to use FileReader to select the file and read its content.
Then you can use $upload.http() to upload it.

However FileAPI new version gonna have FileReader polyfill and hopefully it will be released this month. That's why I haven't integrated any other file reader polyfill in here and waiting for that to complete.

Ben Bracha · Answer 15 · Thu Feb 13 2014 16:21:27 GMT+0800 (China Standard Time)

I see.
If that so, I'll probably wait for that the complete and use your module for it. I like to work with your directive :)
Thanks for all the help!

How can I be notified when this is done?

Danial Farid · Answer 16 · Thu Feb 13 2014 22:58:23 GMT+0800 (China Standard Time)

I will close this issue once the FileAPI's FileReader is ready to be integrated with $upload.http()

Ben Bracha · Answer 17 · Thu Feb 13 2014 23:01:11 GMT+0800 (China Standard Time)

Great thanks!

From: danialfarid [mailto:notifications@github.com]
Sent: Thursday, February 13, 2014 4:58 PM
To: danialfarid/angular-file-upload
Cc: Ben Bracha
Subject: Re: [angular-file-upload] I want to set the content-type but it
seems to be overridden in the $upload.upload() function (#129)

I will close this issue once the FileAPI's FileReader is ready to be
integrated with $upload.http()

Reply to this email directly or view it on
GitHubhttps://github.com//issues/129#issuecomment-34985614
.

Danial Farid · Answer 18 · Thu Feb 20 2014 05:33:03 GMT+0800 (China Standard Time)

Actually it is not that easy to support uploading the file content directly in a post for IE8-9 with flash.
The problem is that non of FilePAI and FileReader polyfills support FileReader.readAsArrayBuffer() and to send the exact binary of the file to the server you need a kind of array buffer and if you use readAsBinaryString there will be encoding issues and the string sent to the server will contain extra characters.

I also posted on stackoverflow but got no response so far. So for now there will be no support for $upload.http() for non-HTML5 browsers unless I find another workaround.

Although after the new release of FileAPI I can add FileReader.readAsDataURL() polyfill that would enable the thumbnail preview of the images before uploading for non-HTML5 browsers but have no solution for sending the file content to the server using ajax or flash yet.

Danial Farid · Answer 19 · Thu Feb 20 2014 05:42:04 GMT+0800 (China Standard Time)

related issue #79

Andrew E. Rhyne · Answer 20 · Fri Jun 13 2014 06:18:56 GMT+0800 (China Standard Time)

So there is no way to send custom headers with flash? Seems fairly ridiculous?

Danial Farid · Answer 21 · Sat May 09 2015 02:32:17 GMT+0800 (China Standard Time)

@benbracha
FileReader readAsDataURL polyfill has been added since version 4.2.0