[React] firebase storage 파일 업로드

https://developer-talk.tistory.com/567

[React]파일 업로드 구현

https://forum.ionicframework.com/t/firebase-storage-unauthorized-due-to-storage-rule/191471

Firebase storage/unauthorized due to Storage Rule

/**

     * 파일 업로드  

     */

    const handleChange = (event) => {

        setFile(event.target.files[0]);

    }

    const handleUpload = () => {

            if (!file) {

                alert("Please upload an image first!");

                }

           

                    const storageRef = ref(storage, `/manmul/${file.name}`);

           

                // progress can be paused and resumed. It also exposes progress updates.

                // Receives the storage reference and the file to upload.

                    const uploadTask = uploadBytesResumable(storageRef, file);

           

                    uploadTask.on(

                        "state_changed",

                    (snapshot) => {

                        const percent = Math.round(

                            (snapshot.bytesTransferred / snapshot.totalBytes) * 100

                        );

           

                        // update progress

                        setPercent(percent);

                    },

                        (err) => console.log(err),

                            () => {

                            // download url

                            getDownloadURL(uploadTask.snapshot.ref).then((url) => {

                            console.log(url);

                            });

                        }

                    );

                };

 

 

 

                <input type="file" onChange={handleChange} accept="/image/*" />

                <button onClick={handleUpload}>Upload to Firebase</button><br/>