Link to Source Code https://github.com/akando42/nextjs-firebase-upload

Client Side Code

async uploadListingPhoto(event){
		var selectedFiles = event.target.files
		
		var selectedFile = selectedFiles[0]
		var timeStamp = selectedFile.lastModifiedDate
		var fileSize = selectedFile.size
		var fileType = selectedFile.type

		var fileData = new FormData();
		fileData.append("Timestamp", timeStamp)
		fileData.append("Filename", `${this.state.newListingAddress}, ${this.state.newListingCity}`)
		fileData.append("Size", fileSize)
		fileData.append("Type", fileType)
		fileData.append("File", selectedFile)

		await axios.put('/api/upload',fileData)
			.then((res) => {
				console.log("Google Cloud File ",res.data.data)
				this.setState({
					newListingPhoto: res.data.data.mediaLink,
					newListingHasPhoto: true
				})
			}).catch((error) => {
				console.log(error)
			})
}

Server Side Code

let form = new formidable.IncomingForm()
form.keepExtensions = true;
form.options.maxFileSize = 10000 * 1024 * 1024;

let fileName, fileListingName, fileSize, timeStamp, type

form.parse(req, async function(err, fields, file){
	if(err){
		res.status(400).json({
			success: false, 
			message: `ERROR parsing FORM \n ${err}`
		})
	}

	fileName = file.File.originalFilename
	fileSize = file.File.size
	timeStamp = fields.Timestamp
	fileListingName = fields.Filename
	type = fields.Type

	
	const options = {
    	destination: `${fileListingName}.png`
  	};

	let [response] = await storage.bucket(bucketName).upload(file.File.filepath, options)
	console.log("GOOGLE STORAGE ", response.metadata)
	
	res.status(200).json({
		success: true, 
		data: response.metadata
	})
})