SyntaxError: await is only valid in async functions and the top level bodies of modules

[pallid grove]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fair dust]

can someone please help what im doing wrong?

[fair skiff]

can you show the code where you using the handler function?

[fair dust]

import { useState } from "react";
import { handler } from "./action";

export function Form() {
  const [file, setFile] = useState<File | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) setFile(file);
  };
  async function handleSubmit() {
    if (!file) return;

    const form = new FormData();

    form.append("fileUpload", file);
    await handler(form);
  }

  return (
    <>
      <form>
        <input
          name="file"
          type="file"
          accept="image/png, image/jpeg"
          onChange={handleFileChange}
        />
      </form>
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

[fair skiff]

try

async function handler(formData: FormData) {
  console.log(formData.get("fileUpload"));
  const upload = new Upload({
    client: new S3Client({}),
    params: {
      Key: crypto.randomUUID(),
      Bucket: Bucket.bucket.bucketName,
      Body: formData.get("fileUpload")!,
      // ContentType: formData.get("file"),
      ACL: "public-read",
    },
  });

  upload.on("httpUploadProgress", (progress) => {
    console.log(progress);
    1;
  });

  await upload.done();
}

[fair dust]

doesnt work

complete error is this SyntaxError: await is only valid in async functions and the top level bodies of modules at __webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42) at eval (./src/app/action.ts:11:73) at (action-browser)/./src/app/action.ts (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/app/page.js:356:1) at Function.__webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42)

but its clearly async

[fair skiff]

try to pass the handler function from server component to the Form component

the Form component can still use the import one

[hybrid ginkgo]

@fair skiff how do I do that?