Upload multiple Files to Firebase

This tutorial to Upload multiple files to firebase will explain how simple and similar it is to single file upload. You can use multiple-file input or drag-and-drop or both to achieve that.

Upload multiple Files to Firebase

This tutorial to upload multiple files to firebase will explain how simple and similar it is to single file upload. You can use multiple-file input or drag and drop or both to achieve that.


Steps

The whole login to upload multiple files can be seen in simple steps as follows:

  1. Setup the form with input type file or Drag and Drop (DnD)
  2. The on file changes in input or file-drop on the DnD, generate preview and wait for User Submit
  3. On user submit, first get the file upload promises for each file; you can use array maps for this
  4. Use Promise.all to ensure and wait until all file upload promises are resolved
  5. When all promises are resolved, use the file download links to store in DB; e.g. against entities like Blog Post, Status etc.

UIs to upload multiple files to firebase

Input type=file

Input type file would except multiple files and on change it would provide fileList object with multiple files.

With multiple files In the fileList object you can loop over them and create a promise for each file and use the promises API to wait for all the promises to finish.

Drag and Drop

From drag and drop, If the files are dropped over a drop zone you would receive fileList in the datatransfer attribute of drop event. And with this fileList, it is as similar to handling the input with multiple files.


Code

Now to upload the files to firebase, we will use the code from previous post; where we had talked about uploading single file to firebase.  That post can be read here:

? Upload Files to Firebase Storage with JavaScript - Time to Hack
Firebase; being a robust Realtime Database solution; it provides Storage of files as well. Learn how to upload files to Firebase Storage with JavaScript in simple steps

And to use the drag and drop, we will take the code from post where we had talked about handling files in drag and drop.


HTML & Styles

Following is the HTML and Styles for both input type file and Drag and Drop to upload multiple files to firebase:

<div class="form-group">
  <label for="pictures">Pictures</label>
  <input name="pictures" type="file" class="form-control" id="pictures" accept="image/*" multiple>
  <div class="img-preview" id="form-image-preview">
</div>

<div class="form-group" file-drop>
  <label for="firstName">What's on your mind? <small class="text-muted">(Drag and Drop files in textarea)</small></label>
  <textarea maxlength="400" name="status" id="status" class="form-control" cols="30" rows="5" placeholder="What's on your mind?"></textarea>
</div>
<div file-drop-preview></div>
    
<style>
[file-drop] {
  position: relative;
  border: 1px solid transparent;
}
.solid-border:after {
  border: 1px dashed #aaa;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  content: 'Drop Files Here!';
  text-align: center;
  line-height: 100%;
}
.img-preview > div,
[file-drop-preview] div {
  display: inline-block;
  position: relative;
}
.img-preview img,
[file-drop-preview] img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}
.img-preview > div,
[file-drop-preview] > div {
  margin: 0.25em;
}
</style>

JavaScript

With following JavaScript code we will handle the changes in the input type file and file drop in dropzone and upload them to firebase:

document.addEventListener("DOMContentLoaded", function(event) {
  const preview = document.querySelector('#form-image-preview')

  const statusDropzone = document.querySelector('[file-drop]');
  const statusDropzonePreview = document.querySelector('[file-drop-preview]');

  const fileCollection = [];
  const fileDropzoneCollection = [];

  const events = [
    'dragenter',
    'dragleave',
    'dragover', // to allow drop
    'drop'
  ];
  events.forEach(e => {
    statusDropzone.addEventListener(e, (ev) => {
      ev.preventDefault();
      if (ev.type === 'dragenter') {
        statusDropzone.classList.add('solid-border');
      }
      if (ev.type === 'dragleave') {
        statusDropzone.classList.remove('solid-border');
      }
      if(ev.type === 'drop') {
        statusDropzone.classList.remove('solid-border');
        [].slice.call(ev.dataTransfer.files).map(f => fileDropzoneCollection.push(f));
        renderCollection(fileDropzoneCollection, statusDropzonePreview);
      }
    })
  })


  document.querySelector('#pictures').addEventListener('change', (e) => {
    const formData = extractFormData('#statusForm');
    while (fileCollection.length) {
      fileCollection.pop();
    }
    [].slice.call(formData.pictures).map(f => fileCollection.push(f));

    renderCollection(fileCollection, preview);
  });
});

You can see Full version of above code here: https://github.com/time2hack/upload-multiple-files-firebase


Resources

In a gist, guides used to facilitate this post and above code are

Simple tutorial for Drag and Drop in HTML5 with JavaScript
Drag and Drop is a the basic feature needed when talking about the application handling Media or shuffling Data.This post is a simple tutorial for Drag and Drop in HTML5 with JavaScript.
Generate instant previews for image upload - Time to Hack
Quick and Easy solution to generate preview of images upload in vanilla javascript in callback and Promise style.
? Upload Files to Firebase Storage with JavaScript - Time to Hack
Firebase; being a robust Realtime Database solution; it provides Storage of files as well. Learn how to upload files to Firebase Storage with JavaScript in simple steps

Demo Code

Let me know your thoughts and opinions about this article through comments ? or on twitter at @heypankaj_ and @time2hack.

If you find this article useful, share it with others ?