If you want to upload file content to remote server using Angular, there are roughly two kinds of methods can achieve requirements.
First is about raw file content. You can upload raw content with other values of form fields together, and their values will be separated automatically by browsers using Content-Type: multipart/form.
myForm: FormGroup = null;
fileName: string = '';
/**
* constructor of a component
*/
constructor(
private _formBuilder: FormBuilder,
)
/**
* Initial Form field
*/
formInitial() {
/**
* I assume two fields must has values so I assign Validators.required to both of them.
*/
this.myForm = this._formBuilder.group({
'deviceName': new FormControl('', [Validators.required]),
'file': [null, Validators.required],
});
}
/**
* Load file content to form
*/
onFileChange(event) {
if (event.target.files && event.target.files.length > 0) {
const file = event.target.files[0]; // get first file
this.fileName= file.name; // set file name to a variable
this.myForm.pathValue({
file,
});
}
}
/**
* Send a request to backend API when clicking a button.
* Notice: You can follow skeleton/structure and create your own.
*/
onSubmit() {
// do your own logic about validating form and checking mechanism
// .
// .
// .
// prepare request body
const requestBody = new FormData();
// assume attribute name: device is defined by backend API swagger document.
requestBody.set('device', this.myForm.get('deviceName').value);
// assume attribute name: execFile is defined by backend API swagger document.
requestBody.append('execFile', this.myForm.get('file').value, this.fileName);
// do your own function about sending request to backend API with request body.
// .
// .
// .
}
Second one is about refined file content. You need to parse content as you need and then you organize them to meet requirements of parameters from backend API. So how to load file content to be parsed? I will show how to load file content to be parsed in memory and you can parse them by your own code. I won’t demonstrate an example how to parse them.
After you finish parsing and organize them, you can send a request containing request body to a backend API. This request’s Content-Type is json in current mostly normal situations.
/**
* Notice: This can be bind with change event for an input field whose type is file.
*/
onFileChange(event) {
const reader: FileReader = new FileReader();
const file = event.target.files[0];
reader.onload = (file) => {
// Validate file content and generate parsed values with adequate format by your own functions
const {validationResult, parsedContent, errorMessageAry} = this._validateContent(reader.result.toString());
/**
* Notice: reader.result has text-type content from a selected file, which is loaded by readAsText().
*/
// Here, the variable: parsedContent has content that be parsed .
};
reader.readAsText(file);
}
/*
* Validate contentn and do transformation for raw content.
*/
private _validateContent(rawFileContent: string) {
// Do your own feature of validation and parsing
// .
// .
// .
return {validationResult, parsedContent, errorMessageAry}
}