Cloudflare Developers•7mo ago

Issue with FormData Methods in Cloudflare Workers

I am currently developing an API using Cloudflare Workers and have encountered a technical issue with handling FormData objects. Specifically, I am unable to use the form.getBuffer() and form.getBoundary() methods as they are seemingly not recognized as functions. Here is the relevant part of my code:

const form = new FormData();
form.append("manifest", JSON.stringify(manifest), {
  contentType: "application/json",
  header: {
    "content-type": "application/json; charset=utf-8",
    ...(signature ? { "expo-signature": signature } : {}),
  },
});
form.append("extensions", JSON.stringify({ assetRequestHeaders }), {
  contentType: "application/json",
});

return c.newResponse(form.getBuffer(), {
  status: 200,
  headers: {
    "expo-protocol-version": protocolVersion.toString(),
    "expo-sfv-version": "0",
    "cache-control": "private, max-age=0",
    "content-type": `multipart/mixed; boundary=${form.getBoundary()}`,
  },
});

const form = new FormData();
form.append("manifest", JSON.stringify(manifest), {
  contentType: "application/json",
  header: {
    "content-type": "application/json; charset=utf-8",
    ...(signature ? { "expo-signature": signature } : {}),
  },
});
form.append("extensions", JSON.stringify({ assetRequestHeaders }), {
  contentType: "application/json",
});

return c.newResponse(form.getBuffer(), {
  status: 200,
  headers: {
    "expo-protocol-version": protocolVersion.toString(),
    "expo-sfv-version": "0",
    "cache-control": "private, max-age=0",
    "content-type": `multipart/mixed; boundary=${form.getBoundary()}`,
  },
});

Upon attempting to execute this, I receive the following errors: - TypeError: form.getBuffer is not a function - TypeError: form.getBoundary is not a function Could you please advise on how to correctly implement these methods, or suggest an alternative approach to handle multipart/form-data in Cloudflare Workers? Your guidance on how to properly structure this type of request would be greatly appreciated. Thank you for your assistance. Best regards,

2 Replies

Evil Morty•7mo ago

what is ur wrangler.toml

songhoyunOP•7mo ago

My setup is shown below.

name = "cashplan-app-updates"
compatibility_date = "2023-12-01"
compatibility_flags = [ "nodejs_compat" ]

# [vars]
# MY_VAR = "my-variable"

# [[kv_namespaces]]
# binding = "MY_KV_NAMESPACE"
# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

[[r2_buckets]]
binding = "R2"
bucket_name = "cashplan-app-updates"
preview_bucket_name = "preview-cashplan-app-updates"

# [[d1_databases]]
# binding = "DB"
# database_name = "my-database"
# database_id = ""

# [ai]
# binding = "AI"

name = "cashplan-app-updates"
compatibility_date = "2023-12-01"
compatibility_flags = [ "nodejs_compat" ]

# [vars]
# MY_VAR = "my-variable"

# [[kv_namespaces]]
# binding = "MY_KV_NAMESPACE"
# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

[[r2_buckets]]
binding = "R2"
bucket_name = "cashplan-app-updates"
preview_bucket_name = "preview-cashplan-app-updates"

# [[d1_databases]]
# binding = "DB"
# database_name = "my-database"
# database_id = ""

# [ai]
# binding = "AI"

I cannot directly pass FormData as the first parameter to c.newResponse. The TypeScript error indicates there's no overload that matches this call. The errors are as follows: 1. For the overload (data: Data | null, status?: StatusCode | undefined, headers?: HeaderRecord | undefined): Response, the error states: - Argument of type 'FormData' is not assignable to parameter of type 'Data | null'. - The type 'FormData' is missing several properties required by the type 'ReadableStream<any>', such as 'locked', 'cancel', 'getReader', 'pipeThrough', and three more properties. 2. For the overload (data: Data | null, init?: ResponseInit | undefined): Response, the same type mismatch issue arises, where 'FormData' is not considered assignable to 'Data | null'. Here is the NewResponse interface declaration for clarity:

interface NewResponse {
    (data: Data | null, status?: StatusCode, headers?: HeaderRecord): Response;
    (data: Data | null, init?: ResponseInit): Response;
}

interface NewResponse {
    (data: Data | null, status?: StatusCode, headers?: HeaderRecord): Response;
    (data: Data | null, init?: ResponseInit): Response;
}

Gaming

Programming

Issue with FormData Methods in Cloudflare Workers