Uploading and watching an asset is easy! The example below uses the Create asset API to create an upload link to upload a video.

Pro Tip: Livepeer supports resumable uploads through the TUS protocol, ensuring reliability and efficiency when transferring your asset.

For rapid processing of assets that will also be archived on IPFS or Arweave, we strongly encourage either (1) uploading to Livepeer with the IPFS storage option enabled, or (2) uploading the raw file to Livepeer via useCreateAsset or the API prior to archiving on dStorage, rather than passing the IPFS / Arweave gateway URL. The gateway URL will work, but may incur longer-than-usual processing time.

Livepeer provides versatile options for uploading and managing your assets:

  • Single Asset Upload: Upload individual assets for processing and play back.
  • Bulk Asset Upload: Explore an efficient method for uploading multiple assets simultaneously, simplifying content management.
  • Resumable Upload: Discover the power of resumable uploads, ensuring reliability and efficiency when transferring your media files.

​
Using Livepeer SDK

We can use the Livepeer SDK to create a Tus-compatible upload endpoint.

  • Node.js

  • Python

  • Ruby

  • PHP

  • Go

import { Livepeer } from "livepeer";

const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const fileName = 'filename.mp4'; // Replace with the desired file name

const livepeer = new Livepeer(apiKey);

const assetData = {
  name: fileName
};

livepeer
  .requestAssetUpload(assetData)
  .then((response) => {
    console.log("Asset upload request:", response);
  })
  .catch((error) => {
    console.error("Error requesting asset upload:", error);
  });

Once an upload endpoint is created, you can use it to upload your video file to Livepeer. The upload endpoint is tus compatible, so you can use any tus-compatible client (like tus-js-client) to upload your video file from the frontend.

​
Using React Hooks

We create a new React client and wrap the app with LivepeerConfig.

Now that our providers are set up, we set up file uploads with React Dropzone, a library for easily creating HTML5-compliant drag and drop zones for files (you can use another solution for file uploads):

import { useCreateAsset } from "@livepeer/react";

import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

export const CreateAndViewAsset = () => {
  const [video, setVideo] = useState<File | undefined>();
  const {
    mutate: createAsset,
    data: asset,
    status,
    progress,
    error,
  } = useCreateAsset(
    video
      ? {
          sources: [{ name: video.name, file: video }] as const,
        }
      : null
  );

  const onDrop = useCallback(async (acceptedFiles: File[]) => {
    if (acceptedFiles && acceptedFiles.length > 0 && acceptedFiles?.[0]) {
      setVideo(acceptedFiles[0]);
    }
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      "video/*": ["*.mp4"],
    },
    maxFiles: 1,
    onDrop,
  });

  const progressFormatted = useMemo(
    () =>
      progress?.[0].phase === "failed"
        ? "Failed to process video."
        : progress?.[0].phase === "waiting"
        ? "Waiting"
        : progress?.[0].phase === "uploading"
        ? `Uploading: ${Math.round(progress?.[0]?.progress * 100)}%`
        : progress?.[0].phase === "processing"
        ? `Processing: ${Math.round(progress?.[0].progress * 100)}%`
        : null,
    [progress]
  );

  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag and drop or browse files</p>
      </div>

      {createError?.message && <p>{createError.message}</p>}

      {video ? <p>{video.name}</p> : <p>Select a video file to upload.</p>}
      {progressFormatted && <p>{progressFormatted}</p>}

      <button
        onClick={() => {
          createAsset?.();
        }}
        disabled={!createAsset || createStatus === "loading"}
      >
        Upload
      </button>
    </>
  );
};

​
Play an Asset

To learn how to play an asset, see the Play an Asset guide.

Was this page helpful?

OverviewPlay an asset