I would like to use uppy with Firebase Storage

mcerisano · April 28, 2018, 1:33pm

Uppy provides a fantastic user experience. I was hoping to be able to use uppy to upload documents to Firebase Storage. I discovered that there is some documentation describing the creation of plugins, but also wondered if anyone has tackled this before?

Firebase provides an API for uploading to storage so I am guessing that this should be possible.

goto-bus-stop · April 30, 2018, 10:24am

Hey, thanks for your interest! I’m not aware of an existing Firebase Storage integration. The plugin documentation is still quite rough so feel free to ask here or on the Github issue tracker if something’s unclear!

kvz · May 23, 2018, 2:53pm

Where you maybe also the person who created https://github.com/sne11ius/egghead.space/blob/feature/file_upload/src/service/FirebaseCloudStorage.js or is that a coincidence? If not… Maybe it helps

From this issue: https://github.com/transloadit/uppy/issues/839

mcerisano · May 25, 2018, 2:52am

This looks promising. Have you seen any samples that integrate this with an angular app?

kvz · May 25, 2018, 8:38am

I haven’t personally but I asked the author to chime in here, maybe we get lucky

snellius · May 25, 2018, 2:55pm

Hey, thanks for taking interest in this.

Unfortunately (well, it depends I guess ;)), I’m using vuejs for the ui, so you won’t find any angular code.

However, since angular and vue share some basic concepts, maybe you can roll your own solution after taking a look at my upload compoment:

github.com

sne11ius/egghead.space/blob/feature/file_upload/src/components/FileUpload.vue

<template>
  <div id="upload-area">
  </div>
</template>

<script>
import Uppy from "uppy/lib/core";
import Dashboard from "uppy/lib/plugins/Dashboard";
import { storage } from "@/firebase";
import FirebaseCloudStorage from "@/service/FirebaseCloudStorage";
import uuid from "uuid/v4";

import "uppy/dist/uppy.min.css";

export default {
  name: "FileUpload",
  mounted() {
    const storageRef = storage.ref().child("temp");
    const uppy = Uppy({
      autoProceed: true,

This file has been truncated. show original

The code is still a little messy because I haven’t finished working on that branch yet - sorry about that

Feel free to ask any questions…

mcerisano · May 25, 2018, 3:12pm

Thanks for reaching out. I will see what i can do with this.

kvz · May 25, 2018, 3:14pm

Please do share your findings with us!

kvz · March 21, 2019, 10:59am

Just adding to this, if you are a Transloadit customer, you can also have our backend export Uppy file uploads to Firebase. An example of this is here https://transloadit.com/blog/2018/12/2h-youtube-clone/

Topic		Replies	Views
Handle google-drive file Uppy	1	1155	July 10, 2020
Using Uppy to upload files in parallel with Cloud Firestore meta data Uppy	2	514	January 8, 2021
Is there a working example of Uppy using Form on vue? Uppy	0	1011	May 20, 2021
File explorer that works with Uppy Uppy	0	180	October 31, 2023
I want Uppy to upload to Google Drive some question Uppy	1	1182	February 6, 2021

I would like to use uppy with Firebase Storage

Related Topics