How to handle uploadfile in server action

[dzakyabdurhmn]

how to handle input with default value or defaultvalue from cropped file like this

      <form action={uploadFiles}>
        <input value={cropped} type="file" name="files" multiple />
        <button type="submit">Upload Files</button>
      </form>

[sujjeee]

@dzakyabdurhmn what are you tring to do actually with input ?

[dzakyabdurhmn]

@sujjeee want to upload the image to storage/bucket like aws

[sujjeee]

@dzakyabdurhmn im doing like this

  async function uploadAvatar() {
    try {
      setIsUploading(true)

      const formData = new FormData()

      if (croppedImageUrl) {
        const croppedImageBlob = await base64ToBlob(croppedImageUrl)

        // Check the size of the blob
        const maxSize = 5 * 1024 * 1024 // 5MB
        if (croppedImageBlob.size > maxSize) {
          throw new Error("Image size exceeds the maximum limit of 5MB")
        }

        formData.append("file", croppedImageBlob)
      }

      const { error } = await updateUserAvatar({
        formData,
        userEmail: user.email,
        userId: user.id,
        workspacePermissions: permissions,
      })

      if (error) throw new Error(error)

      toast("User avatar updated")
    } catch (error) {
      showErrorToast(error)
    } finally {
      setIsUploading(false)
    }
  }