Upload base64 encoded image via the file API?

framework

#1

I’ve been uploading image files from a standard file input to the Graphcool API successfully with this:

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

		axios
			.post(`https://api.graph.cool/file/v1/${CONST.projectID}`, data, {
				headers: {
					'Content-Type': 'multipart/form-data',
				},
			})
			.then(res => {
				const newFileId = res.data.id;
				this.changeProfilePic(newFileId);
			});
	}

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

When you access the image from React Avatar Editor it comes in the form of a data url via Canvas.toDataURL(). If I pass the data url with the same fileUpload function I get these errors:

Failed to load https://api.graph.cool/file/v1/MY-GRAPHCOOL-ID: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

Is it possible to upload data url with the Graphcool file API? Or do I have to convert it to an image on the client first?