Upload Folder(s) On Firebase - Javascript

Can we upload empty folders or simply folders who contains many files in it on the firebase storage ? Because actually i can upload one files but too, multiples files, but i didn'

Solution 1:

I'd suggest you to go to Google Cloud (Firebase projects live in the Google Cloud as well), and check your storage buckets there. You'll be able to see an upload folder option there, which you can use to upload folders through a GUI. You can drag and drop multiple folders if you wish.

Solution 2:

There is no way to upload an entire folder to Cloud Storage for Firebase in one go. You will have to upload the individual files in the folder.

The is no concept of an empty folder in Cloud Storage for Firebase. Folders only exist by the fact that they have files in them.

Also see:

• Retrieve multiple photos under a node from Firebase Storage
• How can i upload multiple files to firebase storage at once?
• How to upload multiple files to Firebase?

Solution 3:

To do this programmatically, the best solution is to:

(1) Recursively get a list of all the files in the folder you wish to upload

(2) Upload all files in one hit with Promise.all

This approach works because, inter alia, firebase creates missing storage paths for you

The code (written in TS) for (1) and (2) follows

RECURSIVELY GET A LIST OF FILES

import { Dirent, readdirSync } from'fs'import path from'path'import { IPath } from'../interfaces/i-path'import { escapeRegExp } from'lodash'interface IDirent {
  dirent: Direntpath: string
}

const getAllFiles = (dir: string): IDirent[] => {

  constdirents: IDirent[] = readdirSync(dir, { withFileTypes: true }).map((dirent: Dirent) => ({ dirent, path: path.resolve(dir, dirent.name) }))

  return dirents.reduce((acc: IDirent[], dirent: IDirent) => {
    if (dirent.dirent.isDirectory()) return [...acc, ...getAllFiles(dirent.path)]
    if (dirent.dirent.isFile()) return [...acc, dirent]
    return acc
  }, [])
}

exportconst getAllFilesInFolder = (dir: string): IPath[] => {

  const regex = newRegExp(`^${escapeRegExp(dir)}`)

  returngetAllFiles(dir).map((dirent: IDirent) => {
    letshortPosixPath: string = dirent.path.replace(regex, '')
    shortPosixPath = shortPosixPath.split(path.sep).join(path.posix.sep)
    if (shortPosixPath.startsWith(path.posix.sep)) shortPosixPath = shortPosixPath.substring(1)
    return { fullPath: dirent.path, shortPosixPath }
  })
}

UPLOAD ALL FILES IN ONE HIT

import os from'os'import { getAllFilesInFolder } from'../../utils/get-all-files-in-folder'import { IPath } from'../../interfaces/i-path'import admin from'firebase-admin'import { getObjectPath } from'../../utils/string-utils'import path from'path'import * as functions from'firebase-functions'// the following code will live inside some functionconst storageBasePath = 'videos-out/test-videos/video-14/hls'constdir: string = '/temp/my-folder-to-upload'constfiles: IPath[] = getAllFilesInFolder(dir)

// object.bucket is just a string and is the bucket you are uploading to - e.g. something.appspot.comconst promises = files.map((file: IPath) => {
  const destination = `${storageBasePath}/${file.shortPosixPath}`return admin.storage().bucket(object.bucket).upload(file.fullPath, { destination })
})

Promise.all(promises).then(
  () =>console.log('success')
).catch(
  () =>console.log('failure')
)

Finally, the interface IPath is simple

exportinterface IPath {
  fullPath: stringshortPosixPath: string
}