Uploading a base64 encoded string as an image


Hi guys i’ve a image compressor for react, and everything works fine until i try to upload the compressed file.
The compressed file loses dimensions and all we see in the url is black, but if I upload the original one, it works well.

Just change the file api in App, select a file and press upload.


I found this comment which seems to apply to what you are trying to do: https://github.com/graphcool/content/issues/191#issuecomment-311114903


thx again let me see if I can implement this…


Can you share a link to an image that’s black? Do you receive an error message when uploading the file? Does that only happen with a specific file, or with all files?


Link to image: https://files.graph.cool/cj1xid3i6ozp80133rpv5ur1z/cj6vyoq0j00a20187rj6wdtyf

This only happens when i use compressor, and i got no errors, but if i save the image from the browser to the computer its all good, she has been compressed and i see fine, its after the upload that this happens.

For some reason the image doesnt upload with dimensions…


In this line, it looks like you’re uploading an empty file.


I’ve just logged image and i got this, so i think its not empty…


I can now reproduce this problem, but I’m not sure what is happening here. Can you share what you are trying to achieve? Why do you even want to compress files before uploading them? You can also upload the full file and use the Image API to control how the file looks like in the end.

To me, it feels like something in the ImageCompressor malforms the file so the File API is not able to process it anymore. It’s hard to follow the logic there, so if you could narrow it down further that would be great.


So want i want to achieve is files that ar smaller, for example the file I upload had 4.6 mb and the compressor convert it to 600kb, i dont want to upload big images or else the app takes to long to open a image…

	upload = async () => {
	let image = await this.state.file
	// prepare form data, use data key!
	let data = await new FormData()
	data.append('data', image)
	const response = await fetch('https://api.graph.cool/file/v1/cj1xid3i6ozp80133rpv5ur1z', {
		method: 'POST',
		body: data,
	const object = await response.json()
	object.url = object.url + '/500x500!'

Is this how it works the image API?


No, the Image API is accessible with an URL like this:


Here’s more information: https://www.graph.cool/docs/reference/file-handling/image-api-atiede8ata/


Hi @JoaoBsantos, have you found a solution to this?


Uploading an image required you alt tag otherwise it unable to recognize, dell printer error 016-302 helped me to get the upload process.