# Basic example

This package provides a `useS3Upload` hook that gives you all of the pieces needed to upload from your application to S3.

Here's an example of the simplest file upload component.

```jsx
import { useState } from "react";
import { useS3Upload } from "next-s3-upload";

export default function UploadComponent() {
  let [imageUrl, setImageUrl] = useState();
  let { FileInput, openFileDialog, uploadToS3 } = useS3Upload();

  let handleFileChange = async file => {
    let { url } = await uploadToS3(file);
    setImageUrl(url);
  };

  return (
    <div>
      <FileInput onChange={handleFileChange} />

      <button onClick={openFileDialog}>Upload file</button>

      {imageUrl && <img src={imageUrl} />}
    </div>
  );
}
```

## How it works

This example renders a page with a single button labeled "Upload file".

When the button is clicked the browser will open a file selection dialog. Once the user selects a file the `handleFileChange` function will fire and begin uploading the file to S3.

The `uploadToS3` function will return an object containing a URL to the file once the upload successfully finishes.

## Things to note

The `<FileInput>` renders a hidden file input tag that coordinates uploading the file. This library gives you `<FileInput>` component because wiring up functions to open file inputs in React contains a good chunk of boilerplate code. Using this component will save you time, but you're free to [use your own file input](/custom-file-input) if you'd like.
