Base64 string different on production than development

blushbasics · February 16, 2022, 6:55pm

Site name: blushbasics.netlify.app
Framework: remix

We’ve created a form on the front-end that accepts a file upload. We’re using Mailjet to send an email with the file as an attachment on the server-side. Attachments are required to be base64 encoded (using fs.readFileSync(file.filepath, "base64") to encode the file).

In development, the attachment works perfectly in the email. In production (on Netlify), I still get an attachment in the email, but it’s broken.

The development base64 string (first line) looks like this:
9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYn

The production base64 string (first line) looks like this:
77+977+977+977+9AEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMc

Could anyone point me in the right direction on what’s happening on the Netlify side of things not happening on the development side?

hrishikesh · February 19, 2022, 5:09pm

Hey @blushbasics,

My answer would depend on how you’re sending the file to the function. Because…

So chances are, in production, the event body is already coming out as base64 encoded.

In the past, there was an issue where the CLI was not encoding the body as base64:

github.com/netlify/cli

Functions event.isbase64Encoded discrepancy in CLI vs Production

opened 05:16PM - 09 Sep 21 UTC

closed 03:46PM - 15 Nov 21 UTC

Hrishikesh-K

type: bug area: functions

**Describe the bug:** The production server encodes the function's `event.bod…y` to `base64` except for a few content-types as mentioned here: https://answers.netlify.com/t/changed-behavior-in-function-body-encoding/19000. When submitting a file using a (non-Netlify) form to a Netlify Function, we have to use `multipart/form-data` content-type which is encoded according to the above post. Thus, we need to decode it as: ```js Buffer.from(event.body, 'base64').toString('utf8') ``` However, when doing the same in CLI, the body is not encoded and available easily as `event.body`. It can easily be worked around like: ```js if (event.isbase64Encoded) { Buffer.from(event.body, 'base64').toString('utf8') } else { event.body } ``` But, it leads to confusion. **To reproduce:** Steps to reproduce the behavior: 1. Clone this commit: https://github.com/Hrishikesh-K/formFile/tree/1f7d002c18eff4830614d6d405d84cee4dd106e8. 2. Navigate to the cloned repository. 3. Run `netlify dev`. 4. Try to submit the form with any random file and log `event.body`. Then, log the same in production environment. **Configuration:** `netlify.toml`: ```toml [build] command = "echo Hi!" publish = "dist" [functions] directory = "functions" node_bundler = "esbuild" ``` System info: ```bash System: OS: macOS 11.5.2 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 746.86 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.9.0 - /usr/local/bin/node npm: 7.21.1 - /usr/local/bin/npm ``` **Expected behaviour:** The CLI should encode `event.body` to `base64`. **Additional context:** Slack discussion (INTERNAL ONLY): https://netlify.slack.com/archives/C023PC3D08J/p1631194079008400

which has since been fixed. But any additional details would let us confirm.

blushbasics · February 19, 2022, 9:16pm

Thanks, @hrishikesh for getting back to me.

Okay, I did see the body is coming out as base64 encoded. I tried working with it but it seems like the file upload still gets corrupted for whatever reason.

While waiting for a response I reached out on the Remix Netlify Discord channel and it appears that they’re looking into it (Discord).