Upload

uploadBytesResumable

const handleUpload = async (data) => {
		const storageRef = ref(storage, `user/${user.uid}/${data.name}`);
		const uploadTask = uploadBytesResumable(storageRef, data);

		uploadTask.on('state_changed',
			(snapshot) => {
				const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
				console.log('Upload is ' + progress + '% done');
				if (progress !== 100)
					setLoading(progress)
				else {
					onClose()
					setLoading(false)
				}
			},
			(error) => {
				console.log(error.message)
			},
			() => {
				getDownloadURL(uploadTask.snapshot.ref)
					.then((downloadURL) => {
						console.log('File available at', downloadURL);
						const updateData = {
							...data,
							image_url: downloadURL,
							
						}
						setData(updateData)
						return updateData
					})
					.then((data) => {
						const ref = doc(db, `courses/${id}/lesson`, lessonId);
						setDoc(ref, data, { merge: true });
					}
					);
			})

	}

<Input type='file' onChange={(e) => handleUpload(e.target.files[0])} />
<Text>{loading}%</Text>