Streamed file size is 5-6 times bigger than the original size

I am using apollo-upload-server with graphql-nodejs boilerplate template, and apollo-upload-client implementation with react native (expo).

While uploading the files from filesystem, the filesize on the server is at least 5-6 times the size in the local system. I do not know what is the exact cause of the issue. Here are the steps to reproduce:

In Expo, I am returning the local uri from ImagePicker and creating a file to upload: const picture = new ReactNativeFile({ uri: returnedURI, type: 'image/jpg', name: 'somename.jpg', });

and then running a mutation as follows:

<Mutation mutation={uploadFileMutation}>
                {uploadFile => (
                  <Button
                    styleName="clear"
                    style={{ flex: 1 }}
                    onPress={() => {
                      uploadFile({
                        variables: {
                          picture,
                        },
                      });
                    }}
                  >
                  </Button>
                )}
              </Mutation>

On the server-side, upload is processed as follows:

const processUpload = async upload => {
  const { stream, filename } = await upload
  const { id, path } = await storeUpload({ stream, filename })
  return path
}

const storeUpload = async ({ stream, filename }) => {
  const id = nanoid()
  const path = somepath

  return new Promise((resolve, reject) =>
    stream
      .pipe(createWriteStream(path))
      .on('finish', () => resolve({ id, path }))
      .on('error', reject),
  )
}

const file = {
    async uploadFile(parent, { picture }, ctx, info) {
      const resolvedURL = await processUpload(picture)
      const url = `http://localhost:4000/${resolvedURL}`
      return ctx.db.mutation.createFile(
        {
          data: {
            url,
          },
        },
        info
      )
    },
}

Here are two images for comparison - one from the filesystem, and second uploaded one

From filesystem- Size: 45kb Uploaded copy - Size: 257kb

[riccardonucleare]

Hi, We are experiencing a similar issue when uploading an image JPG with iOS with apollo-upload-client. The image is taken from the gallery (original size is around 2.4 MB) and we compress it to around 500 kB. We upload it to server with a mutation where we use graphql-upload with middleware graphqlUploadExpress using ReactNativeFile. However, when we check the image on S3, the image is 2 MB. We tried with several images and the result is similar: uploaded image is bigger than the compressed one. We tried to upload the image without the middleware using a plain POST request and in this case, the image was uploaded with the expected size (500 kB). Interesting that we do not have the same problem with Android using the same code. Any suggestion for debugging it? @mike-marcacci

[mike-marcacci]

Hmm, are the final uploaded images corrupt? This tool obviously doesn’t do any image transformation, so if the resulting upload is correctly formatted it’s simply uploading the bytes it’s being sent. Using your same server, try uploading an image with a GraphQL client that supports uploads (like altair). If you see the same behavior there, than this is something we should investigate further; otherwise, though, something in the OS or Expo are simply sending a different (less compressed, etc) set of bytes than you are expecting.