Skip to content

Instantly share code, notes, and snippets.

@crossjs
Created December 22, 2014 10:40
Show Gist options
  • Save crossjs/8359df01aefdb65754c4 to your computer and use it in GitHub Desktop.
Save crossjs/8359df01aefdb65754c4 to your computer and use it in GitHub Desktop.
upload base64 encoded files with xmlhttprequest
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
var dataURI = 'data:image/jpeg;base64,<...>==';
var blob = dataURItoBlob(dataURI);
var objURL = window.URL.createObjectURL(blob);
var image = new Image();
image.src = objURL;
window.URL.revokeObjectURL(objURL);
var formData = new FormData();
formData.append('file', blob, 'blob.jpg');
formData.append('extravar', 'extravar');
var xhr = new XMLHttpRequest();
xhr.open('POST', '');
xhr.send(formData);
@DanielM08
Copy link

How can I use the blob request in a django view? Could you help-me?

@crossjs
Copy link
Author

crossjs commented Aug 14, 2019

django

Sorry but I have never used django framework.

@DanielM08
Copy link

And Python? I just need to use this blob to take an image and manipulate it

@Meschkov
Copy link

Meschkov commented Jan 19, 2020

And Python? I just need to use this blob to take an image and manipulate it

What do you want to do? Python has its own packages to handle binary blobs

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