I have this simple upload form to browse and upload an image.
<form action="https://storage.googleapis.com/YOUR_BUCKET_NAME"
method="post" enctype="multipart/form-data">
<input name="key" type="text" value="objectName.txt" /><br/>
<input name="file" type="file" /><br/>
<input type="submit" value="Upload!" />
</form>
But I'm using an image cropper, that outputs a base64 string and want to upload that instead.
Now the browser doesn't allow me to set the value of the file input to the string, it wants a file.
Now I replaced:
<input name="file" type="file" />
With:
<input type="hidden" name="file" />
And handle the browsing/picking an image elsewhere.
Now this somehow does upload a file, but the image is invalid, it's just a text-file with the base64 string inside it. Changing the type to file will fail the upload.
So I'm guessing it has to do with the base64 having to be converted to a readable file.
After searching for converting base64 to file, I've tried:
blobData = atob(imageData)
But it errors: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded., while if I paste the string (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc) into the address-bar it displays correctly.
Same when I try this: http://wiki.lenux.org/base64-string-to-blob-object/
I there's a lot of different ways to convert it, but I keep getting the error on atob that it's not correctly encoded.
I feel there must be a simple solution, because the browser already knows how to decode the string.
I've found: http://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html that outputs only the size and type of the image, but does not convert it. And setting it as the value directly will result in a string: '[object Blob]`
Going deeper down the rabbithole: Convert Blob to binary string synchronously this converts the blob to a Uint8Array, I think I'm very close, but I'm lost right now.
To be clear, I'm looking for a client-side solution, and don't want to use canvas or any other extra helper elements.
