Portive Client

Getting Started with Portive Client

The Portive Client is the official library to use with Portive to add Portive Cloud services to component or app.

Portive Client includes tools to make integration easier.

You can use Portive Client to:

• Upload files and images
• Resize images
• Coming soon: Retrieve URL metadata
• Coming soon: Convert a URL to a cloud file

Usage Instructions

Installation

To install @portive/client:

# install with yarn
yarn add @portive/client

# install with npm
npm install --save @portive/client

Create Client object

To use the Portive Cloud to upload a file or image, we first need to create a Client object.

You can create a Client object with an API Key:

import { createClient } from '@portive/client`

// Create a client using an API Key
const client = createClient({
  apiKey: "...", // Your API key. Get a free one at https://portive.com/
})

Or you can create a Client object with an Auth Token.

import { createClient } from "@portive/client"

// Create a client using an Auth Token
const client = createClient({
  authToken: "...", // The `authToken` generated on the server
})

Uploading a File

Using the Client object you just created, you can upload a File with the uploadFile method.

You can find a detailed reference of the uploadFile method in the API Reference for uploading.

Here's an example in React but usage in other frameworks is similar.

JavaScript
import { createClient, uploadFile } from "@portive/client"
import { useCallback, useMemo } from "react"

export default function Page() {
  const client = useMemo(() =>
    createClient({ apiKey: "MY_API_KEY" })
  )

  const onChange = useCallback(
    async function onChange(e) {
      // get the selected `File` objects
      const files = e.target.files
      // if none are selected, exit
      if (files == null || files.length === 0) return
      // loop through each of the `File` objects and upload them individually
      for (const file of files) {
        console.log("file", file)
        const result = await uploadFile({
          client,
          file,
          onProgress(e) {
            console.log(`bytes sent: ${e.bytesSent} / ${e.bytesTotal}`)
          },
        })
        console.log(result)
      }
    },
    [client]
  )

  // `multi` allows for multiple uploads
  return <input type="file" onChange={onChange} multi />
}

Sample result value.

// Image uploaded successfully...

{
  status: 'success',
  data: {
    type: "image"
    url: "https://files.portive.com/f/pszrw/lSIrlij920X4FSEGLXgNC--640x480.jpeg",
    width: 640,
    height: 480,
  }
}

// Not an image uploaded successfully...

{
  status: "success",
  data: {
    type: "generic"
    url: "https://files.portive.com/f/pszrw/3MvYfzRqmkpY3F9BLQNj5.txt"
  }
}

// Error during upload...

{
  status: "error",
  message: "Description of error is here",
}