Skip to content

Instantly share code, notes, and snippets.

@AshikNesin
Last active September 5, 2024 05:26
Show Gist options
  • Save AshikNesin/ca4ad1ff1d24c26cb228a3fb5c72e0d5 to your computer and use it in GitHub Desktop.
Save AshikNesin/ca4ad1ff1d24c26cb228a3fb5c72e0d5 to your computer and use it in GitHub Desktop.
Base64 image to multipart/form-data
const base64 = 'data:image/png;base64,....' // Place your base64 url here.
fetch(base64)
.then(res => res.blob())
.then(blob => {
const fd = new FormData();
const file = new File([blob], "filename.jpeg");
fd.append('image', file)
// Let's upload the file
// Don't set contentType manually → https://github.com/github/fetch/issues/505#issuecomment-293064470
const API_URL = 'https://example.com/add_image'
fetch(API_URL, {method: 'POST', body: fd)
.then(res => res.json())
.then(res => console.log(res))
@cgrewon
Copy link

cgrewon commented Apr 22, 2021

TypeError: Network request failed

Same for me also

@RowenaRavenclawWithExtraClaws

TypeError: Network request failed

Same here :(

@PrafullKumarB
Copy link

Thanks for sharing

@zhcwang
Copy link

zhcwang commented Oct 4, 2022

Genius, thanks.

@jxxe
Copy link

jxxe commented Jul 22, 2023

Disgusting. Thanks.

@hcallejas
Copy link

hcallejas commented Oct 19, 2023

TypeError: Network request failed

you need to create the base64 with all its structure ""data:mimeType;base64,base64data":

"data;application/pdf;base64,afdnxhfuiesfslg........"

@SolankiYogesh
Copy link

thank you bro you saved my me

@johnphealipto
Copy link

Thanks for sharing

@hrodriguezimagina
Copy link

hrodriguezimagina commented Sep 5, 2024

worked for me adding type: 'image/png' :

const file = new File([blob], "filename.png", { type: 'image/png' }); fileData.append('file', file);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment