2

I am working on an app that has web and mobile ui components. We are using evaporate.js to call an endpoint that will return a pre-signed url for chunk uploading to aws buckets. This concept works when used from react and it sends the to_sign querystring parameter to create the pre-signed url. For some reason, when this code is run from react native the to_sign query string value is not getting passed to the endpoint. What could possibly block the to_sign parameter from getting passed from evaporate, this same code is working for react app? Here is the code we are calling from react native:

const uploader = Evaporate.create({
    signerUrl: config.SIGNER_URL,
    aws_key: config.AWS_KEY,
    bucket: config.BUCKET,
    awsRegion: config.AWS_REGION,
    cloudfront: true,
    xhrWithCredentials: true,
    computeContentMd5: true,
    cryptoMd5Method: (d) => btoa(sparkMD5.ArrayBuffer.hash(d, true)),
    cryptoHexEncodedHash256: sha256,
  });

  const uploadFile = (file, cb) => {
    setLoading(true);
    setUploadingError("");
    let newName = uuidv4();
    let extension = file.name.split(".");

    uploader
      .then((evaporate) => {
        evaporate
          .add({
            file,
            name: newName + "." + extension[2],
          })
          .then((res, err) => {
            if (res) {
              cb(res);
              setLoading(false);
            } else if (err) {
              setUploadingError("Something went wrong");
              setLoading(false);
            }
          });
      })
      .catch((err) => {
        setUploadingError("Something went wrong");
        setLoading(false);
      });
  };

Not sure if this is a reach, but the mobile version does not supply a url for CORS as opposed to the url set on the CORS s3 admin screen, so could this possibly be a CORS issue?

user1790300
  • 2,143
  • 10
  • 54
  • 123
  • 1
    Where should the `to_sign` query parameter come from? It isn't listed in the docs: https://github.com/TTLabs/EvaporateJS/wiki/Evaporate.create() – MaartenDev Jun 20 '21 at 17:37
  • From what I can see when Evaporate.create promise is called, for my web version, internally, it is sending it when it calls the signerUrl to get the pre-signed url. I can see it getting passed to my endpoint that is generating the pre-signed url. – user1790300 Jun 20 '21 at 17:54
  • Which version of `Evaporate` are you using? You can get the exact version in `package.json` or `package-lock.json` – MaartenDev Jun 20 '21 at 18:05
  • "evaporate": "^2.1.4" – user1790300 Jun 20 '21 at 18:12
  • The web and mobile versions are using the same version. – user1790300 Jun 20 '21 at 18:12
  • I am getting the to_sign qs parameter for the pre-signed url endpoint from the web but not the mobile versions. – user1790300 Jun 20 '21 at 18:14
  • Wait so it creates a signed url to upload to S3, how do you known the `to_sign` parameter is missing if it's send to s3? – MaartenDev Jun 20 '21 at 18:24
  • The logic seems to get triggerd when you invoke `.add`: https://github.com/TTLabs/EvaporateJS/blob/2.1.4/evaporate.js#L1865 – MaartenDev Jun 20 '21 at 18:32
  • My endpoint will create the pre-signed url. Evaporate will call my endpoint and pass it the to_sign qs parameter. Evaporate does not create the pre-signed url on its own. – user1790300 Jun 21 '21 at 01:04

1 Answers1

1

I doubt this is because the btoa not work in react-native. Because react-native
use a different js engine with the browser. Some js code is executable in the browser but not in rn. Try to implement btoa by yourself.

There is a similar question React Native atob() / btoa() not working without remote JS debugging

gwl002
  • 654
  • 4
  • 10