I have a simple function uploaded to Firebase Functions, that uses an external dependency (jimp). My code has some "console.log()" to trace what is happening when the function is triggered (by a 'write' action in Firstore).
According to the logs I can see in the firebase console,
every step of the function is running correctly, until it reaches the first call to the jimp object. At this point, no more logs on the console.
const Jimp = require('jimp');
const os = require('os');
...
exports.manageImage2 = functions.firestore
.document('/items/{docId}')
.onWrite(event => {
console.info('event triggered:', event);
console.log('tmpDir', os.tmpdir());
const originalUrl = data.original_file_url;
const imageSize = data.size;
if (imageSize > maxSize) {
console.log(`Image is too big (${imageSize})`);
Jimp.read(originalUrl, (err, image) => {
...
I guess there is something wrong with the dependency, but I have no clue what it can be.
I obviously ran my code locally with any issue and also made sure the library is correctly listed in the dependencies of package.json
Any idea?
Jimp.read is a callback styled asynchronous function. Use promise for adapt it to functions.
exports.manageImage2 = functions.firestore
.document('/items/{docId}')
.onWrite(event => {
console.info('event triggered:', event);
console.log('tmpDir', os.tmpdir());
const originalUrl = data.original_file_url;
const imageSize = data.size;
if (imageSize > maxSize) {
console.log(`Image is too big (${imageSize})`);
return new Promise(resolve => Jimp.read(originalUrl, (err, image) => {
// …
// resolve(result);
}));
}
});
For explanation read this: https://firebase.google.com/docs/functions/terminate-functions.
Related
I am trying to store the downloadLink from firebase's storage into firestore. I am able to set all the data, and I am able to set the link, the second time I click the "post" button.
I know the issue has to do with asynchronous functions, but I'm not experienced enough to know how to solve the issue.
In the "createPost" function, I am console logging "i am the URL: {url}" and in the "uploadFile" function, I am console logging "look at me {url}" to debug.
I noticed the "I am the URL" outputs nothing and then shortly after, the "look at me" outputs the URL.
setDoc() of course stores the imageLink as an empty string.
What can I do to solve this? Any help would be greatly appreciated or any documentation to help with my understanding of async functions.
Here is my code:
const PostModal = (props) => {
const makeid = (length) => {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
const [descriptionText, setDescriptionText] = useState("");
const [addressText, setAddressText] = useState("");
const [venueText, setVenueText] = useState("");
const [startTimeText, setStartTimeText] = useState("");
const [endTimeText, setEndTimeText] = useState("");
const [shareImage, setShareImage] = useState("");
const [videoLink, setVideoLink] = useState("");
const [assetArea, setAssetArea] = useState("");
const [url, setURL] = useState("");
const { data } = useSession();
const storage = getStorage();
const storageRef = ref(storage, `images/${makeid(5) + shareImage.name}`);
const uploadFile = () => {
if (shareImage == null) return;
uploadBytes(storageRef, shareImage).then( (snapshot) => {
//console.log("Image uploaded")
getDownloadURL(snapshot.ref).then( (URL) =>
{
setURL(URL);
console.log(`look at me: ${URL}`)});
});
}
const createPost = async () => {
var idLength = makeid(25);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadFile()
console.log(`I am the URL: ${url} `)
setDoc(doc(db, "posts", idLength), {
eventDescription: descriptionText,
eventAddress: addressText,
venueName: venueText,
startTime: startTimeText,
endTime: endTimeText,
imageLink: url,
videoLink: videoLink,
username: data.user.name,
companyName: !data.user.company ? "" : data.user.company,
timestamp: Timestamp.now(),
});
}
const handleChange = (e) => {
const image = e.target.files[0];
if(image === '' || image === undefined) {
alert('not an image, the file is a ${typeof image}');
return;
}
setShareImage(image);
};
const switchAssetArea = (area) => {
setShareImage("");
setVideoLink("");
setAssetArea(area);
};
const reset = (e) => {
setDescriptionText("");
setAddressText("");
setVenueText("");
setStartTimeText("");
setEndTimeText("");
setShareImage("");
setVideoLink("");
setURL("");
props.handleClick(e);
};
This was taken from a reddit user who solved my answer. Big thank you to him for taking the time to write out a thoughtful response.
So, you're kinda right that your issue has a bit to do with asynchronicity, but it's actually got nothing to do with your functions being async, and everything to do with how useState works.
Suffice it to say, when you call uploadFile in the middle of your createPost function, on the next line the value of url has not yet changed. This would still be true even if uploadFile were synchronous, because when you call a useState setter function, in this case setURL, the getter value url doesn't change until the next time the component renders.
This actually makes perfect sense if you stop thinking about it as a React component for a moment, and imagine that this was just vanilla JavaScript:
someFunction () {
const url = 'https://www.website.com';
console.log(url);
anotherFunction();
yetAnotherFunction();
evenMoreFunction();
console.log(url);
}
In this example, would you ever expect the value of url to change? Probably not, since url is declared as const, which means if the code runs literally at all, it's physically impossible for the value of url to change within a single invocation of someFunction.
Functional components and hooks are the same; in a single "invocation" (render) of a functional component, url will have the same value at every point in your code, and it's not until the entire functional component re-renders that any calls to setURL would take effect.
This is an extremely common misunderstanding; you're not the first and you won't be the last. Usually, it's indicative of a design flaw in your data flow - why are you storing url in a useState to begin with? If you don't need it to persist across distinct, uncoupled events, it's probably better to treat it like a regular JavaScript value.
Since uploadBytes returns a promise, you could make uploadFile asynchronous as well, and ultimately make uploadFile return the information you need back to createPost, like this:
const uploadFile = async () => {
if (shareImage == null) return;
const snapshot = await uploadBytes(storageRef, shareImage);
// console.log("Image uploaded")
const URL = await getDownloadURL(snapshot.ref);
return URL;
};
All I've done here us un-nest your .then calls, pulling the trapped values out into the usable scope of your uploadFile function. Now, you can change that one line of createPost to this:
const url = await uploadFile();
and eliminate your useState altogether.
Let's say we have firebase project in which we have to use RTDB.
In RTDB we have created multiple databases.
I created a cloud trigger function i.e .onCreate so that my both databases get updated whenever I update any of two. When I am creating anything in default database it is working completely fine but when I am trying to update through other database (other than default one) it doesn't update default one. So could you please help me on this?
/* eslint-disable */
import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
admin.initializeApp();
//this method is updating on creating data on database mentioned in instance id
export const newTest1=functions.database.instance('flysample-75b81-227ae').ref('/msg')
.onCreate((snapshot, context) => {
let app = admin.app();
app.database('https://flysample-75b81.firebaseio.com/').ref('/db1').set({Name:"Database1"})
app.database('https://flysample-75b81-227ae.firebaseio.com/').ref('/db1').set({Name:"Database1"})
return "done";
});
//this method is updating only by creating data on default database
export const newTest2=functions.database.ref('/msg')
.onCreate((snapshot, context) => {
let app = admin.app();
app.database('https://flysample-75b81.firebaseio.com/').ref('/db1').set({Name:"Database1"})
app.database('https://flysample-75b81-227ae.firebaseio.com/').ref('/db1').set({Name:"Database1"})
return "done";
});
//below 2 method works fine but i want to do this by single function
export const myFunTest1 = functions.database.instance('flysample-75b81').ref('/name')
.onCreate((snapshot, context) => {
let app = admin.app();
app.database('https://flysample-75b81.firebaseio.com/').ref('/db1').set({Name:"Database1"})
app.database('https://flysample-75b81-227ae.firebaseio.com/').ref('/db1').set({Name:"Database1"})
return "done";
});
export const myFunTest2 = functions.database.instance('flysample-75b81-227ae').ref('/name')
.onCreate((snapshot, context) => {
let app = admin.app();
app.database('https://flysample-75b81.firebaseio.com/').ref('/db1').set({Name:"Database1"})
app.database('https://flysample-75b81-227ae.firebaseio.com/').ref('/db1').set({Name:"Database1"})
return "done";
});
Your code is completely ignoring the asynchronous nature of writing to the database, which means there is no guarantee that any of the database writes completes before the instance gets terminated.
To ensure the writes don't get interrupted, wait for them to complete before returning a result with something like this:
export const newTest2=functions.database.ref('/msg')
.onCreate((snapshot, context) => {
let app = admin.app();
return Promise.all([
app.database('https://flysample-75b81.firebaseio.com/').ref('/db1').set({Name:"Database1"})
app.database('https://flysample-75b81-227ae.firebaseio.com/').ref('/db1').set({Name:"Database1"})
]).then(() => {
return "done";
});
});
I've written the below code to create a task whenever a new item is added to a collection in the firestore.
import * as functions from 'firebase-functions'
import * as admin from 'firebase-admin'
const { CloudTasksClient } = require('#google-cloud/tasks')
exports.moveActivityFromPlanToRecord = () =>
functions
.region('europe-west1')
.firestore.document('Users/{userId}/Activities/{activityId}')
.onCreate(async snapshot => {
const moveTime = snapshot.data()! as MoveTime
if (!moveTime || !moveTime.dueTime) {
console.log("DueTime is empty or null: \n" + moveTime)
return
}
// Get the project ID from the FIREBASE_CONFIG env var
const project = JSON.parse(process.env.FIREBASE_CONFIG!).projectId
const location = 'europe-west1'
const queue = 'activityDateEventChecker'
//queuePath is going to be a string that uniquely identifes the task
const tasksClient = new CloudTasksClient()
const queuePath: string =
tasksClient.queuePath(project, location, queue)
// URL to my callback function and the contents of the payload to deliver
const url = `https://${location}-${project}.cloudfunctions.net/activityDateEventCheckerCallback`
const docPath = snapshot.ref.path
const dueTime = moveTime.dueTime
const payload: MoveTaskPayload = { docPath, dueTime }
console.log(payload)
// build up the configuration for the Cloud Task
const task = {
httpRequest: {
httpMethod: 'POST',
url: url,
body: Buffer.from(JSON.stringify(payload)).toString('base64'),
headers: {
'Content-Type': 'application/json',
},
},
scheduleTime: {
seconds: moveTime.dueTime / 1000
}
}
// enqueue the task in the queue
return tasksClient.createTask({ parent: queuePath, task: task })
})
interface MoveTime extends admin.firestore.DocumentData {
dueTime?: number
}
interface MoveTaskPayload {
docPath: string,
dueTime: number
}
When the function is triggered (when a new "activity" is added to the collection), it throws the following error:
Error: 3 INVALID_ARGUMENT: Request contains an invalid argument
What could be the problem here?
BTW, should the last line in the method return the task, or await it?
EDIT: The exact same code is now working without me changing anything! I just deployed it with the Termux app just for fun, and after that it started working!
My guess is your current issue stems from:
`exports.moveActivityFromPlanToRecord = () => ...
If you remove the () => part then when the moveActivityFromPlanToRecord function is called, the expected parameters will need to match what onCreate() expects.
That shouldn't solve everything for you because onCreate() takes two parameters, function onCreate(snapshot: DataSnapshot, context: EventContext): PromiseLike<any> | any (took that from the docs rather than source code because I'm on mobile). Which means that there is no way for the onCreate() function to receive parameters in your current implementation.
What could be the problem here? \ BTW, should the last line in the method return the task, or await it?
Almost certain that you need to return a Promise or String. That's a basic understanding you should read about for all background Google Cloud functions.
There may be other issues, but that should help resolve what your asking for.
I did Google around and tried some code but didn't work, since every time I deploy cloud functions to firebase, it takes about 30 secs - 1 min, I think it's a complete waste of time if I continued to try code from the internet
So, I need to write a cloud function like this:
const admin = require('firebase-admin');
module.exports = function (request, response) {
const { message } = request.body;
// Now, store `message` into firebase storage
// path is: /messages/new_message, where `new_message`
// is NOT a folder, but the file that contains `message`
}
I do have a solution, but obviously, it's not a wise choice, I mean, I can always install firebase package, then call initializeApp(...), then firebase.storage().ref().... Is there another way to do this? Could you please write a little code to elaborate it?
You'll want to use the #google-cloud/storage module.
// Creates a GCS client,
const storage = new Storage();
module.exports = function (req, res) {
const { message } = req.body;
const bucket = storage .bucket('projectid.appspot.com');
const file = bucket.file('myFolder/myFilename');
// gcloud supports upload(file) not upload(bytes), so we need to stream.
const uploadStream = file.createWriteStream();
.on('error', (err) => {
res.send(err);
}).on('finish', () => {
res.send('ok');
}
uploadStream.write(data);
uploadStream.end();
}
See my parse-server GCS adapter for an example.
// The Cloud Functions for Firebase SDK to create Cloud Functions and
setup triggers.
const functions = require('firebase-functions');
// The Firebase Admin SDK to access the Firebase Realtime Database.
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
exports.giveCard = functions.firestore
.document('Profiles/{profileId}/cards/{cardsId}/_given/{_givenID}')
.onWrite((event) => {
// Get the field values of what I am working with
const oldGiven = event.data.previous.data()['given'];
const newGiven = event.data.data()['given'];
// Get the cardID to make sure that is there
const cardID = event.params.cardsId;
// An array to go through
const give_profiles = event.data.data()['given_profiles'];
// error cardDatatwo is returned as undefined
const cardDatatwo = newGiven.parent;
// error cardDatathree is returned as undefined
const cardDatathree = event.data.ref.root
// // error cardDatafour cannot read propoerty of undefined
// const cardDatafour = cardDatathree.child('Profiles/{profileId}/cards/{cardsId}')
// error cardDatafive 'The value of cardfive is DocumentReference...
const cardDatafive = event.data.ref.firestore.doc('Profiles/{profileId}/cards/{cardsId}');
// Check that the values have changed
if (newGiven == oldGiven) return;
if (newGiven !== undefined) {
console.log('The old value of given is', oldGiven);
console.log('The new value of given is', newGiven);
console.log('The value of the card is', cardID);
console.log('The value of the cardtwo is', cardDatatwo);
console.log('The value of the cardthree is', cardDatathree);
// console.log('The value of the cardfour is', cardDatafour);
console.log('The value of the cardfive is', cardDatafive);
for (var profile of give_profiles) {
console.log(profile);
};
return;
}
return console.log("No given value");
});
I am having great difficulty in getting the root for Firestore working with Cloud Functions. It works differently of course.
I am try to get a value up the path towards the root after an onUpdate has been fired further down.
.parent does not work
functions.database.ref of course does not work as that's the realtime database
and cannot use
firebase.firestore() is also not working in node
and event.data.ref.firestore.doc comes back as undefined.
I am sure have gone through every option.
Hope you can help.
Wo
According to the documentation, you can access collections via firestore, like this:
exports.giveCard = functions.firestore
.document('Profiles/{profileId}/cards/{cardsId}/_given/{_givenID}')
.onWrite((event) => {
// other code
const ref = event.data.ref.firestore.doc('your/path/here');
return ref.set({foo: 'bar'}).then(res => {
console.log('Document written');
});
});
You can use firestore to build a path to whatever part of the database you're seeking to access. You can also use event.data.ref.parent, like so:
exports.giveCard = functions.firestore
.document('Profiles/{profileId}/cards/{cardsId}/_given/{_givenID}')
.onWrite((event) => {
// other code
const parentref = event.data.ref.parent;
const grandparentref = parentref.parent; // gets to cardsId
return grandparentref.set({foo: 'bar'}).then(res => {
console.log('Document written');
});
});