Firebase

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.

Pankaj

Dec 26, 2018 • 4 min read

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:

Setup the form with input type file or Drag and Drop (DnD)
The on file changes in input or file-drop on the DnD, generate preview and wait for User Submit
On user submit, first get the file upload promises for each file; you can use array maps for this
Use Promise.all to ensure and wait until all file upload promises are resolved
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:

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

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 ?