Upload a base64 encoded image using FormData?
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 })
}
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.
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.