Convert base64 to file to upload in <form><input name='file'/>

Question

I'm decoding a base64 to binary

var image ="data:image/png;base64,iVBOR..."
var decoded = atob(image.split(",")[1])

Then want to upload it via a form:

<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 type="hidden" name="file" />
  <input type="submit" value="Upload!" />
</form>

I set the value of input with name="file" to the decoded string, but it will result in an invalid image .

I tried converting it to a blob , but when I set that as the value it results in [Object blob]

What am I missing here?

When I use: http://decodebase64.com/ and input the base64 string, it outputs the same data, but copy/pasting that into a file, does not work apparently.

I'm surely missing an essential step between decoding the data, and making it into a working file...

• Do I have to encode the string and how?
• How do I find out what it should be encoded to?

(I'm browsing the file first, separately from the form. And then I crop it with some library, which spits out a working base64 string. Now I just need the form to work with me and put this decoded data inside it. But like I mentioned, copy/pasting manually also doesn't work, so there is a step missing...)

Answer 1

I have tried the very same thing and it turns out you can not manually set the file to upload in a form. It seems like a browser security thing. My workaround is to include a second hidden input field of type 'text' then pump the Base64 text into it. Then server side check if either is set. Note: Now I continue my search on how to get the Base64 out of the input 'file' ;)