List files

const listRef = ref(storage, 'files');
listAll(listRef)
	.then((res) => {
		// All the prefixes under listRef, You may call listAll() recursively on them.
		res.prefixes.forEach((folderRef) => {
			console.log('folder: ' + folderRef.fullPath)
		});

		// All the items under listRef.
		res.items.forEach((itemRef) => {
			console.log('file: ' + itemRef.fullPath)
		});
	}).catch((error) => {
		// Uh-oh, an error occurred!
	});

Loading slide...

List files

const listRef = ref(storage, 'files');
listAll(listRef)
	.then((res) => {
		// All the prefixes under listRef, You may call listAll() recursively on them.
		res.prefixes.forEach((folderRef) => {
			console.log('folder: ' + folderRef.fullPath)
		});

		// All the items under listRef.
		res.items.forEach((itemRef) => {
			console.log('file: ' + itemRef.fullPath)
		});
	}).catch((error) => {
		// Uh-oh, an error occurred!
	});

Upload file

const addFileForm = document.querySelector(".addFile")
addFileForm.addEventListener('submit', e => {
    e.preventDefault()

    const file = addFileForm.file.files[0]
    const metadata = { contentType: file.type }; // 'image/png'
      
    // Upload file and metadata to the object 'images/mountains.jpg'
    const photoRef = ref(storage, `/files/${file.name}`) //const filesRef = photoRef.parent ref by another ref
    const uploadTask = uploadBytesResumable(photoRef, file, metadata);
      
    // Start upload task and listen for state changes, errors, and completion of the upload (try/catch/finally).
    uploadTask.on('state_changed',progresshandler, errorhandler, completeHandler);
})

const progressHandler =(snapshot) => {
	// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
	const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
	console.log('Upload is ' + progress + '% done');
	switch (snapshot.state) {
		case 'paused':
			console.log('Upload is paused'); // call uploadTask.pause()
			break;
		case 'running':
			console.log('Upload is running'); // call uploadTask.resume()
			break;
    	}
	}

const errorHandler = (error) => {
	// A full list of error codes is available at
	// https://firebase.google.com/docs/storage/web/handle-errors
	switch (error.code) {
		case 'storage/unauthorized':
        	// User doesn't have permission to access the object
		break;
		case 'storage/canceled':
        	// User canceled the upload by call uploadTask.caancel()
		break;
      
		// ...
      
		case 'storage/unknown':
        	// Unknown error occurred, inspect error.serverResponse
		break;
	}
}