How to Upload and Download Files with Firebase Storage in Next.js | Typescript | Tailwind CSS

hello everyone my name is Rohit and welcome to my channel in this video I'm going to show you how to upload a local media files to Firebase using nexs we will also see how to download that uploaded files I'm using typescript and Tailwind CSS in this project for the source code check out the description so without any further delay let's get [Music] started first initialize a new app name the project as you wish and select your project settings according to your preferences these are the settings for my project wait for a few seconds Now navigate to the newly created project directory open your project in your favorite code editor back to the terminal install the Firebase package using the command npm install Firebase now when you navigate to the package.json file you will find the version of Firebase you are currently working on ensure that you are using the latest version to stay up to date with the newest features and improvements before diving into your code initiate your project by running the command npm runev this will showcase the default rendering of the next year app next visit firebase.com and configure Firebase for your nexs app follow the video instructions carefully choose the web option since we are setting Firebase for the web platform add a nickname for your app and click on registered app to connect your Nexus app with Firebase you will need the config Keys create a config.txt and paste the config keys there now let's make a slight adjustment to accommodation Firebase storage in the build section click on storage and then select get started you will need to choose between a starting test mode and production mode for testing purposes I will opt for a start in test mode if you decide to go with production mode remember to adjust the rule from false to true this step is crucial for ensuring your apps functions correctly and securely with Firebase storage this section Imports the necessary modules and libraries use client is a NEX directive for client component US state is a react hook for managing State the functions from Firebase storage are used for interacting with Firebase storage and storage is an instance of the Firebase storage service imported from a configuration file this is the main component function home it uses the US state hook to create three state variables file to exore the selected file upload progress to track the upload progress and download URL to store the download URL of the uploaded file the handle file change function is called when the user selects a file from the file input it checks if a file is selected and updates the file state with the selected file the handle upload function is called when the user clicks upload button it checks if a file is selected creates a reference to the file in Firebase storage using ref and starts an upload task using upload Byes resumable the upload task is monitored using the on method which updates the upload progress State as the upload progresses if an error occurs it locks the error to the console once the upload is complete it retes the download URL of the uploaded file using the get download URL and updates the download URL state the handle download function is called when the user clicks the download button it check if the download URL state is not empty creates a temporary link element with the download URL simulates a click on the link to trigger the file download and then removes the link element from the Dom this section is responsible for rendering the user interface of the file upload and download component the utter Dev element sets the layout of the component the flex Flex call classes make it a flex container with a column layout the item Center and justify center classes Center the content horizontally and vertically respectively the H screen class sets the height of the container to the full height of the screen inside the container there is H1 element that displays the heading upload file to fireb storage it has a large font size bold font weight and some bottom margin next there is an input element of type file this is the file input field where the user can select a file to upload the onchange event is connected to the handle file change function which handles the file selection below the file input there is a button with the text upload the button has a blue background white text some padding and top margin and rounded Corners when clicked it calls the handle of upload function to initiate the file upload process this portion is a conditional rendering expression if the upload progress state is greater than zero that is the upload is in progress it renders a progress element this is an HTML progress bar that shows the upload progress visually the value prop is Bor to the upload progress State and the max prop is set to 100 it also has a top margin there is another conditional rendering expression if the download URL state is not empty that is the file has been uploaded successfully it renders a div with some additional content inside the div there is a p element that displays the message file uploaded successfully next there is an anchor element that displays the download URL of the uploaded file it has an underline and when clicked it opens the download URL in a new tab the HF prop is Bor to the download URL state finally there is a download button that allows the user to download the uploaded file this button has a green background white text some padding a left margin and the rounded Corners when when clicked it calls the handle download function which initiates the file download process now it's time to test our app it's working as expected the file gets uploaded to Firebase storage and when I click on the download button it is available for download that's it for this video if you found this video helpful then hit the Subscribe and like button thanks for watching see you in my next video

Channel: Bug Ninza

Views: 149

Keywords: firebase storage, how to get image download link from firebase storage, how to upload and view pdf files in react, firebase, upload image on firebase storage v9 javascript, upload retrieve image firebase storage v9 javascript, firebase image upload, upload image to firebase javascript, firebase tutorial, upload images / files to firebase in react, how to upload files to firebase storage using react.js, how to upload and view pdf files in react js

Id: 8_qEApujXCk

Length: 12min 22sec (742 seconds)

Published: Wed Mar 13 2024