24

I have a jpeg as a base64 encoded string.

var image = "/9j/4AAQSkZJRgABAQEAS..."

I would like to upload this jpeg to the server using FormData.

var data = new FormData();

What is the proper way to append the image to data?

user1031947
  • 5,764
  • 15
  • 51
  • 79

4 Answers4

23
 var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }
DINESH Adhikari
  • 824
  • 7
  • 11
  • 2
    Nice job!. I don't understand why there are not any js native way to do this. Anyway, this aproach works fine, at least in my case. – Juan Antonio May 29 '20 at 13:06
  • 3
    I just wasted 2 days of my life and finally this worked. I can confirm this works with expo and image picker and .net core. Using this with the normal fetch. – rtp Aug 08 '20 at 20:41
  • 1
    This solution works great for me. However, I cannot upload photos that were taken with my phone's camera and I don't know why. – EnigmaTech Oct 21 '20 at 16:05
17

Your image data is nothing more than a string, so append it to your FormData object like this:

data.append("image_data", image);

Then on your server side you can store that directly in a database or convert it to an image and store it on the file system. You might find this post helpful.

Community
  • 1
  • 1
HeadCode
  • 2,724
  • 1
  • 13
  • 25
8

I found this post (Convert Data URI to File then append to FormData) to be quite helpful. If your file is already represented as a base64 encoded string, you would first need to create a blob representation from that and then you can use FormData append.

Community
  • 1
  • 1
Kevin
  • 3,071
  • 6
  • 32
  • 36
0

For the record, this worked like a charm!

*import * as FormData from "form-data";

base64: string, // it should start with "iVBORw0KGgoA...." instead of "data:image/png;base64,"

fileName: string // it should include file name and extension, like "saype.jpg" instead of "saype"

var formdata = new FormData();

// base64 to buffer, Convert base64 image to a file in Node Js

let bf = Buffer.from(base64, "base64");

// buffer to form/data, How to send a buffer in form-data to SignServer?

formdata.append("file", bf, fileName);

/* I tested it with .png, .docx, .pdf, it works I have base64 data of a file at nodejs server, I need to upload to discord with webhook, it accepts form/data when i pass { contenttype:"..pdf", filename:"....pdf" } to formdata.append(), It failed I dont know why it occured. maybe discord doesnt support contenttype at form/data /

copied for the record here, from https://gist.github.com/emindeniz99/0b415de896f5c335d253d870116d798f

den232
  • 61
  • 8