Workers KV multiple image upload - Custom formData parser - Tutorial

KV multiple image upload - Tutorial

GET

The get should be done with KV bindings (Fast, 30 ms), in arrayBuffer mode

const value = await KV.get(k, 'arrayBuffer');

PUT

You have 2 possibilities :

  • Use the KV API to put the file in KV (Extremely slow, 1.25 s)
  • Use a formData parser to get the file, then use the KV bindings to put the file in KV (Relatively fast, 50-60 ms)

Problem : Response.formData() does not work

Unfortunately, handling multipart/form-data with binary files like images by using response.formData() does not work in CloudFlare Workers. The response goes through a utf-8 transformation which corrupts the files and make them unreadable. In addition, you lose the filename information, which sometimes is important.

Solution : Custom formData parser

I wrote a custom formData parser in JavaScript to do the job. It does not respect the standard API, but it does the job roughtly. It handles binary files like images, text and json files, and simple form values, even those on multiple lines. That should be enough for most usages. Feel free to alter to match your needs.

Try to copy / paste this JS code snippet in your Chrome console:

const main = async () => {
  const o = {};
  const o2 = {};
  const body = new FormData();
  o['50'] = 'data:image/webp;base64,UklGRlIFAABXRUJQVlA4IEYFAABQFQCdASoyAEsAPm00k0ekIyGhKBM7uIANiUAYP/E47JItebRUci3F6WNuxzqDNRcX/tDNVx79R2oi5iO83GSwtvS2WD6Bnz2+ODh34MAr9LxRRyWtOohZTGCza2fg8hcMAupIMZFRya5Y5SxM/oHw2ru86zpogeNUnSnxSo+zCLDLAt/pdPzrJD6E+pqwUUgucIQH7GGEJ5SBBi4qBoNvHaTKRacqewuLQUe5FQLWJHuAAAD+6Zb5OwaddpMri4OFtes/WvWfyLjN9Qbs3jrGT3MN4n4XAbnfwxPnr3Pb/qVSTRKhv9/f2VsPYTKQM//0Vl9d9tP98L+anGlXQAQ3qY6ZgkF2ZOug/WzSo0E9pEMudHwl/ZbJHWin04CCt0w4CTv4LnKBwt4pgWBfSbVhXvSB3bRFmSjNx5/9zDsAT2Yqfg1Ej2loJbdE1kWvYTS3BVKu3v8QWmd165fF3y5irwahactojWUcBJpH/XWfCxIQIGmVlhaq8YyUEMRBcBtcGTFXvzedJPMHb5EtxAYKs5zmV7RB0PYuIo2OAADq138R+SIcWNKE/jeHR7/8zZHwY/xOp/o0cLYsIaGeBnyAIu/2xzGa4Py1amVSIgYXyx4M4B1Ayp8f0GiUTMuMY0LWyPXckGTx8Vw2mGDAP923mFg/csGg/YC3RJ4pcH0lFR66DKRTFsIZYP2SylCOy3HSBXpSE5Bfqot+8SVrBE/RztjSKOxAQj6shwJ7L1Vzc28P2XhZNwikHIiZPxrOTi/w2V4/060iyoEnS+yzGL5CqDYwdjGXW/4r4pqC2wvfM7eS3UYQteQwdHjAQMTLBEDHJbFz/X5hN5he+drNy8+OuyS+ohKnwaADuW6nVrzDAsjFrunm3leKWHpBW8Hueto1OSRHMVOX/CDZGfNSoPHHuPxxeDy7jHnBGICmqLBB3wd/2lM4ytiVtZFTTgeLhuMk+5n1FIj4WjZocRR2/vKRa84xqy178t0NqHuMRCzaJ280aDpYxvI7924uLt8xx6zxB3BVdCkUc80laqT9h/zJeMNZvcl7rbkDC7aKgwp7N6uN8HDD5ZFMgMDYTvyd+3BaQQ06q4GhDIIW1yRJu/7YeLd2QfAehniYuESI1+06uLouzLCDSUtPRSpTlEkAVDsjWDbnGdz56+kMMmf+TLV0gn7/VJ/1cJi010IsakalaKFYOsJz+iYVrOB2dLHEbBbzZKnY48uMiF/MZjR/2WZ0t6fvo/WGOe/x9fwJP+YDSe/pJwfLBZ/ezri+nDmbOaxNkyKunyo5gGzBV3wLNsxnU774eXfzFn9kTsuK+yD0CEdIIBmdq7ZxOfLnHFTfElSqRd/RHzw8j6XVWjl7EVF4yNbrtksNE9OD3pXijW/qzf4rgWLdVoYRZsZzCMYu/Ixe6zAgeGVfyT3AyvPG/U3x7ebntr4/5yPiG+tptQyWm4H3Wll6Qmlc+ZNXUEk/u9b4WudYwEG3Zs1Ki66YtZ64L6zM9NcpRODsYslzHjmibGkWK7KxUOXmh3r+Y4srhwCBpFdVbEFHEg8x/4AZnJyU8zqSZu104Ilsn+9N5UbUYGYGdFFfFP0NiLo0Keuei4qL1q4G2RbYplYj10dXzi7FWGRNCr56Z9xaEPBLRCPEwj/svxhQSxD79yZ1vdLE4HQvHaLv4L0FjuOwFCFvZ31f/ZE1XTLVg2tgM12CqqD8I+TCvcHea3JOgGMggxUyR2L1/Hzt2yiWjNGUs3nw2CK6TdbZPVmHRE2C5W+NbQBUfR40Tty7bmupuzufkMTt0ACSRGbAAAA=';
  o['100'] = 'data:image/webp;base64,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';
  o['test.txt'] = 'data:text/plain;base64,YWFh'; //contains : 'aaa'
  o['test.json'] = 'data:application/json;base64,eyJKb2huIjoiRG9lIn0='; //contains : '{"John":"Doe"}'
  for (const k in o) { body.append(k, await (await fetch(o[k])).blob(), k); }
  o2['1'] = JSON.stringify({ name: 'Alice' });
  o2['2'] = JSON.stringify({ name: 'Bob' });
  o2['x'] = 'yyy';
  o2['u'] = "v\nv2";
  for (const k in o2) { body.append(k, o2[k]); }
  const res = new Response(body);
  //console.log(JSON.stringify(Object.fromEntries(res.headers)));
  //console.log(await res.clone().text());
  const event = { request: res, response: res }; // Fake event, fake request
  console.time('formData');
  const fd = await formData(event); // Returns an array [{name,value,filename,content-type}]
  console.timeEnd('formData');
  console.log(fd);
  if (!fd) { return; }
  const z = fd[1];
  const blob = new Blob([new Uint8Array(z.value, 0, z.value.byteLength)]);
  //const blob = new Blob(z.value);
  const url = URL.createObjectURL(blob);
  document.querySelector('body').insertAdjacentHTML('beforeend', `<img src='${url}' width=50>`);
  //URL.revokeObjectURL(url);
}
main();

const formData = async (event) => {
  // content-type headers must be valid and offer a boundary
  const boundary = await getBoundary(event);
  if (!boundary) { return null; }
  // Payload size must be under 1000kB
  const ab = await event.request.arrayBuffer();
  const max = ab.byteLength;
  if (!await lessThan1000kB(max)) { return null; }
  // Start to parse
  const t = new TextDecoder();
  const fd = Array();
  let o = Object();
  let i = 0;
  //console.log({ ab, i, max });
  while (i < max) {
    i = await getPart(ab, i, max, boundary, t, o);
    if (!o || !o.name) { break; }
    fd.push(o);
    o = Object();
  }
  return fd;
}

const lessThan1000kB = async (max) => {
  if (Math.ceil(max / 1000) > 1000) { return false; }
  return true;
}

const getBoundary = async (event) => {
  const ct = event.request.headers.get('content-type');
  return `--${(ct.match(/^multipart\/form\-data; boundary=(.+)$/))?.[1]}`;
}

const getPart = async (ab, start, max, boundary, t, o) => {
  let s = '';
  let i = start;
  //console.log('A');
  i = await readString(boundary, i, ab, t, max);
  if (i === max) { return max; }
  //console.log('B');
  if (await eof(i, ab, t, max)) { return max; }
  if (i === max) { return max; }
  //console.log('C');
  i = await readNewLine(i, ab, t, max);
  if (i === max) { return max; }
  //console.log('D');
  i = await readString('Content-Disposition: form-data; name="', i, ab, t, max);
  if (i === max) { return max; }
  //console.log('E');
  i = await captureUntil(['"'], i, ab, t, max, o, 'name');
  if (i === max) { return max; }
  //console.log('F');
  if (!o.name) { o = null; return max; }
  if (i === max) { return max; }
  //console.log('G');
  let x;
  if ((x = await readValue("\"\n\n", boundary, i, ab, t, max, o))) { return x; }
  if ((x = await readValue("\"\r\n\r\n", boundary, i, ab, t, max, o))) { return x; }
  return readFile(boundary, i, ab, t, max, o);
}

// Depending on carriage return prefix,
// Try to read a simple value (implicit text/plain)
const readValue = async (s, boundary, i, ab, t, max, o) => {
  if (!await checkString(s, i, ab, t, max)) { return false; }
  //console.log('I');
  i = await readString(s, i, ab, t, max);
  //console.log('I2');
  i = await captureUntil([/*`${"\r\n"}${boundary}`, */`${"\n"}${boundary}`], i, ab, t, max, o, 'value');
  //console.log('I3');
  i -= boundary.length - 1;
  return i;
}

// Read a file, like text, json or images
const readFile = async (boundary, i, ab, t, max, o) => {
  //console.log('J');
  i = await readString('"; filename="', i, ab, t, max);
  if (i === max) { return max; }
  //console.log('K');
  i = await captureUntil(['"'], i, ab, t, max, o, 'filename');
  if (i === max) { return max; }
  //console.log('L');
  i = await readString('"', i, ab, t, max);
  i = await readNewLine(i, ab, t, max);
  if (i === max) { return max; }
  //console.log('M');
  i = await readString('Content-Type: ', i, ab, t, max);
  if (i === max) { return max; }
  //console.log('N');
  i = await captureUntil(["\r", "\n"], i, ab, t, max, o, 'content-type');
  if (i === max) { return max; }
  //console.log('O');
  if (!o['content-type']) { o = null; return max; }
  if (i === max) { return max; }
  //console.log('P');
  i = await readNewLine(i, ab, t, max);
  if (i === max) { return max; }
  //console.log('Q');
  i = await readNewLine(i, ab, t, max);
  if (i === max) { return max; }
  //console.log('R');
  i = await captureUntil([`${"\r\n"}${boundary}`, `${"\n"}${boundary}`], i, ab, t, max, o, 'value', o['content-type']);
  if (i === max) { return max; }
  //console.log('S');
  i -= boundary.length - 1;
  return i;
}

const charAt = async (i, ab, t) => {
  return t.decode(ab.slice(i, i + 1));
}

// Check if end of file is found
// Meaningful only when used directly after readString(boundary)
const eof = async (i, ab, t, max) => {
  if (i + 1 === max) { return false; }
  const s = t.decode(ab.slice(i, i + 2));
  return s === '--';
}

// Try to read \n
// If \r is found, second chance is given
// If max reached, or if \n not found, return max to stop the machine
const readNewLine = async (i, ab, t, max) => {
  if (await charAt(i, ab, t) === "\r") { if (++i === max) { return max; } }
  if (await charAt(i, ab, t) === "\n") { return ++i; }
  return max;
}

const checkString = async (v, i, ab, t, max) => {
  return readString(v, i, ab, t, max, true)
}

// Try to read v
// If max reached, or if v not found, return max
const readString = async (v, i, ab, t, max, check = false) => {
  const start = i;
  let j = 0;
  const len = v.length;
  while (i < max && j < len) {
    ++i;
    ++j;
  }
  const s = t.decode(ab.slice(start, i));
  //console.log('expected : v :', v);
  //console.log(`${check ? 'check' : 'read '}${'    : s :'}`, s);
  if (s === v) { return check ? true : i; }
  return check ? false : max;
}

// Try to capture, until we get one the values inside a (Ex : \r or \n)
const captureUntil = async (a, i, ab, t, max, o, prop, contentType = 'text/plain') => {
  return readUntil(a, i, ab, t, max, true, o, prop, contentType);
}

// Try to read, until we get one the values inside a (Ex : \r or \n)
const readUntil = async (a, i, ab, t, max, capture = false, o = Object(), prop = '_', contentType = 'text/plain') => {
  const start = i;
  // Until end
  while (i < max) {
    //console.log(i, await charAt(i, ab, t));
    // For each token
    for (const v of a) {
      const end = Math.max(start, i - v.length);
      // Extract ending text, at the size of the token
      const tmp = t.decode(ab.slice(end, i));
      // If extracted ending text not equals to the token, do nothing
      if (tmp !== v) { continue; }
      // Capture data
      if (capture) { await captureData(ab, start, end, t, o, prop, contentType); }
      // Return current position
      --i;
      //console.log('readUntilOut1', i);
      return i;
    }
    // Go to next char
    ++i;
  }
  // console.log('readUntilOut2', i);
  return i;
}

const captureData = async (ab, start, end, t, o, prop, contentType) => {
  //console.log('capture', prop, contentType);
  //console.log(start, end);
  const sub = ab.slice(start, end);
  await captureJson(sub, t, o, prop, contentType);
  await captureTextAsJson(sub, t, o, prop, contentType);
  await captureText(sub, t, o, prop, contentType);
  await captureBlob(sub, o, prop, contentType);
}

const captureJson = async (sub, t, o, prop, contentType) => {
  if (contentType !== 'application/json') { return; }
  let s = t.decode(sub);
  //console.log('captureJson', s);
  o[prop] = JSON.parse(s);
}

const captureTextAsJson = async (sub, t, o, prop, contentType) => {
  const s = t.decode(sub);
  if (contentType !== 'text/plain' || s[0] !== '{') { return; }
  //console.log('captureTextAsJson1');
  let o2;
  //try { o2 = JSON.parse(s); } catch (e) { }
  try { o2 = JSON.parse(s); } catch (e) { }
  if (!o2) { return; }
  o[prop] = o2;
  o['content-type'] = 'application/json';
  //console.log('captureTextAsJson2', s);
}

const captureText = async (sub, t, o, prop, contentType) => {
  //console.log('captureText1', contentType);
  if (contentType !== 'text/plain' ||
    o['content-type'] && o['content-type'] !== 'text/plain') { return; }
  let s = t.decode(sub);
  //console.log('captureText2', s);
  o[prop] = s;
}

const captureBlob = async (sub, o, prop, contentType) => {
  if (contentType === 'text/plain' || contentType === 'application/json') { return; }
  //console.log('captureBlob');
  o[prop] = sub;
}

It should display :

0: {name: "50", filename: "50", content-type: "image/webp", value: ArrayBuffer(1370)}
1: {name: "100", filename: "100", content-type: "image/webp", value: ArrayBuffer(3414)}
2: {name: "test.txt", filename: "test.txt", content-type: "text/plain", value: "aaa"}
3: {name: "test.json", filename: "test.json", content-type: "application/json", value: {…}}
4: {name: "1", value: {…}, content-type: "application/json"}
5: {name: "2", value: {…}, content-type: "application/json"}
6: {name: "x", value: "yyy"}
7: {name: "u", value: "v↵v2"}

… indicating the form data has been successfully parsed, in 39 ms.

Now, with KV bindings you just have to :

  • PUT the value into KV
  • GET the value from KV using the arrayBuffer mode

And voilà ! :grinning:

5 Likes

This post was flagged by the community and is temporarily hidden.