I am currently facing an issue with uploading multi-part data to my API. To achieve this, I have created a FormData object for the upload process. Initially, I gather all the necessary user input data such as an image (file) and category (string). These values are extracted from the template and stored in categoryForm: FormGroup. However, when attempting to transfer these values to a FormData object for submission to the API, I encounter the following error:
{"src":["No file was submitted."],"tag":["This field is required."]}
Upon inspecting the browser console, it becomes apparent that the FormData object remains empty. Despite successfully logging the categoryForm values and confirming that they contain the expected data, the values do not seem to be reassigned to formData. The issue appears to lie within the section where the values of categoryForm should be assigned to formData. I believe there are no issues with the categoryForm or the template, as logging them separately displays the correct data for both category and image.
Could someone provide assistance in resolving this problem?
Code Snippet
apiSubmit() {
console.log(this.categoryForm.value) // returns values
console.log(this.categoryForm.get('category').value); // returns values
console.log(this.categoryForm.get('image').value); // returns values
const formData = new FormData();
formData.append('category', this.categoryForm.get('category').value);
formData.append('image', this.categoryForm.get('image').value);
console.log(formData); // doesn't return values
this.http.post<any>(this.url, formData, httpOptions).subscribe(
(res) => console.log(res),
(err) => console.log(err)
);
}]
Browser Console Logs