![]() ![]() I also tried storing the base64 string in Firestore instead of storage, but it felt wrong for me. I really spent a long time with this issue and have tried many different ways to upload a file to Firebase Storage, including uploading a base64 string to Firebase Storage with FirebaseStorage.putString(), but I didn’t get it to work because Firebase throws an error that the base64 string is not valid, although the base64 string is valid and displays an image in both React Native and a web app. I did not cover a lot of areas in my example, so make sure to adjust the code to fit your needs, such as handling the “file is uploading” event and the “file upload error/success” event. ![]() With our code above you can successfully upload a file to a Firebase Storage with React Native. The only thing special we did here is call blob.close() to release our BLOB.īy now, our component should look something like this: This is a simple promise that uses the FirebaseStorage.put(), you can visit the Firebase Docs for more info about it. First of let’s start with a basic React Native component: import React, I think it’s about time we get to some coding. LaunchCameraAsync() - Display the system UI for taking a photo with the camera. We will be using this in our examples later. LaunchImageLibraryAsync() - Displays the system UI for choosing an image or a video from the phone’s library. The ImagePicker has two methods: launchImageLibraryAsync() and launchCameraAsync(). We will be using the ImagePicker in our examples later. ![]() To get a File URI with React Native, we can use the DocumentPicker and the ImagePicker of the Expo SDK. The first thing we need to do is to find a way to get a File URI, the File URI helps us to find and access a particular resource - like a Photo - in a user’s device. This is my first Medium story so pardon my mistakes□.Photo by Hack Capital on Unsplash Step 1: Getting a File URI Hope, this article will help you and feel free to ask any queries in comments. There you go, now you can upload anything to AWS S3 bucket from file manager using React Native 0.60+ versions. If you find any difficulty in setting things up you can always visit the documentation( ).Īll the imports :- import DocumentPicker from 'react-native-document-picker' import fs from 'react-native-fs' import Pick single/multiple file(s) from file storage using react-native-document-pickerįor React Native 0.60+ users, no manual settings are required except adding these 2 lines in your AndroidManifest.xml file(android/app/src/main). That’s it, we now can use this S3 bucket to upload our files. ![]() Then click on Generate Policy button and then a model pops up with your policy JSON document, copy this document and paste in Bucket policy tab. In your S3 bucket, you can see something like this. So, as you have your S3 bucket up and running, now let’s set up few things :. Install aws-sdk, react-native-document-picker, react-native-fs and base64-arraybufferįirst, we’ll install aws-sdk and react-native-document-picker using npm :-Īfter installing all these dependencies, lets get into the tutorial :-įor setting AWS S3 bucket, you have to have an AWS account with IAM user and then create an AWS S3 bucket(note down the access key and secret key), I won’t go in much detail about how to create S3 bucket its fairly simple but I’ll tell you about how to set up your S3 bucket so that we can upload our files to S3. So, my search began and after R&D of almost one week I got some mixed up answers from whole internet and finally I was able to implement this functionality and I’ve given a step by step guide below, so that no one needs to waste their time □. Now, the problem that I had faced was lack of library support by React Native community for version 0.60+, all the libraries that I searched was outdated and was not working properly. Recently, for one of my React Native project I need to implement a functionality where user can select multiple files by browsing through his/her file manager and upload them on AWS S3 bucket. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |