How To Download Base64 Image In React Native
Alexina Jurs
Now, we will see how to download the base64 converted image to our device.
First, to download it to our devices we will need to give permission to write and read external storage.
To give permission to our iOS and Android devices, we use a package called react-native-permission.
link: -native-permissions
Initially, I thought that React Native does not support images in base64 format with the component. However, that is not true. It is possible to load base64 encoded images by decoding them to base64 format on the server side and sending a data URI. After the image loads the user can save the image to their local device. There is a way to download base64 images in React Native, but it is not obvious.
We can use the URI to display the image in the app, but we cannot pass it into the API request body. We need the base64 representation of the image. To do this, we will use readFile from react-native-fs to read the file from the URI. This is an example of what this code could look like:
Now, we are finally ready to make the API request. Using axios, a common API request library for react and react-native, we will pass our base64 image into the body of the request and return its result:
- Image Picker provides a base64 return value, so why do I need to convert the URI?
The base64 return value that is returned from Image Picker is not in the right format for an API request body. At the very least, 'data:image/jpeg;base64,' needs to be prepended to the base64 representation. During the time writing this, there are bugs involved in this approach, which is why it is suggested to explicitly load the base64 image using the URI and react-native-fs as done in the loadImageBase64 function above. Also, this function can be used for URI's received from other sources, not just Image Picker.
Now here everything seems to be working. The file is being successfully uploaded to the dropbox. However the image itself is empty. And when I download the uploaded image from the dropbox and open it in my computer, the viewer says the file is not a png. So probably my file is not being converted correctly.
So how can I convert the base64File back to a normal file?
Alternatively, object-fit: "cover" will cause the image to fill the entire container and be cropped to preserve aspect ratio. For this to look correct, the overflow: "hidden" style should be assigned to the parent element.
This next/image component uses browser native lazy loading, which may fallback to eager loading for older browsers before Safari 15.4. When using the blur-up placeholder, older browsers before Safari 12 will fallback to empty placeholder. When using styles with width/height of auto, it is possible to cause Layout Shift on older browsers before Safari 15 that don't preserve the aspect ratio. For more details, see this MDN video.
I'm trying to upload an image taken on the mobile app to Supabase storage and from my understanding need the base64encoded data or binary data to do that. I've tried fetch and always get the error "failed to fetch", and an also XMLHttpRequest(), and no luck. Chrome's Dev Tools show "Not allowed to load local resource: blob: ..."
The very first thing we're going to do is create an encoding function. So we are going to create a function that will do what is called a base64 image conversion. If you've never heard of base64 images, do not worry, that can be a little bit tricky, so let's actually look it up. So I'm gonna say base64 image and you can see there's all kinds of helpful tools for being able to see what they are online including some encoders.
So right now, I'm just going, and you can use any application or any kind of base64 encoder. We're not gonna use any of this, this is just to show you as an example what we're doing. So I'm going to click here and I'm gonna upload a sample image and so what is happening right here is that image is getting converted to what is called a base64 string.
It says data image jpg base64 and this giant long string. And as you can see, if you scroll all the way, this is thousands upon thousands of characters long. And so, what this does is a base64 string at a high level is simply a image that is represented and stored as a string. So when a browser sees a base64 string, it is going to take that string and it's gonna say, okay, this is an image, I'm going to render this like an image, browsers have the ability to do that so that is how we're gonna be able to store this as a string.
Essentially what FileReader allows us to do is we create this FileReader instance and then we can work with it and then we can have it perform this base64. It takes in a file, in this case, it takes in an image, and then it will perform the processing and the encoding for us. Now where the tricky part comes in is that FileReader is completely promise-based. So in order for this to work properly, we have to be able to work with promises, we're gonna have to resolve promises and make changes and updates when they occur. So now that you kinda have a high level idea for all of the pieces to make this work, let's get started with implementing the code.
So the reason for that is because the file reading and conversion process can't happen instantaneously. If you have a large file, it might take a little bit of time in order for that to process. And so, with that knowledge, that's why FileReader uses promises, is because they know that if you pass in a large image, it's not gonna instantly be able to give you back that image code and that base64 string.
So I hope that that makes a little bit more sense and so, you learned quite a bit in this guide. You learned not just how to encode an image as base64 that's only one part of it, but along the way, you also learned quite a bit about promises and callback functions and things like that. And so if this is still fuzzy, I would give you a couple recommendations.
The important limitation of the GET api endpoint is it only allows image and PDF submissions via the URL method, as only HTTP POST requests can supply additional data to the server in the message body. GET requests include all required data in the URL. So by design, a GET api cannot support file uploads (file parameter) or BASE64 strings (base64image).
The links open a text file in the browser: Image Base64 String, TIFF Base64 String, PDF as Base64 string. You can copy and paste the content of these text files directly into the "base64image" field of Postman, or any other test code.
Important: The base64 string must start with the content type of the document. For example use data:image/jpeg;base64,data string here, data:image/png;base64,data string here or for PDF documents data:application/pdf;base64,data string here. Most online image to base64 conversion services do not add this header, they just provide the raw data string. Thus you must add it manually when you use such strings for testing.
hi, i wanna store images to clouddb as a string, i know it's so simple i can do it with base64 extension
but
i wanna decode that encoded string and display it in listview
is it possible?
thank you