Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

176
Views
Firestore upload 2 images

Hello I would like to upload 2 images as jpg, but I can't get the format correct, and it would only upload one picture.


  const [badge, onBadgeChange] = useState('/');
  const [image, setImage] = useState('/');


  const addCompetition = async() =>{
    await handleImageUpload()
   
}


  const handleImageUpload = async() =>{
    const imagebanner = ref(storage, 'images/'+ title+'banner'+ Timestamp.fromDate(new Date()) + ".jpg" )
    const imagebadge = ref(storage, 'images/'+ title+'badge'+ Timestamp.fromDate(new Date()) + ".jpg" )
    
    const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(xhr.response);
        };
        xhr.onerror = function (e) {
          console.log(e);
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", image, true);
        xhr.send(null);
    });





      await uploadBytes(imagebanner, blob).then((snapshot) => {
        getDownloadURL(snapshot.ref).then((url) => {
            console.log(url)
            createCompetition({ title: title,
              description:description,
              venue:venue,
              age:age,
              gender:gender,
              rank:rank,
              date:date,
              dateCreated : Timestamp.fromDate(new Date()),
              maxplayers:maxplayers,
              hole:hole,
              badge:badge,
              image:image})
        })
        .catch((error) => console.log(error))
    })
    .catch((error) => console.log(error))
    // We're done with the blob, close and release it
    blob.close();
    navigation.pop();
    }



  

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  const pickImage2 = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      onBadgeChange(result.uri);
    }
  };

This code above works for one image but I can't get it to also upload imagebadge, I am new to firebase so I have tried xhr.open("GET", {image, badge}, true) but that only made the one image that did upload to an octet image and not jpg anymore.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!