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

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

Closed
benbracha opened this issue Feb 11, 2014 · 21 comments

Comments

@benbracha
Copy link

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
Copy link
Owner

This is just a warning so you can ignore it:

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

@benbracha
Copy link
Author

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

And I think it is ok.

@benbracha
Copy link
Author

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
Copy link
Owner

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

@benbracha
Copy link
Author

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
Copy link
Owner

include angular-file-upload-shim.js

@benbracha
Copy link
Author

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

@danialfarid
Copy link
Owner

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

@benbracha
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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

@benbracha
Copy link
Author

Great thanks!

From: danialfarid [mailto:[email protected]]
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
Copy link
Owner

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
Copy link
Owner

related issue #79

@thebigredgeek
Copy link

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

@danialfarid
Copy link
Owner

@benbracha
FileReader readAsDataURL polyfill has been added since version 4.2.0

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

3 participants