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

[benbracha]

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)

[danialfarid]

This is just a warning so you can ignore it:

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

[benbracha]

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

And I think it is ok.

[benbracha]

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?

[danialfarid]

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

[benbracha]

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

[danialfarid]

include angular-file-upload-shim.js

[benbracha]

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

[danialfarid]

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

[benbracha]

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

[danialfarid]

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"

[benbracha]

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?

[danialfarid]

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.

[benbracha]

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.

[danialfarid]

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.

[benbracha]

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?

[danialfarid]

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

[benbracha]

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
.

[danialfarid]

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.

[danialfarid]

related issue #79

[thebigredgeek]

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

[danialfarid]

@benbracha
FileReader readAsDataURL polyfill has been added since version 4.2.0