Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How can I upload files to Firebase Storage?

Issue

I need to store uploaded files to Firebase storage and save their link with the corresponding user document in Firestore. However, since there is no native integration between them, I need to use the REST API interface to connect both services together.

Resolution

As there is no native integration between Firebase and Appsmith, we can connect to Firebase through REST API interface. To store uploaded files in Firebase storage and save their link with the corresponding user document in Firestore, we need to follow these steps:



  1. Create a Firebase project and enable Firebase Storage and Firestore.

  2. Create a REST API key in Firebase console and use it to authenticate requests to Firebase storage and Firestore.

  3. Use the Firebase Storage API to upload the file and get its download URL.

  4. Use the Firestore API to save the download URL with the corresponding user document.

  5. Use Appsmith REST API interface to make GET and POST requests to Firebase Storage and Firestore.

Here's an example of code for uploading a file and saving its link with the user document:

// Upload file to Firebase Storage
const fileRef = firebase.storage().ref().child('folderName/' + fileName);
const uploadTask = fileRef.put(file);

uploadTask.on('state_changed', (snapshot) => {
// track upload progress
}, (error) => {
console.log(error);
}, () => {
// get download URL of uploaded file
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
// save download URL with user document in Firestore
firebase.firestore().collection('users').doc(userId).set({
fileURL: downloadURL
}, {merge: true})
.then(() => {
console.log('File URL saved successfully');
})
.catch((error) => {
console.log(error);
});
});
});

With this code, we can upload files to Firebase storage and save their links with user documents in Firestore using Appsmith REST API interface.