Skip to main content

Upload Files to Firebase Storage with dropzone.js

Almost every file uploader I found on web are expecting url to where we want to upload file. If you are using firebase storage then you will find this awkward as you don't have any rest url where you have to upload file

Instead, file upload handled by firestore library firebase-storage.

After certain effort I found a way to use dropzone.js with firebase storage. Here is some snippet of code which you may find useful, If you are in the same situation as I am.

This both function are in same file

Dropzone configuration.. ( in index.js )

   var myDropzone = new Dropzone("form#dropzone", { // Make the whole body a dropzone
          url: '/',  
          addRemoveLinks: true,  
          method: 'put',  
          autoQueue: false,
          autoProcessQueue: false         
        myDropzone.autoDiscover = false;
        myDropzone.on("addedfile", function(file) {
          var reader = new FileReader();
          if (myDropzone.files.length < 4 ) {
              reader.onload = function(event) {
                 // contains base64 encoded image
                 console.log("file being uploaded ")
                  storage_upload("image",, file, myDropzone ,(r)=>{
                    console.log("Storage upload response")
          }else {
            console.log('skipping file as we are excceding the upload limit')

        myDropzone.on("removedfile", function(file){
          var storageRef ="/");
             console.log(file.fullPath  + " deleted succefuly")
            }).catch(function(error) {
              console.log("Something is wrong")

Firebase upload function ( in index.js not in function.js )

function storage_upload(filedata, filehandle, DropzoneHandle, cb) {

  // Getting Handle of the progressbar element of current file // 
  var progressBar = filehandle.previewElement.children[2]  

  // Firestore storage task 
  var task
  // uuid for file being uploaded
  var uuid_string = uuid()

  // Getting Storeage referance for file 
  var storageRef = + "/" + uuid_string );

  // Because I am uploading file in base64 data_url // 
  task  = storageRef.putString(filedata, 'data_url');
  // Making progress bar of current file preview element visible  
  progressBar.opacity = 1


      // Trakcing progress of upload
      function progress(snapshot){
        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        // Updating progressbar width - to make it look like filling
        progressBar.children[0].style.width = progress+'%'

      // Firebase storeage upload error handling 
      function(error) {
        // Hanlde your way
        // A full list of error codes is available at

      // Finishing process and returing data
      // Returning file-meta and  url
      // and hiding progress bar  
      function() {

        // Upload completed successfully, now we can get the meta data of file
        task.snapshot.ref.getMetadata().then(function(meta) {
   // Getting download url of file

              // storing meta data and download url in object and returning 
              // it to callign function ... 
              var response = {
                object_info: {
                  publicURL: downloadUrl,
                  metainfo: meta
                type_of_object: type
              filehandle.fullPath = meta.fullPath
              return cb(response)
        // Hiding progress bar for current file = 0


Popular posts from this blog

Google blogger Ideas panel

Google blogger Ideas  I opened by blogger today, and..   I got this.  Google blogger Ideas  A panel suggesting a topic on which I can write my next blog. It's fetching unanswered question from web according to your previous post and topics. It was something, I was really looking for, after all it takes time to finding subject on which to write next and still being in the same niche.  Awesome feature Blogger! 

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the e