post image restframework api with react

Question

I am working on `react application in front end and Django-rest-framework in back end

I tested the API for uploading images on postman and it works great but in the react app it return an error from backend

SuspiciousFileOperation at /api/change_profile_image The joined path (D:\media\profiles\user10\2_628d8.jpg) is located outside of the base path component (D:\users\sct\Scripts\R\f\media)

here a postman test image

and here the react function for form submit

const submit_avatar = async(e: any) => {
    e.preventDefault();
    const fd = new FormData()
    fd.append('avatar',e.target.files[0], e.target.files[0].name)
    fd.append('cover_image',profileInfo.cover_image)
    fd.append('email',profileInfo.email)

    const head = new FormData()
    head.append("Content-type","multipart/form-data")
    await axios
    .post("change_profile_image", fd, 
    {
        headers:{"Content-type":"multipart/form-data","Accept":"*/*"}
    }
    ).then(()=>{console.log("updated")})
}

and here is the response from browser

setting.py

BASE_DIR = Path(__file__).resolve().parent.parent

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

STATIC_URL = 'static/'


MEDIA_ROOT= os.path.join(BASE_DIR, "media")
MEDIA_URL="/media/"

is there any way to overcome this error, thanks in advance

post image restframework api with react

0 Answers