Загрузка файла в группу форм в angular и отправка его в Django API

У меня есть форма во внешнем интерфейсе с несколькими элементами, т.е. имя, электронная почта, телефон, а также поле для ввода файла. Для группировки всех этих элементов в одной форме в Angular используется группа Form. В Django также есть соответствующая модель (с использованием Django Rest Framework). Мне не удалось добиться отправки файла в API, даже если остальные данные отправляются правильно и сохраняются на back-end.

Сначала мне удается успешно загрузить файл на Front-end, ниже я веду журнал в консоли: enter image description here

Во-вторых, объект, который я отправляю, выглядит примерно так:

{"name":"name", "age":49, "email":"email@field.com", "file":File}

Файл в JSON - это тот же объект файла, который отображается в консоли выше.

Я протестировал свой бэкенд с помощью Postman, я смог успешно сохранить файл, а также другие данные. (Я считаю, что проблема скорее на стороне Front-end).

Решения, которые я нашел для загрузки файла в Angular, использовали данные формы (т.е. here), эти решения не были удобными, так как форма состоит только из файла, однако в моем случае у меня есть файл, а также другие данные (Form Group).

Еще одна вещь, которую я пробовал и которая не сработала, заключалась в следующем: поместить объект формы Data с файлом в ключ "file" отправляемого JSON. Но и это не помогло.

Также, вот как я загружаю файл в angular:

   public file: File | null = null;
   public form: FormGroup;
   formData = new FormData();
   
   ngOnInit(){
     this.form = this.fb.group({
            name: [], [Validators.required]],
            age: [],
            email: [], [Validators.required]],
            file: []});
    
    fileUploadedHandler(file) {
        this.file = file;
        this.formData.append("file",file, file.name);
        this.form.patchValue({file:file}); //this.formData});
        this.createDocumentForm.updateValueAndValidity();
        console.log(file);}
  }

Есть предложения по решению этой проблемы?

Удалось решить проблему. Сначала мне пришлось использовать formData вместо formGroup, Также стало возможным иметь несколько полей в formData, используя метод append :

this.formData.append("file",file, file.name);
this.formData.append("name",name);
this.formData.append("age",age);

Мне также пришлось пересмотреть HTTP-заголовки, используемые для отправки формы в API, это была блокирующая часть. В моем случае мне пришлось Удалить 'Content-Type': 'application/json' из заголовков. Новый рабочий вариант был следующим:

working_headers = new HttpHeaders({
    "Accept": "*/*",
    "Authorization": 'Token laksjd8654a6s56a498as5d4a6s8d7a6s5d4a',
  });
Вернуться на верх