Firebase

Upload multiple Files to Firebase πŸ“€

Upload multiple Files to 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.

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: https://time2hack.com/2017/10/upload-files-to-firebase-storage-with-javascript/

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

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 @patel_pankaj_ and @time2hack.

If you find this article useful, share it with others πŸ—£

You've successfully subscribed to Time to Hack!