I encountered an issue where I am getting an invalid value from form data. The value appears correct in `this.fileData` with a size of 5701, but becomes empty when converted to form data - `{}` is logged when I console.log the form data. Additionally, accessing `formdata[0]` returns an undefined value.
The problem arises when I expect the backend to receive a valid file when the form data is posted, but instead it receives a picture with a size of 0. My suspicion is that the issue lies within the form data since it seems to be empty.
HTML snippet:
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h3>Choose File</h3>
<div class="form-group">
<input type="file" name="image" (change)="fileProgress($event)" />
</div>
<div *ngIf="fileUploadProgress">
Upload progress: {{ fileUploadProgress }}
</div>
<div class="image-preview mb-3" *ngIf="previewUrl">
<img [src]="previewUrl" height="300" />
</div>
<div class="mb-3" *ngIf="uploadedFilePath">
{{uploadedFilePath}}
</div>
<div class="form-group">
<button class="btn btn-primary" (click)="onSubmit()">Submit</button>
</div>
</div>
</div>
</div>
Typescript snippet:
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { UploadService } from '../../../model/shared/api/upload.service';
import { HttpHeaders } from '@angular/common/http';
import { LoginComponent } from '../../account/auth/login/login.component';
import { HttpClientModule } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
//'Authorization': 'my-auth-token'
})
};
@Component({
selector: 'cd-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit{
fileData: File = null;
previewUrl:any = null;
fileUploadProgress: string = null;
uploadedFilePath: string = null;
constructor(private uploadService: UploadService,private httpClient: HttpClient,private http: HttpClient) {}
fileProgress(fileInput: any) {
this.fileData = <File>fileInput.target.files[0];
this.preview();
}
preview() {
var mimeType = this.fileData.type;
if (mimeType.match(/image\/*/) == null) {
return;
}
var reader = new FileReader();
reader.readAsDataURL(this.fileData);
reader.onload = (_event) => {
this.previewUrl = reader.result;
}
}
onSubmit() {
const formData = new FormData();
formData.append('files', this.fileData);
console.log(this.fileData);
console.log(formData[0]);
console.log(formData);
this.http.post('http://api', formData, {
reportProgress: true,responseType: 'blob' as 'json',
observe: 'events'
})
}
ngOnInit(){}
}
Backend Python Flask code:
@app.route('/bupload', methods=['GET', 'POST'])
def bupload():
result="Upload done";result1="Upload fail";result2="File not allowed";result3="No selected file";result4="No file part";form="123";
print(request.files); print(request.files['files']);
if 'files' not in request.files:
flash('No file part');print(file);
return result4
file = request.files['files'];print(file);print("@0");
if file.filename == '':
flash('No selected file')
return result3
if file and allowed_file(file.filename):
if(upload_First(form, file)):
flash('Upload done');
print("@");
return result
else:
flash('Upload fail')
return result1
else:
flash('File not allowed')
return result2
Additional notes:
- Backend can receive the value ImmutableMultiDict([('files', )]), but the IDF.jpg file has a size of 0.
- Console.log(formData.get('files')) displays detailed information about the uploaded file.
- Console.log(formData) shows an empty FormData object.