Handling media uploads with server actions

[pseudo plover]

I am new in Nextjs please tell me how to handle media uploads with server actions Nextjs docs not tell that

[shadow olive]

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)

[wind yoke]

that depends on your storage provider how to upload data to it. If you know how you upload files to your storage provider, just call the sdk/api endpoint and provide the data. If you are using S3 from AWS I can help you further 🙂 @pseudo plover

[pseudo plover]

you mean first i send formdata from client component or server component to server actions and then send formdata to api endpoint ?

[wind yoke]

yes, because normally you don't want that the client has the secret keys to upload media

[pseudo plover]

i am using custom select input not native select, Can server action pick custom select input value in formData

[wind yoke]

is your custom file input in the background an input field? It's just styled custom?

[pseudo plover]

i am using mui select component i checked and not find input field

[wind yoke]

can you share me a link to the docs please

[pseudo plover]

https://mui.com/material-ui/react-select/

[wind yoke]

there isn't any file upload. You are right.

maybe you can use this one? https://mui.com/material-ui/react-button/#file-upload

[pseudo plover]

i am using both select component and npm package react-dropzone

[wind yoke]

ah ok, than you can use the onDrop function from react-dropzone:

const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = () => {
      // Do whatever you want with the file contents
        const binaryStr = reader.result
        console.log(binaryStr)
      }
      reader.readAsArrayBuffer(file)
    })
    
  }, [])

You can see, that you get the buffer and you want to send the buffer to your backend and from there you can access your secret keys to upload your files to your storage provider. It would be a little easier with the normal file upload from https://mui.com/material-ui/react-button/#file-upload but like the way you want to go is also possible

[pseudo plover]

how i achieve this with formData and server actions

[wind yoke]

well, you needed to have a form, to have formdata, but there is no form. So you can go the way via a route handler, to upload the file through your own route handler. Because you have the buffer

[pseudo plover]

thankyou so much @wind yoke

[wind yoke]

cool, please mark solution