How to Download and Save Files for Expo React Native Apps using Storage Access Framework and Sharing

hi everyone today I'm going to show you how to download files and save them to your device so we're going to be using Expo file system and expose sharing for that and I've created an API previously in Python and I'm going to link you to that tutorial that I'll be using to download my file from I'm going to do two different types of file downloads so one's just going to be downloading from a URL so where the file is just directly at the URLs location and one where I'm actually going to generate it through my API and I may need to pass headers or stuff like that to the API so that would be useful if your file is behind an API that has authentication attached to it so first off I'm just doing my simple download which is just downloading directly from a URL so I've added a button and on press I'll call this download from URL function I'm also going to import Star as file system from Expo file system that's going to enable me to firstly download that file and secondly for Android I'll need to use it to save to files as sharing doesn't save to files in Android I'm also importing Shear async from Expo sharing that will allow me to save to files on an iOS device I'm creating a separate save function and that's just going to allow me to reuse my save Logic for the files and I'm going to just pass my URI to it all I'm going to do here is just share that URI in an on iOS it's going to open up a little prompt which I can then go ahead and saved files using with Android it will only allow you to save to Google Drive so you're going to want to add additional Logic for Android but I'll come to that later so the file I'm going to download is going to be called small.np4 and I'm just going to download it using filesystem.download async that takes in a URI of where to download and then also where to save it so you can see that URL is exactly where that video exists on the internet and so it's going to be directly downloaded from there I don't need to provide any authentication headers or anything like that and now I'm going to go save and I'm going to use my URI from my result to do that I'm just going to console log my results that you're interested in seeing what's in there you can cool so now I can go ahead and click my download from URL it'll go and download async and once that's done it will open the share and I can save to files I'm going to just choose on my iPhone because I don't have iCloud Drive set up on this phone then I can go ahead to files and check that exists there and you can see that it's been saved to my device you can also see in the terminal that it's console log the result so it's got stuff like headers from the request the mime type and also the URI where the file has actually been saved and you can use that for sharing now back to my app I'm going to go ahead and add another button that will just allow me to download from an API I've set up this API previously and if you want to learn how to create an API in Python I'll link my tutorial so I've got this button title download from API and on press that's going to call a function called download from API which I'm going to go ahead and create now it's going to be asynchronous because there'll be a couple of asynchronous actions such as downloading the file I'm going to give this one a file name of Miss coding.pdf and this one is a PDF because that's what's available at this um API endpoint so you could create apis that generate yourself invoices for your customers and stuff like that I'm going to check the operating system because if it's Android the localhost that you need to request is different because the localhost 127.0.0.1 actually refers to the emulator rather than your computer and that's why you need to have a separate IP for that so 10.0.2.2 is what is localhost if you're on an Android this wouldn't be relevant if you're in production because you'd have a proper IP address that you've been connecting to or domain name so once again I'm just doing this download async I'm using this little back tick thing so that I can do some sort of string interpolation and use that localhost variable inside my string and it'll just substitute it for me the end point is that generate PDF and I'm on Port 5000 and it takes a few query parameters so it's going to take in a name and an email so I'm providing a name as miscoding and email is just going to be trip what hello at tripwiretech.com then I specify where I want it to save or download to and then because I'm actually requesting API you might need headers so you can provide that in the download options and you just add a header property and then you add your headers as strings so I've got my header and my value then I'm console logging the result and I can reuse my save function I'll just pass it result.uri so if I go ahead and save that you can see I've got a download from API button I need to start up my python API so I'm going to go ahead and do that now so just writing python3.api python3 api.pi and that's going to start my server localhost port 5000. now if I go ahead and click download from API you can see that header's been output to console so I can see my head and my value and that's good because it means that this is working and it's transferring the header across and it also generates this file and tries to save it so you can see in the iPhone simulator it's got this option to save to files and I can go ahead and do that I'm going to do it on my iPhone and I'm going to go save it there if I go check the files it should now be in the files you can see it exists there and I can open it and you can see that it's got my name and my email which has come directly from that API query parameters so now I'm going to run it on Android and the reason I want to show you this is when you click just using a share on Android it's going to just give you the option for Drive Gmail or a few other small options but if you actually want to save to the devices file system you're going to need to do it a bit of a different way so I'm going to add some Logic for that now so I'm just going to check if the platform operating system is Android because if it is then I'm going to need some custom logic here otherwise I can just continue to share async so what you're going to do first is you're going to use that file system storage access framework to request permission to a directory they will give you permission to save in a particular directory otherwise you won't have permission to do so I'm making this function async as I've now got some awaits in it and if the permissions is true that granted is true then we know that the user has been granted access to a directory and we can go ahead and start our process to save a file there so first off we're just going to want to get the base64 representation of the file that we've downloaded I did actually try moving it because there is a move function from the file x file store storage access framework but unfortunately that wasn't working for me so this is why I've done it this way so I'm just going to read in the content and get it as a base64 string and then I'm going to go ahead and write it to the file system using that storage access framework that's available for Android so once I've got that string I'm going to need to create a file that file is going to be where I can save my save my base64 content so you just specify what directory which you can get from the permissions you specify the file name and you also need to specify the mime type I'm going to go ahead and get those and add those into my function I'll pass them in a bit later permission isn't granted you might just want to provide a backup option of sharing asynchronously so that they can save it to Google Drive or whatever so once the file has been created what we're going to do is we're going to go ahead and we are going to create our new save our data into that file once again we're going to just use that right as string async to that URI and we're going to pass that base64 data we're also going to specify that the encoding is in base64. I'm going to catch any errors and just console log them but in a production app you would handle that in whatever other way you might have a error management system that you're using so that you can access any errors and resolve them so wherever I'm calling save I now need to add those new parameters which is the file name and also the mime type I can get the file name just from the file name that I've specified previously and the mind type I can actually get from the result headers content type I'm going to add that for both of my functions so now if I go ahead and run you can see it request permission to save to a folder and I need to create a new folder I've selected that and I can choose use this folder and allow permission to save there now if I go home and go to the files go to my folder you can see that miscoding PDF has been saved there and now I'm going to show you that same thing for the mp4 file so I'm going to click download from URL I'm going to use this folder and allow access and there you can see that the small.mp4 file has been saved there I hope you've enjoyed this tutorial today if you have please like And subscribe for more content all my code will be available on GitHub

Channel: MissCoding

Views: 16,334

Keywords: misscoding, tech tutorials, learn to code, mobile development, tech career, software engineer, woman in tech, React native, Expo-file-system, Download file expo react native, Save file expo react native, React native for beginners, Expo storage access framework android

Id: HkIKDqzI3sQ

Length: 14min 27sec (867 seconds)

Published: Tue Mar 14 2023