How to decode FILE LiST isBase64Encoded event.body?

Support
,
1

Hi, so I’m working with this image-upload using storybloks aws, I’m trying to build a plugin that will help me upload an image to the storyblok using netlify serverless functions.

I’m using FETCH API to send a POST request with INPUT FILE, FILE LIST params, but when it arrives on the netlify functions is it base64 encoded, I tried to decode it using Buffer and the result was this

image
image948×367 21.1 KB

public/index.html codes below

let form = new FormData();
uploadBtn.addEventListener('submit', function(e) {
  e.preventDefault();

  const inputFile = document.getElementById('file-upload');
  form.append('file', inputFile.files)

  fetch('/.netlify/functions/image-upload', {
    method: 'POST',          
    body: form
  },
  {
    headers: {
      'content-type': 'application/octet-stream'
    },
  })
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data);
  })
})

netlify/functions/image-upload.js codes below

const axios = require('axios')
const FormData = require('form-data')
const fs = require('fs')
const Buffer = require('buffer/').Buffer

exports.handler = function (event, contenxt) {
  let body = event.body;
  let base64toString = Buffer.from(body, "base64").toString();
  console.log(base64toString);

  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Allow-Methods": "GET, POST, OPTION",
    },
  };
}

How can I decode this base64? or is there a better way to get the FILE LIST I sent using FETCH API from the browser directly (public/index.html), I’m sorry if this all sounds stupid, I’m really new to this serverless function lambda etc etc, I’m learning all by myself please be kind, thanks!

2

Hey @eggmaster ,

You can take a look at this: