Firebase Storage - Upload files

Maintain the project details and initialize Firebase in AppGyver before performing the below steps. Check out my post on Firebase initialization and if you don't have any ideas or need to refresh. For better understanding, I will be using the same application created during the Firebase initialization post.

Firebase setup

• Login to your Firebase console and open your project. On the left hand side, under Build, click on Storage. You will have the initial page for storage like below.

• Click on the Get started button.

• Before starting work in AppGyver to upload storage. Let me upload one or two files manually by clicking on the upload file button and explain some important things.

• After uploading the file manually, you can see the file getting displayed like below.

• If you click on the item to give more details about the file, you will get an error.

• As you can clearly see, the file name field is a link to the original file URL. Click on the file name to display the file.

• You will get below error stating permission denied.

• If you noticed, we did not get a pop up to select the secure rule like we used to get while creating a database. Because of this, the rule is always false.

• You can add your own secure rules based on your application. For now, I will provide access without any restrictions and publish it.

• After allowing access, if you are uploading the same file and trying to click on the file. You can see the preview now.

Creating application to upload files in AppGyver

• Create a new project in Appgyver and maintain the Firebase project details and initialize it.

• Delete the default text components and then add a button named upload file.

• When the upload file is clicked, we need to pick a file from our device as the source to upload. So download the Pick files from the flow logic marketplace and trigger them.

• Download Firebase Storage Upload files from the market place and bind the output of pick files as an input.

Binding logic

• That's it! Now you can click on the upload files button, pick the file and the file will get uploaded to firebase storage.

• In the below video, I will upload all basic types of files such as images, PDFs, videos and audio files in a single selection.

Files can be seen in Storage ( Refresh the page to see the file )

Upload file to folders

• You might be wondering that it would be difficult to find the files getting updated under the same path. To overcome this issue, we have a property named Custom upload path under the optional inputs of the Firebase Upload file function.

• You can name the folder path and files will be uploaded to that directory in your storage.

• For example, If I give images in the custom upload path property, a new folder named images will be created and files will be uploaded to that path.

File upload using custom path

Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.