Facing ErrorDetail(string='提交的数据不是文件。检查表单上的编码类型。', code='invalid') -Django Rest + React

Question

I have an Edit Profile page where a user can edit the previously entered information. The form also contains an image field. I fetch the data from the backend and prefill the fields with the existing data. Now the data that comes for the image is basically the path to the media folder where the image gets stored once uploaded. Now suppose the user does not want to change the previously entered image and submits the form I get the below error

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

Please suggest to me what should I do to control this error if an image file is not received in the request.data

Below are the codes

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 sending the data

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;
    }
  }
};

if no image is uploaded the by the user this is what is passed in formData.append("profile_photo", photo.image);

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

TeacherDetail Model (Update)

class TeacherDetail(models.Model):
    
    id = models.UUIDField(primary_key=True, editable=False, default=uuid.uuid4)
    
    is_verified = models.BooleanField(default=False)
    
    user = models.OneToOneField(CustomUser, on_delete=models.CASCADE, null=True, blank=True)
    
    name= models.CharField(max_length=100, null=True, blank=True)
    
    profile_photo = models.ImageField(upload_to = 'photos/%Y/%m/%d', null=True, blank=True)
    
    adhaar_number = models.CharField(max_length=200, null=True, blank=True)
    
    phone = models.CharField(max_length=11, null=True, blank=True)
    
    location = models.CharField(max_length=50, null=True, blank=True)
    
    full_address = models.CharField(max_length=500, null=True, blank=True)
    
    age = models.IntegerField( null=True, blank=True)
    
    name_of_school = models.CharField(max_length=200, null=True, blank=True)
    
    experience = models.IntegerField( null=True, blank=True)
    
    teach_for_no_days = models.IntegerField( null=True, blank=True)
    
    shift = models.CharField(max_length=20 ,null=True, blank=True)
    
    subject = models.CharField(max_length=300, null=True, blank=True)
    
    teach_class = models.CharField(max_length=100 ,null=True, blank=True)
    
    board = models.CharField(max_length=25,null=True, blank=True)
    
    gender = models.CharField(max_length=8 ,null=True, blank=True)
    
    fees = models.IntegerField( null=True, blank=True)
    
    fac = models.IntegerField(null=True, blank=True)
    
    home_tuition = models.BooleanField(default=False)
    
    home_tuition_fees = models.IntegerField(null=True, blank=True)
    
    hfac = models.IntegerField(null=True, blank=True)
    
    date_created = models.DateTimeField(default=timezone.now, editable= False)

Answer 1

You can take the form directly:

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: I think you can pass a form using PUT

Answer 2

I figured out a way to control sending of

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

from the frontend itself.

What I did in the react is check whether the typeof photo.image is string or not. If it is a string this means that no file has been uploaded and it contains the url path, therefore, I do not append it in the formData else I append it. Below is my code

react part

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

I do not know if this is an efficient way to do it. But for the time being this works for me. Please suggest if anyone has a better way to handle it in the backend.