How is the callback working on the onUploadImg

[francoischaix-circeo]

Hello,

I have created a vue template that uses the md-editor-v3. I have tried to implement theonUploadImage method, but the callback function does not update the url.

I've implemented the code that is proposed on the documentation:

<template>
    <MDEditor v-model="text" language="en-US" @onUploadImg="(files, callback) => onUploadImg(files, callback, item)" />
</template>

<script>
    import { MdEditor } from 'md-editor-v3';
    import axios from 'axios'; 

    exportDefault {
      name: 'MyComponent'
      data() {
        return {}
      },
      methods: {
        async onUploadImg(files,callback,item) {
            const res = await Promise.all(
                Array.from(files).map((file) => {
                    return new Promise((rev, rej)=> {
                        const form = new FormData();
                        form.append('image', file, item.key);
                        axios.post('/upload', form, {
                            headers: {
                                'Content-Type' : 'multipart/form-data'
                            }
                        })
                        .then((res) => rev(res))
                        .catch((error) => rej(error));
                    });
                })
            );
            callback(res.map((item) => item.data.url));
         }
      }
    }
</script>

On my backend I can see that the image is correctly uploaded and that the url is sent correctly to item.data.url, but on the editor I see this:

If I put manually in the editor the url that is returned by the backend, then it works fine, but I don't understand what I do wrong here. I would really appreciate a pointer.

[imzbf]

Print res to see what's inside?

[francoischaix-circeo]

Thank you for the fast reply:

This is my res array

[
    {
        "data": {
            "url": "../src/assets/screenshots/b802710f-b770-4114-9ed3-8c01722ca45d/LF-12718/b802710f-b770-4114-9ed3-8c01722ca45d_LF-12718_8ih1q8rxwpqobxtvf2veehb158hbd7t5.png"
        },
        "status": 200,
        "statusText": "OK",
        "headers": {
            "content-length": "260",
            "content-type": "application/json; charset=utf-8"
        },
        "config": {
            "transitional": {
                "silentJSONParsing": true,
                "forcedJSONParsing": true,
                "clarifyTimeoutError": false
            },
            "adapter": [
                "xhr",
                "http"
            ],
            "transformRequest": [
                null
            ],
            "transformResponse": [
                null
            ],
            "timeout": 0,
            "xsrfCookieName": "XSRF-TOKEN",
            "xsrfHeaderName": "X-XSRF-TOKEN",
            "maxContentLength": -1,
            "maxBodyLength": -1,
            "env": {},
            "headers": {
                "Accept": "application/json, text/plain, */*"
            },
            "baseURL": "http://localhost:3000/api",
            "method": "post",
            "url": "/upload/upload",
            "data": {}
        },
        "request": {}
    }
]

[imzbf]

+ console.log(res); // Debugging here
callback(res.map((item) => item.data.url));

[francoischaix-circeo]

Yes,
this is where I put my logger

                console.log(res);
                callback(res.map((item) => {
                    item.data.url
                }));

And this is the content

[
    {
        "data": {
            "url": "http://localhost:5174/src/assets/screenshots/b802710f-b770-4114-9ed3-8c01722ca45d/LF-12718/b802710f-b770-4114-9ed3-8c01722ca45d_LF-12718_yszu4q2z4zl9fetdae6c9sefczcmjeo1.png"
        },
        "status": 200,
        "statusText": "OK",
        "headers": {
            "content-length": "279",
            "content-type": "application/json; charset=utf-8"
        },
        "config": {
            "transitional": {
                "silentJSONParsing": true,
                "forcedJSONParsing": true,
                "clarifyTimeoutError": false
            },
            "adapter": [
                "xhr",
                "http"
            ],
            "transformRequest": [
                null
            ],
            "transformResponse": [
                null
            ],
            "timeout": 0,
            "xsrfCookieName": "XSRF-TOKEN",
            "xsrfHeaderName": "X-XSRF-TOKEN",
            "maxContentLength": -1,
            "maxBodyLength": -1,
            "env": {},
            "headers": {
                "Accept": "application/json, text/plain, */*"
            },
            "baseURL": "http://localhost:3000/api",
            "method": "post",
            "url": "/upload/upload",
            "data": {}
        },
        "request": {}
    }
]

[francoischaix-circeo]

I had inlined my mapper as I wanted to do something else with it out of the callback.. It works now... Sorry for the confusion

very silly of me

                console.log(res);
                callback(res.map((item) => {
                    item.data.url
                }));

is different than this

                console.log(res);
                callback(res.map((item) => item.data.url));