使用 Firebase Storage 和 Dropzone 使用 JavaScript 上传

Question

I have been doing a lot of research and have yet to find a viable solution for the following. I asked a more specific question here ) but due to the lack of answers or comments, I decided to ask a more generalized question that may be applicable to more people.

Anyway, dropzone.js allows you to create a file upload with js. Below is a snippet of code that does just that:

var myDropzone = new Dropzone(document.body, {
  url: "/" // Not sure what to put here...
});

Where the url: "" would be equivalent to the action="" in a form. Most examples you can find have url: "upload.php" however I am trying to upload the images to firebase. Is there a way to run js for the file upload instead of php? perhaps url: "upload.js"? That wouldn't work but just to show what I mean. Or is there a way to upload images to Firebase with PHP? I am not quite sure how to proceed.

Here is what dropzone.js says about the URL attribute, I just don't understand it fully:

URL: Has to be specified on elements other than form (or when the form doesn't have an action attribute). You can also provide a function that will be called with files and must return the url (since v3.12.0)

Answer 1

You can't upload directly to Firebase Storage via some special URL that you can put in a web form. But you can easily implement an endpoint with Cloud Functions for Firebase with a little extra code you write that runs on the server side.

I have a short Gist that gives all the code that makes it happen.

You can watch the code in action in this tweet .

I hosted my web site via Firebase Hosting, but if you don't do that, you may need to set up CORS or something to be able to call from your page to Cloud Functions.