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.
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
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 ?