I have a cropped image using this cropper. It is returning a base64 version of the cropped image.
I am trying to convert that base64 image to a blob or a file to be able to upload it to firebase storage using the code below.
var imageBase64 = $scope.cropper.croppedImage.split(',')[1];
var blob = new Blob([imageBase64], {type: 'image/png'});
var file = new File([imageBase64], 'imageFileName2.png', {type: 'image/png'});
when I tried to print file it has created an acutal File object that looks like this.
{
lastModified:1471604365544,
lastModifiedDate:"Fri Aug 19 2016 18:59:25 GMT+0800 (PHT)",
name:"imageFileName2.png",
size:228808,
type:"image/png",
webkitRelativePath:""
}
The File is being uploaded successfully though, but the result is broken. The preview on the firebase storage dashboard just looks like this (it never stops loading, and when I tried to download it, I got a broken image) :
To prove that my base64 image is not broken, here's a base64 pic of my cat Akasha, you can preview it in this base64 viewer.
In the 3.3.0 JS client, you can just upload a base64 string (docs)!
var imageBase64 = $scope.cropper.croppedImage.split(',')[1];
ref.putString(imageBase64, 'base64').then(function(snapshot) {
console.log('Uploaded a base64 string!');
});
The Blob and File APIs both take a UInt8Array, which the base64 string isn't, so you were basically creating an array that contained a single item, which was the base64 string, which wasn't a valid blob. Use the above upload to solve the problem.
Related
I'm using React.js to create an application that would take a photo and upload it to Firebase Storage. I am using the react-webcam library, which uses this command to take a photo:
const ImageSrc = webcamRef.current.getScreenshot();
This is how I tried uploading the photo to Storage:
storage.ref(`/images`).put(imageSrc)
.on("state_changed" , alert("success") , alert)
However, the file that is uploaded is undefined (no photo).
I tried to construct an URL of the photo using blob:
const imageUrl = window.URL.createObjectURL(new Blob(webcamRef.current.getScreenshot()))
But I get this error: >Failed to construct 'Blob': The provided value cannot be converted to a sequence.
In the library it is stated that getScreenshot - Returns a base64 encoded string of the current webcam image. So, I tried to use the atob command, but I get the error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Does anyone know how I could upload the image to Firebase Storage? Any help would be appreciated!
Instead of blob, try using putString() command like this:
const task = firebase.storage().ref(`/images`).putString(imageSrc, 'data_url')
As explained in the doc, if you want to upload from a Base64url formatted string, you need to call the putString() method as follows (example from the doc):
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then((snapshot) => {
console.log('Uploaded a base64url string!');
});
In your case, since getScreenshot() returns a base64 encoded string, it would be something like:
const imageSrc = webcamRef.current.getScreenshot();
storage.ref(`/images`).putString(imageSrc, 'imgBase64')
.on("state_changed" , alert("success") , alert)
I am using react to create front-end.
I have a download button which will trigger an action.
The action will use axios.post to call the server which will return a file.
The axios.response is something like this
resopnse.data: 'binary data of image file'
response.headers: {
cache-control:"public, max-age=0"
content-disposition:"attachment; filename="test.jpg""
content-type:"image/jpeg"
last-modified:"Mon, 22 Jan 2018 18:49:27 GMT"
}
response.data is tested using postman which converts the response to the correct image.
Now I am going to use eligrey's filesaver to save it.
This is what I have.
let fileName = getFileNameFromContentDisposition(response.headers);
let blob = new Blob([response.data], {type: response.headers["content-type"]});
fileSaver.saveAs(blob, fileName, true);
The code is tested using Chrome. The code will create a jpeg file, but it cannot be opened.
I played around with solutions provided for similar questions in GitHub and this website. But none of it is working.
I believe I am missing trivial setting to make this work.
The problem is not the library.
axios is the cause. The response from axios is already converted to json. So the binary data lost some information.
Even when the blob string fromaxios's reply is converted back to blob. It is a corrupted blob.
The workaround is to use fetch, and convert the response to response.blob().
In React Native I'm trying to load an image stored at a relative path as a base64 string, but the require returns 3 as response instead of the image source.
I'm sure the path is correct, and I the require command works elsewhere in my Reacy Native JSX code to load images from the same relative path (<Image source={require('../resources/examplecar.jpg')}>) without any problem.
How to get a local image source from the filesystem as base64 string to send it in JSON?
var body = {
path: '../resources/examplecar.jpg',
data: {
image: require('../resources/examplecar.jpg'),
}
}
Using RNFS plugin it is possible to access the React Native assets and convert the data into a range of formats including Base64.
imageData = await RNFS.readFile(RNFS.MainBundlePath+"/assets/resources/examplecar.jpg", 'base64').then();
You can't have a variable in require. It won't work for image source in rn.
Do
image: require('../resources/examplecar.jpg')
I am unable to open a base64 string as pdf in angular application if the file size is more than say 10mb. The browser crashes with a page saying "AW, SNAP". The base64 string i.e. "base64content" already has the metadata at the start and looks something like this:
data:application/pdf;base64,JVBERi0xLjQK...DUKJSVFT0YK
I am using below way to open the base64 string as a PDF in new tab:
$window.open(base64content);
Try with
window.open('data:application/pdf;base64,' + base64content);
This happened because the base64 string was too big for the browser to interpret. This is because the pdf was heavy(more than 2mb) the approx max limit of browser. The solution was to use blob based approach.
I have base64 data URL in my angularJs controller, and I need an image file from that, so that I could send it to server as multi-part data through ajax?
I'm looking for something like file writer in angularjs.
Can anyone help me please?
you can generate blob from base64 data.
var imageBase64 = "image base64 data";
var blob = new Blob([imageBase64], {type: 'image/png'});
From this blob, you can generate file object.
var file = new File([blob], 'imageFileName.png');
You can use this file object and post it to server using multipart data.