title	Upload to S3 from Browser using AWS Amplify Storage
description	Upload to S3 from Browser using AWS Amplify Storage
author	haimtran
publishedDate	08/10/2022
date	2022-08-10

Introduction

GitHub this shows

• setup amplify project for nextjs
• upload and download objects to and from a s3 bucket
• working with amplify storage api (signed url)

Amplify Init

init

amplify init

add auth with default and login by email

amplify add auth

add storage

amplify add storage

then push to aws

amplify push

Amplify Storage

simple upload by amplify storage

import { Storage } from "aws-amplify";

export const uploadToS3 = async (file: File, setProgress: any) => {
  console.log("uploading file to s3 ...", file);
  try {
    const result = await Storage.put(file.name, file, {
      progressCallback(value) {
        setProgress((100.0 * value.loaded) / value.total);
      },
    });
  } catch (error) {
    console.log("error upload file to s3: ", error);
  }
};

Create Upload Form

configure react-hook-form and fileName and progress.

const inputRef = useRef<HTMLInputElement | null>(null);
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [fileName, setFileName] = useState("Your File ...");
const [progress, setProgress] = useState(1);
const name = "FirstName";

const { handleSubmit, control } = useForm({
  defaultValues: {
    FirstName: "",
  },
  mode: "onChange",
});

const { field, fieldState, formState } = useController({
  name,
  control,
  rules: { required: true },
  defaultValue: "",
});

upload button and choose file button

const uploadButton = (
  <Button
    onClick={async () => {
      await uploadToS3(selectedFile as File, setProgress);
      // setFileName("Your File ...");
      // setSelectedFile(null);
    }}
  >
    Upload
  </Button>
);

const chooseFileButton = (inputRef: any) => (
  <Button onClick={() => inputRef.current?.click()}>Choose File</Button>
);

hidden the input

const HiddenInput = () => {
  return (
    <input
      type={"file"}
      name={"FirstName"}
      ref={(e) => {
        field.ref(e);
        inputRef.current = e;
      }}
      onChange={(event) => {
        if (event.target.files && event.target.files.length > 0) {
          setFileName(event.target.files[0].name);
          setSelectedFile(event.target.files[0]);
        }
      }}
      style={{ display: "none" }}
    ></input>
  );
};

the entire upload form

<Flex
  direction={"column"}
  gap={"20px"}
  maxWidth="1000px"
  margin={"auto"}
  marginTop={"200px"}
>
  <FormControl>
    <InputGroup>
      <InputLeftElement>
        <Icon as={FiFile}></Icon>
      </InputLeftElement>
      <HiddenInput></HiddenInput>
      <Input
        placeholder="Your file ..."
        value={fileName}
        onChange={(e) => console.log(e)}
      ></Input>
      <InputRightElement width={"auto"}>
        {selectedFile ? uploadButton : chooseFileButton(inputRef)}
      </InputRightElement>
    </InputGroup>
  </FormControl>
  <Progress value={progress}></Progress>
</Flex>