use-upload

Upload files client side with presigned URLs from any cloud storage

Docs & Examples

🚀 Installation

With npm:

npm install --save use-upload

With yarn:

yarn add use-upload

🖥️ Usage

You will need an API endpoint that returns you a presigned URL from the storage service you are using. If you don't know what a presigned URL is, please go to the How to use section in the docs and you'll learn more

Once you have a valid endpoint, just import accordingly:

With REST:

import { useRestUpload } from 'use-upload';

const MyComponent = () => {
  const { 
    upload,
    uploading,
    progress,
    reset 
  } = useRestUpload(
    '<YOUR-ENDPOINT>', 
    { ...config }
  )

  const handleUpload = () => {
    // Config is equivalent to client.query(_, config)
    // See: https://github.com/axios/axios#request-config
    const finalUrl = await upload(file, config);
  }

  return (
    ...
  )
}

With graphql:

import { useGraphqlUpload } from 'use-upload';

const MyComponent = () => {
  const { 
    upload,
    uploading,
    progress,
    reset 
  } = useGraphqlUpload(
    gqlQueryDefinition, // Using gql tag
    { 
      ...config, 
      apolloClient: <APOLLO-CLIENT-INSTANCE> // A valid apollo client instance is required
    }
  )

  const handleUpload = () => {
    // Config is equivalent to axios config
    // See: https://www.apollographql.com/docs/react/data/queries/#options
    const finalUrl = await upload(file, config);
  }

  return (
    ...
  )
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!