Want to run server function every time a mutation happens on client side to get presignedUrl ...

Answered

Siricid woodwasp posted this in #help-forum

Siricid woodwaspOP

2024-01-07T16:51:30.000Z

export async function uploadPresignedUrl() {
  const user = await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: (contextSpec) => {
      return fetchAuthSession(contextSpec);
    },
  });

  if (!user) {
    throw new Error("No user");
  }
  const bucket = Bucket.bucket.bucketName;
  const command = new PutObjectCommand({
    Bucket: bucket,
    ACL: "public-read",
    Key: crypto.randomUUID(),
  });
  const client = new S3Client();

  const url = await getSignedUrl(client, command, {
    expiresIn: 60,
  });
  return {
    url,
  };
}

Answered by Ray

if this doesn't work, try import the action to the page where the client component render and pass the action to it

View full answer

40 Replies

Siricid woodwaspOP

2024-01-07T16:53:18.000Z

calling it on client side

export clientcomponent = () => {

const handleUpload = async () => {
    const { url } = await uploadPresignedUrl();
    if (onChange) {
      if (Array.isArray(acceptedFiles)) {
        acceptedFiles.forEach((file) => {
          mutation.mutate({ file, url });
        });
      } else {
        mutation.mutate({ file: acceptedFiles, url });
      }
    }
  }
};

B33fb0n3

2024-01-07T16:53:47.000Z

your await need to be called inside a useEffect if you really want to fetch data clientside.

You can do this like that:

useEffect(() => {
        const fetchData = async () => {
            const data = await getData();
...
        };

        fetchData();
    }, []);

Siricid woodwaspOP

2024-01-07T16:55:24.000Z

yea i did that it it doesnt work

B33fb0n3

2024-01-07T16:55:33.000Z

why not?

Siricid woodwaspOP

2024-01-07T16:56:34.000Z

ok let me try again it was throwing some weird error

B33fb0n3

2024-01-07T16:57:07.000Z

ok ðŸ¤”

Siricid woodwaspOP

2024-01-07T17:00:18.000Z

yea it throws this error SyntaxError: await is only valid in async functions and the top level bodies of modules

B33fb0n3

2024-01-07T17:00:42.000Z

show your code

Siricid woodwaspOP

2024-01-07T17:00:43.000Z

export const UploadFileComponent = () => {
  const [onChange, setOnChange] = useState<File | File[] | null>(null);
  const [progress, setProgress] = useState<Record<string, number>>({});
  const [url, setUrls] = useState<string | null>();

  const onDrop = useCallback((acceptedFiles: File[]) => {
    setOnChange(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
    useDropzone({
      onDrop,
    });

  useEffect(() => {
    (async () => {
      const { url } = await uploadPresignedUrl();
      setUrls(url);
    })();
  }, []);

  const mutation = useMutation({
    mutationKey: ["fileUpload"],
    mutationFn: async ({ file }: { file: File }) => {
      if (!url) {
        throw new Error("No url provided");
      }
      await axios.put(url, file, {
        headers: {
          "Content-Type": file.type,
          "Content-Disposition": `attachment; filename="${file.name}"`,
        },
        onUploadProgress: (progressEvent) => {
          setProgress((prevProgress) => ({
            ...prevProgress,
            [file.name]: Math.round(
              (progressEvent.loaded * 100) / (progressEvent.total ?? 0)
            ),
          }));
        },
      });
      return file;
    },
    onSuccess: (file) => {
      toast(`File ${file?.name} uploaded`, {
        description: `File type: ${file?.type.split("/")[1]}, Size: ${
          file?.size
        }`,
      });
    },
    onError: (file) => {
      toast(`Couldn't upload file ${file?.name}`);
    },
  });

  const handleUpload = async () => {
    if (onChange) {
      if (Array.isArray(acceptedFiles)) {
        acceptedFiles.forEach((file) => {
          mutation.mutate({ file });
        });
      } else {
        mutation.mutate({ file: acceptedFiles });
      }
    }
  };

B33fb0n3

2024-01-07T17:01:18.000Z

yea it needs to be in it's own function like this:

const fetchData = async () => {
            const data = await getData();
...
        };

        fetchData();

you can see the full example here: https://nextjs-forum.com/post/1193597793558859907#message-1193598369197740172

Siricid woodwaspOP

2024-01-07T17:02:40.000Z

k let me try

Siricid woodwaspOP

2024-01-07T17:09:32.000Z

async function getURL() {
    const { url } = await uploadPresignedUrl();
    return url;
  }


  const handleUpload = async () => {
    const url = await getURL();
    if (onChange) {
      if (Array.isArray(acceptedFiles)) {
        acceptedFiles.forEach((file) => {
          mutation.mutate({ file, url });
        });
      } else {
        mutation.mutate({ file: acceptedFiles, url });
      }
    }
  };

Doesnt work either

Siricid woodwaspOP

2024-01-07T17:17:05.000Z

If I call this server action in parent server component it will only run once right?

@Siricid woodwasp Click to see attachment

Ray

2024-01-07T17:18:41.000Z

look like the error coming from sst?

@Siricid woodwasp Click to see attachment

Ray

2024-01-07T17:18:58.000Z

do you see error if you comment out the body of uploadPresignedUrl?

Siricid woodwaspOP

2024-01-07T17:19:37.000Z

yes no error then

@Siricid woodwasp yes no error then

Ray

2024-01-07T17:21:59.000Z

maybe try changing the target in tsconfig.json to esnext

@Ray maybe try changing the `target` in `tsconfig.json` to `esnext`

Ray

2024-01-07T17:25:43.000Z

if this doesn't work, try import the action to the page where the client component render and pass the action to it

Answer

Siricid woodwaspOP

2024-01-07T17:27:26.000Z

@Ray if this doesn't work, try import the action to the page where the client component render and pass the action to it

Siricid woodwaspOP

2024-01-07T17:28:10.000Z

then it works but url expires in 60 seconds to it just makes some mutattion rest fails

Ray

2024-01-07T17:28:44.000Z

what is the error

Siricid woodwaspOP

2024-01-07T17:29:07.000Z

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

import { UploadFileComponent } from "@/components/upload-file";
import { Metadata } from "next";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Settings",
};

export default async function SettingsPage() {
  return (
    <div>
      <h1>Settings</h1>
      <UploadFileComponent />
    </div>
  );
}

@Siricid woodwasp Error:+await+is+only+valid+in+async+functions+and+the+top+level+bodies+of+modules

Ray

2024-01-07T17:29:55.000Z

try this in next.config.js

experimental: {
    esmExternals: true
  },

@Siricid woodwasp ts import { UploadFileComponent } from "@/components/upload-file"; import { Metadata } from "next"; export const dynamic = "force-dynamic"; export const metadata: Metadata = { title: "Settings", }; export default async function SettingsPage() { return ( <div> <h1>Settings</h1> <UploadFileComponent /> </div> ); }

Ray

2024-01-07T17:30:14.000Z

you didn't try to pass the action yet?

Siricid woodwaspOP

2024-01-07T17:30:30.000Z

this is where next client component is called if i call action here it just runs once

i need to run it on every mutation

Ray

2024-01-07T17:31:22.000Z

you don't need to call

just pass it

<UploadFileComponent action={uploadPresignedUrl} />

Siricid woodwaspOP

2024-01-07T17:38:19.000Z

@Ray this works in dev mode will it keep woking when i bundle it

@Siricid woodwasp <@743561772069421169> this works in dev mode will it keep woking when i bundle it

Ray

2024-01-07T17:38:30.000Z

it should

Siricid woodwaspOP

2024-01-07T17:38:52.000Z

any idea what is the type of action

for typescritp

Ray

2024-01-07T17:39:15.000Z

just do typeof uploadPresignedUrl

Siricid woodwaspOP

2024-01-07T17:39:35.000Z

thanks btw I didnt thought this was possible i created seperate api for this lol was going to switch to that

Ray

2024-01-07T17:40:10.000Z

I have dueled with it since 14.0.0 lol

and still haven't fixed yet in 14.0.4 lol