Hello, I am currently in the process of editing a blog page using VueJS and Django Rest Framework. However, I am facing an issue when trying to upload a photo - I keep receiving an error message stating that "the sent data is not a file." Additionally, I am unable to select the current image as the default image is Null. My queries are how to create a functional photo change form and how to begin with the image already loaded in the JSON file. Thank you for any assistance provided. Please note that I have not yet set up the admin system.

VueJS

<template>
    <h1>ARTICLE</h1>
    <form @submit="onSubmit">
        <input type="text" name="title" placeholder="Title" v-model="form.title">
        <input type="text" name="desc" placeholder="Description" v-model="form.desc">
        <input type="text" name="category" v-model="form.category">
        <input type="file" name="image" @change="EditImage" >
        <input type="text" name="author" v-model="form.author">
        <input type="text" name="slug" v-model="form.slug">
        <textarea name="text" v-model="form.text"></textarea>

        <button type="submit" @click= "editPost">Edit</button>
    </form>
</template>
<script>
import axios from 'axios';
import { getAPI } from '../api'
export default {
    data () {
        return{
            Postslug: this.$route.params.Postslug,
            form: {
                title:"",
                desc:"",
                text:"",
                category:"",
                date:"",
                author:"",
                image:"",
                slug:"",
            },
            selectedFile: null
        }
    },
    methods: {
        // Form method
        onSubmit(event){
            event.preventDefault();     
            axios.put(`http://127.0.0.1:8000/blog/api/edit/${this.Postslug}`, this.form).then(response => {
              this.form.title = response.data.title
              this.form.desc = response.data.desc
              this.form.text = response.data.text
              this.form.image = response.data.image
              this.form.category = response.data.category
              this.form.author = response.data.author
              this.form.slug = response.data.slug
              alert('Ok')
            })
            .catch(err => {
              console.log(err)
            })
        },
        EditImage(event){
            this.selectedFile = event.target.files[0]
            console.log(event);
        },
        editPost(){
            const fd = FormData();
            fd.append('image', this.selectedFile, this.selectedFile.name)
            axios.put(`http://127.0.0.1:8000/blog/api/edit/${this.Postslug}`, fd)
            .then(response =>{
                console.log(response);
            })
        }
        
    },
    created() {
        getAPI.get(`blog/api/edit/${this.Postslug}`)
            .then(response => {
              this.form.title = response.data.title
              this.form.desc = response.data.desc
              this.form.text = response.data.text
              this.form.date = response.data.date
              this.form.image = response.data.image
              this.form.category = response.data.category
              this.form.author = response.data.author
              this.form.slug = response.data.slug
            })
            .catch(err => {
              console.log(err)
            })
        },
    name: 'AdminEditArticle',
}
</script>
<style lang="sass" scoped>
</style>  

Axios get

import axios from 'axios'
const getAPI = axios.create({
    baseURL: 'http://127.0.0.1:8000',
    timeout: 1000,
})
export { getAPI }

Serializers.py

from rest_framework.fields import ReadOnlyField
from rest_framework.serializers import ModelSerializer, SerializerMethodField
from Blog.models import *

class PostListSerializer(ModelSerializer):
    author = SerializerMethodField()
    category = SerializerMethodField()
    class Meta:
        model = Post
        fields = ('id', 'title', 'author', 'category', 'image', 'desc', 'text', 'slug', 'date')

    def get_author(self, obj):
        return str(obj.author.username)
    
    def get_category(self, obj):
        return str(obj.category.name)


class PostDetailSerializer(ModelSerializer):
    class Meta:
        model = Post
        fields = ('id', 'title', 'author', 'category', 'image', 'desc', 'text', 'slug', 'date')
        def save(self, *args, **kwargs):
            if self.instance.image:
                self.instance.image.delete()
            return super().save(*args, **kwargs)

Models.py

class Post(models.Model): 
    title = models.CharField(max_length=299)
    author = models.ForeignKey(User,default=ANONYMOUS_USER_ID, on_delete=models.CASCADE)
    category = models.ForeignKey(Category,default=ANONYMOUS_USER_ID, on_delete=models.CASCADE)
    image = models.ImageField(blank=True)
    desc = models.TextField()
    text = RichTextField(blank = True, null = True )
    date = models.DateTimeField(auto_now=False, auto_now_add=True)
    slug = models.SlugField(null = True, blank = True, unique=True)

    class Meta: # Order post by date
        ordering = ['-date',]

    def __str__(self): # Display title 
        return self.title

    def get_absolute_url(self): # #TODO da cambiare
        return reverse("listpost")

    def save(self, *args, **kwargs): # Auto Slug Field
        self.slug = slugify(self.title)
        super(Post, self).save(*args, **kwargs)