Django Angular File Upload - Upload works in Postman but does not with angular 7 - django

Question

 I have Django Backend that accepts File with other data as a request.
When I use File Upload API from Postman to submit File and other form data. Postman Request It works fine and Prints
<QueryDict: {u'csv': [<InMemoryUploadedFile: log_2018_10_09-
11_57_16_Summary_subject23_hrm.csv (text/csv)>], u'device_name':
[u'Zephyr']}>
and file successfully get stored.
But when I am trying to do it with Angular it logs empty object.
Below is my Angular Code.
// HTML
<input hidden type="file" id="csv" name="csv" accept=".csv"
(change)="onFileChange($event)" #fileInput>
// On Change Method
onFileChange(evt: any) {
console.log(this.fileNames.toString());
if (evt.target.files && evt.target.files[0]) {
console.log(evt.target.files[0]);
this.file = evt.target.files[0];
this.fileNames.push({ name: this.file.name });
this.processFile(this.file).then(data => this.newMethod(data));
this.showUploadButton = false;
this.showFileName = true;
}
console.log(this.fileNames[0].name);
}
processFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
private newMethod(data: any): void | PromiseLike<void> {
// this.uploadData.append('csv', data);
this.form.get('csv').setValue(this.file);
return data;
}
// On Submit Method
onSubmit() {
this.uploadData.append('device_name', this.form.get('device_name').value);
this.uploadData.append('csv', this.form.get('csv').value);
this.backendService.insertCSV(this.uploadData).subscribe(
response => {
console.log(response);
},
error => {
console.log('error', error);
}
);
}
// Call to Backend
HttpUploadOptions =
new HttpHeaders({
'content-type': 'multipart/form-data',
});
insertCSV(fileData): Observable<any> {
for (const iterator of Array.from(fileData.entries())) {
console.log(iterator);
}
// Prints Below on Browser console
// (2) ["csv", File(168761)]
// (2) ["device_name", "Zephyr"]
return this.http.post('http://127.0.0.1:8000/upload/', { data:
fileData, headers: this.HttpUploadOptions});
}
Gives an Error on Console in Browser
And Prints on Django
{u'headers': {u'normalizedNames': {}, u'lazyUpdate': None}, u'data': {}}
Please Help Me!

Answer 1

I'm suspecting that, following lines are not waiting for the callback on reader.onload to finish. Meaning file upload is not finished. Move them inside the reader.onload function.
// On Change Method
onFileChange(evt: any) {
if (evt.target.files && evt.target.files[0]) {
const file = evt.target.files[0];
const reader = new FileReader();
reader.onload = () => {
this.form.get('csv').setValue(file);
reader.readAsText(evt.target.files[0]);
this.uploadData.append('csv', this.form.get('csv').value);
};
}
}

Answer 2

I had a similar problem with React and Django. Turns out, when using a multipart/form-data with front-end, you shouldn't set the header:
// Call to Backend
HttpUploadOptions =
new HttpHeaders({
'content-type': 'multipart/form-data',
});
Not even content-type: '', completely remove it. You have to let the browser set it, since they also add the boundary to it.
More information about why not to set it:
What is boundary and why I had to delete the header?
Multipart form allow transfer of binary data, therefore server needs a
way to know where one field’s data ends and where the next one starts.
That’s where boundary comes in. It defines a delimiter between fields
we are sending in our request (similar to & for GET requests). You can
define it yourself, but it is much easier to let browser do it for
you.