CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Bruce Mathers
Bruce Mathers

Reputation: 681

trigger a function to run before running the function that's called

I have 3 functions. One takes picture, one compresses image, one uploads an image.

Button is pressed to take picture (this works fine) Another button is pressed to upload picture but first it runs the compress image and then uploads it but I'm hitting error of ReadableNativeMap cannot be cast to java.lang.String which does help me much. Am I not passing the values correctly?

//Take picture
  const takePicture = async () => {
    if (cameraRef.current) {
      const options = { quality: 1, base64: true, skipProcessing: true };
      const result = await cameraRef.current.takePictureAsync(options);
      setImageResult(result.uri);
    }
  };

  //compression image
  const compressimagestuff = async (uncompressedImage) => {
    const manipResult = ImageManipulator.manipulateAsync(
        uncompressedImage,
        { compress: 0.3, format: ImageManipulator.SaveFormat.JPEG }
      );
    return manipResult.url;
  };


  // uploading it to firebase
  const uploadImageAsync = async (uncompressedImage) => {
    let compressedImageUrl = compressimagestuff(uncompressedImage);
    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', compressedImageUrl, true);
      xhr.send(null);
        
    });

    const ref = firebase
      .storage()
      // the file that it will get saved to
      .ref('Front/')
      // giving it a unique name
      .child(await uuid.v4())
    const snapshot = await ref.put(blob);
    blob.close();
    return await snapshot.ref.getDownloadURL();
  };

Button that is called to upload the picture taken

  const uploadPreviewButton = () => (
    <TouchableOpacity disabled={wasPressed} onPress={() => { uploadImageAsync(imageResult); setWasPressed(true); }} style={[styles.uploadButton, wasPressed ? { backgroundColor: 'red'} : {} ]}>
        <Icon ...>
    </TouchableOpacity>
  );

Upvotes: 3

Views: 55

Answers (1)

Sam R.
Sam R.

Reputation: 16450

compressimagestuff is an async function but you don't wait for it. Change this:

const uploadImageAsync = async (uncompressedImage) => {
    let compressedImageUrl = compressimagestuff(uncompressedImage);

to:

const uploadImageAsync = async (uncompressedImage) => {
    let compressedImageUrl = await compressimagestuff(uncompressedImage);
                          // ^

Upvotes: 2

Related Questions