Having encountered an issue with ng-file-upload, I have implemented a code similar to the GitHub example. However, upon attempting to upload a file, I am confronted with the following error:
Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (xhr) {
if (!xhr || !(xhr instanceof XMLHttpRequest)) return;
config.__XHR = xhr;
if (config.xhrFn) config.xhrFn(xhr);
xhr.upload.addEventListener('progress', function (e) {
e.config = config;
notifyProgress(getNotifyEvent(e));
}, false);
//fix for firefox not firing upload progress end, also IE8-9
xhr.upload.addEventListener('load', function (e) {
if (e.lengthComputable) {
e.config = config;
notifyProgress(getNotifyEvent(e));
}
}, false);
}' is not a valid HTTP header field value.
I am utilizing the latest version of ng-file-upload alongside angular 1.5.0 (tested with 1.4.7 as well, same error persists). Adhering closely to the example, my HTML directive with upload appears as follows:
<div>
<label>{{field.label}} <span ng-if="field.required" class="text-red">*</span></label>
<p ng-show="field.help">
{{field.help}}
</p>
Drop File:
<div ngf-drop ngf-select ng-model="files" class="drop-box"
ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
accept="image/*,application/pdf"
ngf-pattern="'image/*,application/pdf'">Drop pdfs or images here or click to upload</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
Files:
<ul>
<li ng-repeat="f in files">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
</ul>
Upload Log:
<pre>{{log}}</pre>
</div>
Incorporating my own upload service:
scope.$watch('files', function() {
scope.upload(scope.files);
});
scope.log = '';
scope.upload = function(files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.$error) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: file
}
}).progress(function(evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
scope.log = 'progress: ' + progressPercentage + '% ' +
evt.config.data.file.name + '\n' + scope.log;
}).success(function(data, status, headers, config) {
$timeout(function() {
scope.log = 'file: ' + config.data.file.name + ', Response: ' + JSON.stringify(data) + '\n' + scope.log;
});
});
}
}
}
};
Additionally, including a shim before angular.js:
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="vendor/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
...
<script type="text/javascript" src="vendor/ng-file-upload/ng-file-upload.js"></script>
<script type="text/javascript" src="src/app/app.js"></script>
<script type="text/javascript" src="src/app/client/client.js"></script>
Seeking assistance in identifying the potential cause of this error.