Quick start

Introducing the <fp-upload> component, specifically designed to make video uploads to FastPix seamless and efficient. With just a few simple steps, you can integrate this functionality into your website or application.

Simple setup: By adding a single line of code, you can integrate the component directly into your application or website, requiring minimal effort.
FastPix ready: All uploads via this component go straight to your FastPix account, streamlining video storage and management.
Customization: You can easily fine-tune the upload interface with customization options to match the look and feel of your platform, ensuring consistency in your user experience.

You can use this component in various web applications, from HTML to React, allowing flexibility across different environments.

HTML element / React integration

To get started with the FastPix Web SDK, follow these steps:

Install the SDK: Begin by installing the necessary package using npm.

npm i fp-web-uploads
Import the package: After installation, import the necessary components in your project.

import 'fp-web-uploads';
Add the upload component: Incorporate the tag into your HTML or JSX. Make sure to provide the endpoint attribute, which will point to the signed-url.
```
<div> 
     <fp-upload endpoint="signed-url"></fp-upload> 
</div>
```

Using FastPix web upload

The FastPix web SDK offers a smooth and user-friendly experience for uploading videos. Here's a quick overview of what you get:

Simple selection: Users can easily click the upload button and browse for their desired video file on their device.
Secure transfer: All uploads are encrypted and securely transferred to FastPix’s servers for safe storage.
Progress tracking: Stay informed throughout the process with a handy progress bar that lets you know exactly how far along your upload is.
Automatic recovery: In case of a failed upload due to unforeseen issues, the system will retry the upload, ensuring minimal interruption.

Steps to integrate fp-upload with a signed direct upload URL

To fully integrate the <fp-upload> component into your application, follow these two main steps:

Step 1: Generating a signed direct upload URL

This step is handled server-side and involves making an authenticated API call to FastPix’s Upload media from device endpoint. Here are the details:

Server-side code: You will need server-side code to interact with FastPix's API to create a signed URL for secure uploads.
Authentication: The API call requires authentication using a token key pair provided by FastPix. This pair consists of a Token ID (username) and Token Secret (password). You'll need to create an Access Token in your FastPix Organization dashboard settings.
API response: Once you make the API request, FastPix will return a signed URL, which can then be used for the upload.

Step 2: Integrating the URL into fp-upload

After receiving the signed URL from the API, you will need to implement it on the client side. Here's how to proceed:

Client-side integration: Once you have the signed direct upload URL, it can be used within the component on your client-side application.
Setting the endpoint: Add the signed upload URL as the value for the endpoint attribute within the component, which will enable the component to send video files directly to FastPix.

Example of generating a signed URL

In this example, a server-side API call is made to FastPix's Upload media from device (Direct upload) endpoint. The result is a signed URL that can be used to securely upload videos

<script>
// This endpoint provides you with the signed URL necessary for uploading your video.

  const url = 'https://v1.fastpix.io/on-demand/uploads';

  // The FastPix Video API employs a token key pair consisting of a Token ID (username) and Token Secret (password) for authentication.  

  // Generate a new Access Token in the Access Token settings located within your FastPix Organization dashboard. 

  const username = '';
  const password = '';

  // Initialize the data object 

const data = {

    corsOrigin: '*',

  newAssetSettings: {

    accessPolicy: 'public',

    metadata: {

      key1: 'value1', 

  },

  generateSubtitles: false,
  normalizeAudio: true,
  maxResolution: '1080p', 
  }, 
};

  const options = {
    method: 'POST',

  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Basic ' + btoa(username + ':' + password), 
},

  body: JSON.stringify(data), 
}
  fetch(url, options) 
  .then(response => { 
  if (response.success) {
    // You can fetch the signedUrl in the response 

  } 
})
</script>