send form data to firebase functions

Question

I want to send data from my javascript web page to firebase cloud function (HTTP Request).

I have seen a few tutorials on using Busboy, but that is at the cloud function side. What I want to know is how do I send it to the function from client side web page.

As given in the Google Cloud Functions Documentation, I have used the following code in my Firebase Function.

...
busboy.on('field', (fieldname, val) => {
    // TODO(developer): Process submitted field values here
    console.log(`Processed field ${fieldname}: ${val}.`);
    fields[fieldname] = val;
  });
...

Thanks in advance.

Renaud Tarnec · Accepted Answer · 2019-03-25T14:57:29.747

If you use a "standard" HTTPS Cloud Function, you need to issue an HTTP request from your Web page, with JavaScript. One way to do that is by using the axios library.

It is quite simple:

You declare the library in the head part of your html page

<head>
  ...
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  ...
</head>

And, in your JavaScript code, you call the Cloud Function through its URL. Here is an example with a POST Request:

axios.post('https://us-central1-<project-id>.cloudfunctions.net/<your-cloud-cunction-name>', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
    //Do whatever you wantwith the response object, returned by the HTTPS Cloud Function
  })
  .catch(function (error) {
    console.log(error);
  });

In the Cloud Function you would do req.body.firstName and req.body.lastName to get the values passed in the body of the POST Request. If you don't need to pass values through the request's body, you may use a GET method (and possibly pass some values through Query String).

If you want, in the Cloud Function, to use the 'busboy' library to parse a 'multipart/form-data' upload request (as shown in the example you refer to in your question) the following Stack Overflow answer explains how to do it with axios:

axios post request to send form data

Note that Firebase offers another type of HTTP Cloud Function: the HTTPS Callable Functions.

With this type you can call it from your web front-end using the dedicated Cloud Functions client library provided by Firebase. The documentation shows the following example:

var addMessage = firebase.functions().httpsCallable('addMessage');
addMessage({text: messageText}).then(function(result) {
  // Read result of the Cloud Function.
  var sanitizedMessage = result.data.text;
  // ...
});

Have a look at the doc, which explains all the steps (how to write the Cloud Function and how to call it) into detail.

Is there any other way without using any external library like axios? — Basil Victor, Mar 25 '19 at 11:24
Yes, you could make an HTTP call in Ajax or use jQuery methods (see this doc https://medium.freecodecamp.org/here-is-the-most-popular-ways-to-make-an-http-request-in-javascript-954ce8c95aaa) but I would advise to use Axios, which is quite user friendly and also returned Promises (which is in line with the Firebase Web/JavaScript SDK way of handling asynchronous tasks) — Renaud Tarnec, Mar 25 '19 at 11:28
@BasilVictor See my update on how to send `'multipart/form-data'` upload requests — Renaud Tarnec, Mar 25 '19 at 11:48
i have implemented the axios, but there appears to be an error. Access to XMLHttpRequest at 'https://us-central1-test-ec013.cloudfunctions.net/addData' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Can you please tell me a quick fix. — Basil Victor, Mar 25 '19 at 14:01
Have a look at https://stackoverflow.com/questions/54102360/cant-deploy-firebase-cloud-function/54106882#54106882 — Renaud Tarnec, Mar 25 '19 at 14:37

score 0 · Answer 2 · answered Mar 25 '19 at 15:01

0

I know, that axios is not the best solution for objects like formData (pics and others), may will be better if you use fetch?

answered Mar 25 '19 at 15:01

Ciemna_noc

21
1
4

send form data to firebase functions

2 Answers2