Question 34979 in React native Question posted in
The official React Native documentation can be found here.

trying to update user profile but get error with image I can't update it – React native

I’m trying to update user profile using react native expo I can only update all properties except image is giving me this Error :

[Unhandled promise rejection: FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: undefined (found in field userImg in document users ? please help

const [image, setImage] = useState(null);
  const [uploading,setUploading] = useState(false)
  const [ userData, setUserData] = useState(null);




  useEffect(()=>{

    const getUserData = async ()=>{

      db.collection("users")
      .doc(auth.currentUser?.uid)
      .get()
      .then(snap => {
        
          setUserData(snap.data());
        
      });
    }
    getUserData();
  },[])
 
  const updateProfile = async()=>{
    let imgUrl = await uploadImage();
    if(imgUrl == null && userData.userImg){
      imgUrl = userData.userImg
    }

    db.collection("users")
    .doc(auth.currentUser.uid)
    .update({
      name: userData.name,
      userName: userData.userName,
      email: userData.email,
      phone: userData.phone,
      address: userData.address,
      userImg:userData.mgUrl
      
  })
 }

I can upload the image successfully but I can’t fetch it from storage to fire store

const  uploadImage = async ()=>{
      if(image == null){
        return null;
      }
      const blob = await new Promise((resolve, reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.onload = function (){
           resolve(xhr.response)
        };
        xhr.onerror = function (){
            reject( new TypeError("Network request failed"))

        };
        xhr.responseType = "blob"
        xhr.open("GET",image,true)
        xhr.send(null)
      });
      const ref = firebase.storage().ref().child("images/" + new Date().toISOString())
      const snapshot = ref.put(blob)

      snapshot.on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        ()=>{
            setUploading(true)
        },
        (error)=>{
            setUploading(false)
            console.log(error)
            blob.close();
            return;
        },
        ()=>{
            snapshot.snapshot.ref.getDownloadURL().then((url)=>{
                setUploading(false);
               // Alert.alert('Profile Updated', 'You profile Updated Successfully..!')
                console.log('donwload:', url)
                setUserData(url)
                blob.close()
                return null
            })
        }
      )
   
    
       
    
    
      }

}

so please help me out between I’m using React Native Expo and thank you so much

Tags:

2

Answers


  1. 0

    To start off, the error [Unhandled promise rejection: FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: undefined means that one or more fields has a null value but firebase doesn’t allow you to store that.

    In your uploadImage function you’re able to upload your image fine when the image actually does exist but in cases that it doesn’t you’re returning null which is where the problem is. Ideally, you can return an empty string which is safe then in cases where you read the image you can just check if the string is empty or not.

    Fix

    Step 1

    Change this

     if(image == null){
    return null;
  }

    To this

     if(image == null){
    return "";
  }

    Step 2

    After you get the download URL your setUserData is replacing all the fields with the URL so consider changing it to
    `
    setUserData({…userData, imgUrl : url})

    Step 3

    Also realize that in your update() there is a typo for imgUrl change from
    userImg:userData.mgUrl to userImg:userData.imgUrl to properly set the image using the step for line

    Hope that fixes It 🙂
    `

    Login or Signup to reply.
  2. 0

    Check if below code helps you to upload a Video or Image using firebase.

    const uploadImageToFirestore = async (res, type) => {
        const uri = res.assets[0].uri;
        const filename = uri.substring(uri.lastIndexOf('/') + 1);
        const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;

        const storage = getStorage(app);
        const fileRef = ref(storage, filename);
        const img = await fetch(uploadUri);
        const bytes = await img.blob();
        let metadata;
        if (type == 'video') {
          if (filename.includes("mov") || filename.includes("MOV")) {
            metadata = {
              contentType: 'video/quicktime'
            }
          } else {
            metadata = {
              contentType: 'video/mp4',
            };
          }
          
        } else {
          metadata = {
            contentType: 'image/jpeg',
          };
        }
        
        uploadBytes(fileRef, bytes, metadata).then(async (uploadTask) => {
          console.log('task', uploadTask)
          getDownloadURL(uploadTask.ref).then((url) => {
            if (type == 'video') {
              setVideoData(url);
            } else {
              setImageData(url);
            }
          });
        }).catch((err) => {
          alert('Error while uploading Image!')
          console.log(err);
        });
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search