Having file upload problems in an Angularjs/Nodejs app.
I implemented this angular-file-upload directive. Using it, file upload works in all modern browsers but it fails in IE9. By "fails" I mean that it acts like it's working... I can log the file upload progress and see it progressively reach 100%, a success log message is triggered in the success handler (nothing is triggered in the error handler) but the file never appears in the upload directory (on the same machine).
There are no console errors of any sort and I set the upload directory permissions to 777 in order to rule out that.
The things that I have found that are off... first, files uploaded in IE9 never trigger log messages I have placed in my uploadPhoto function so the route appears to not even be hitting (thought files uploaded in modern browsers DO trigger these log messages). Also, after an upload, in the Network panel of the developer tools the value for the Type should not be text/html as it is below.
(the below maps to: URL, Method, Result, Type, Received
):
/path/to/upload-dir/filename.jpg GET 200 text/html 20.7kb
Here is my file upload handler:
$scope.onFileSelect = function ($file) {
$scope.ajaxVisible = true;
$scope.uploadError = false;
var photo = $file[0];
$scope.upload = $upload.upload({
url: '/upload/photo',
file: photo,
method: 'POST'
}).progress(function (evt) {
}).success(function (data, status, headers, config) {
$scope.toggleUploadForm();
$scope.imgsrc = 'path/to/upload/dir/' + photo.name;
User.currentUser.profile_image = photo.name;
User.updateUser();
$scope.ajaxVisible = false;
}).error(function (err) {
$scope.uploadError = true;
$scope.ajaxVisible = false;
});
};
Here is the handler for that route (expressjs/node):
app.post('/upload/photo', userAPI.uploadPhoto);
Here is uploadPhoto that is referenced in the route handler:
exports.uploadPhoto = function(req, res) {
logger.info('inside uploadPhoto'); // <-- never reached using IE9
var callbacks = {};
callbacks.uploadSuccess = function(){
res.json('success');
};
callbacks.uploadFailure = function(err){
res.json(400, 'Error uploading image.');
};
user.handlePhotoUpload(req.files, callbacks);
};
Which, at long last, hands things off to:
this.handlePhotoUpload = function(params, callbacks) {
logger.log('inside handlePhotoUpload'); // <-- never reached using IE9
if(params.file.mime !== 'image/png' && params.file.mime !== 'image/jpeg' && params.file.mime !== 'image/gif') {
callbacks.uploadFailure('Wrong file type');
return;
}
fs.readFile(params.file.path, function(err, data){
if(err){
callbacks.uploadFailure(err);
}
var newPath = path.resolve("./path/to/upload/dir/" + params.file.filename);
fs.writeFile(newPath, data, function(err) {
if(err){
callbacks.uploadFailure(err);
}
callbacks.uploadSuccess();
});
});
};
This directive utilizes the FileAPI library on the backend and requires Flash to handle the uploading process. I assume that Flash is the source of the problem. I'm missing something with it but not sure what it might be.
As I said, no errors in console (in any browser) and the file upload shows all the signs of working except that the file never appears in the upload dir. But, various log statements which are reached when uploading via a modern browser are never reached when uploading via IE9.
Suggestions as to how to troubleshoot this are as welcome as suggestions of solutions.