Skip to content

React Native Image Upload File Extension Error

I am trying to upload an image to Django backend server with React Native.

const addPostHandle = () => {
    const formData = new FormData()
    formData.append("image", {
        name: "img",
        type: image.mime,
        size: image.size,
        uri: Platform.OS === "android" ? image.path : image.path.replace("file://", "")
    })
    formData.append("title", title)
    formData.append("category", category)
    addPost(formData)

    setTitle('')
    setCategory(0)
}

but I got an error that says File Extension "" is not allowed. Allowed extension are... and there is no problem with the data I sent.

[["image", {"name": "img", "size": 63410, "type": "image/jpeg", "uri": "file:///storage/emulated/0/Android/data/com.mobile/files/Pictures/2defe993-c6c4-44e4-8438-c0d57b5bd16f.jpg"}], ["title", "cat-test"], ["category", 5]]

After some research I found out that a lot of people faced with this problem when using react-native-image-crop-picker but they get network error however I don’t have a problem with sending the data. So I don’t think this problem caused by Flipper

P.S: this is the backend code if needed:

class PostCreateAPIView(generics.CreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostCreateSerializer
    permission_classes = [IsAuthenticated | IsAdminUser]
    parser_classes = (MultiPartParser,) #FormParser

    def perform_create(self, serializer):
        print(self.request.__dict__)
        serializer.save(author=self.request.user)

Answer

After thousands of tries, I found out that changing name: "img" to name: "img.jpg fixed the issue.