Search code examples
vue.jsionic-frameworkcapacitor

ionic 6 - vue : Cannont upload files on native platform

I want to upload an image taken form a simple input type file :

<input style="display: none" id="file-upload" type="file" @change="handleUpload($event)">

Here's the methods called to upload the file :

const handleUpload = async (e: any) => {
const file = e.target.files[0]
await userHttpService.uploadProfilePicture(file)
await store.refreshConnectedUser()}

And here is the service :

    async uploadProfilePicture(file: File) {
    const fd = new FormData()
    fd.append('file', file)

    await axiosInstance.post(`${serverRoot}/api/image_profiles`, fd, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    })
}

It's ok for the web part, but when I want to switch on native, I have errors before the app send data to the server. On IOS, I have this error in console :

Unhandled Promise Rejection: DataCloneError: The object can not be cloned.

On Android I can't see the error it's displayed as [Object]

I tryed to use the camera plugin to use the native camera/library but I have the same problem. I think there's something wrong with the formData...

Any idea?

Solution

  • Ok I just found what's wrong.

    I've been using the native Capacitor HTTP plugin to handle http requests. It's weird but, the plugin have problems handling FormData and files. I turned the plugin off and it's now working.