Upload image from data url in Axios?

Question

I loaded image files into the API (Graphcool) with this, and everything worked fine:

fileUpload(file) {
        let data = new FormData();
        data.append('data', file);

        axios
            .post(`https://api.graph.cool/file/v1/MY-PROJECTID`, data, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            .then(res => {
                console.log(res)
            });
    }

In the above code, the file was transferred from <input type="file" />

However, I now use the React Avatar Editor to allow users to crop images and ensure they are squares: https://github.com/mosch/react-avatar-editor

When you access the image from the React Avatar Editor, it comes in the form of a data URL (via Canvas.toDataURL ()).

How can I load a data url using Axios? Do I need to first convert the image to the actual “file” in browser memory?

Answer 1

canvas.toDataURL() FormData

,

function fileUpload(canvas) {
    let data = new FormData();
    canvas.toBlob(function (blob) {
        data.append('data', blob);

        axios
            .post(`https://api.graph.cool/file/v1/MY-PROJECTID`, data, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            .then(res => {
                console.log(res)
            });
    });
}