Facing ErrorDetail(string='Отправленные данные не были файлом. Проверьте тип кодировки в форме.', code='invalid') -Django Rest + React

У меня есть страница редактирования профиля, где пользователь может редактировать ранее введенную информацию. Форма также содержит поле изображения. Я получаю данные из бэкенда и заполняю поля существующими данными. Данные для изображения - это путь к папке media, где хранится изображение после загрузки. Теперь предположим, что пользователь не хочет менять ранее введенное изображение и отправляет форму, я получаю следующую ошибку

{'profile_photo': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')]}

Пожалуйста, подскажите, что мне делать для борьбы с этой ошибкой, если файл изображения не получен в request.data

Ниже приведены коды

views.py


api_view(['PUT'])
@permission_classes([IsAuthenticated])
@parser_classes([MultiPartParser, FormParser])     
def edit_teacher_detail(request):
  
   data = request.data
   
   if data is not None:
     
     id = data.get('id')
     
     queryset = TeacherDetail.objects.get(id = id)
     
     serializer = TeacherDetailSerializer(instance=queryset, data = data)
     
     try:
       if serializer.is_valid():
         serializer.save()
         return Response(status=status.HTTP_200_OK)
       else:
         print(f'\nThis is the error in the serialization {serializer._errors}\n')
         return Response({'message': serializer._errors}, status=status.HTTP_400_BAD_REQUEST)
     except Exception as e:
       print(e)
       return Response(status=500)

reactjs API отправляет данные

export const editTeacherDetail = async (detailsData, photo) => {
  let formData = new FormData();
  formData.append("id", detailsData.id);
  formData.append("is_verified", true);
  formData.append("name", detailsData.name.toUpperCase());
  formData.append("adhaar_number", detailsData.adhaar_number);
  formData.append("phone", detailsData.phone);
  formData.append("location", detailsData.location.toUpperCase());
  formData.append("full_address", detailsData.full_address.toUpperCase());
  formData.append("age", detailsData.age);
  formData.append("gender", detailsData.gender.toUpperCase());
  formData.append("name_of_school", detailsData.name_of_school.toUpperCase());
  formData.append("experience", detailsData.experience);
  formData.append("teach_for_no_days", detailsData.teach_for_no_days);
  formData.append("subject", detailsData.subject.toUpperCase());
  formData.append("teach_class", detailsData.teach_class);
  formData.append("home_tuition", detailsData.home_tuition);
  formData.append("fees", detailsData.fees);
  formData.append("home_tuition_fees", detailsData.home_tuition_fees);
  formData.append("shift", detailsData.shift.toUpperCase());
  formData.append("board", detailsData.board.toUpperCase());
  formData.append("profile_photo", photo.image); // this is the image field 

  try {
    let response = await axiosInstance.put(`/teacher/edit-detail/`, formData);
    return response;
  } catch (error) {
    if (error.response) {
      ToastNotification(
        "We are facing some problems. Please try again later",
        "error"
      );
      return error.response;
    } else {
      return error.request;
    }
  }
};

если пользователь не загрузил изображение, это то, что будет передано formData.append("profile_photo", photo.image);

/media/photos/2022/05/12/jgs.jpeg

Вы можете взять форму напрямую:

def edit_teacher_detail(request):

if request.method == 'POST':
    # create a form instance and populate it with data from the request:
    form = YourForm(request.POST)
    # check whether it's valid:
    if form.is_valid():
        # process the data in form.cleaned_data as required
        # ...
        # redirect to a new URL:
        return HttpResponseRedirect('/thanks/')

PD: Я думаю, что вы можете передать форму с помощью PUT

Я придумал способ контролировать отправку

formData.append("profile_photo", photo.image);

из самого фронтенда.

Что я сделал в react, так это проверил, является ли typeof photo.image строкой или нет. Если это строка, это означает, что файл не был загружен, и он содержит путь url, поэтому я не добавляю его в FormData, в противном случае я добавляю его. Ниже приведен мой код

реактивная часть

if (typeof photo.image === "string") {
  } else {
    formData.append("profile_photo", photo.image);
  }

Я не знаю, является ли этот способ эффективным. Но на данный момент это работает для меня. Пожалуйста, подскажите, если у кого-то есть лучший способ обработки этого в бэкенде.

Вернуться на верх