Styling and UI customization

When integrating web uploads into your application, maintaining consistency with your brand’s design and enhancing the user experience are important. The component allows extensive customization through CSS, HTML slots, and web components, giving you full control over the styling and functionality of the upload process. Whether you prefer using Tailwind CSS, custom CSS variables, or a combination of both, FastPix enables you to craft a seamless video upload interface with a good look and feel.

Advanced customization with web components

The <fp-upload> component provides a set of standalone web components that you can mix and match to create a completely personalized video upload interface! This allows you to achieve a user experience that perfectly aligns with your application's design and functionality.

Core component:

<fp-upload>: This is the core component responsible for managing the upload state. It handles everything from initiation to completion. By integrating this component, you ensure that your application has a robust and reliable upload process.

Individual Components:

To offer a more customized experience, works alongside several other web components. These standalone components can be tailored to create a more intuitive and user-friendly video upload interface:

• <fp-upload-status>: Displays a single-line message to the user about the current upload status.
• <fp-upload-file-select>: Allows users to open the system file selection dialog. This component is ideal for the traditional file browsing experience.
• <fp-upload-drop>: Adds drag-and-drop functionality, enabling users to upload files simply by dragging them into the specified area.
• <fp-upload-retry>: Renders a retry button if an upload fails, giving users an easy way to attempt the upload again.
• <fp-upload-monitor>: Visualizes upload progress using either a progress bar or percentage indicator, keeping users informed about the status of their uploads.

How to use individual components

To fully customize your video upload experience, follow these steps to integrate the individual components:

Step 1: Assign a unique identifier

Begin by assigning a distinctive identifier (ID) to your element using the id attribute. This ID serves as a reference point for linking other individual components.

<fp-upload endpoint="" id="webUploads"> 
</fp-upload> 

Step 2: Link the individual components

Each standalone component has an attribute. Set the value of this attribute to the unique ID you assigned to your element in step 1. This creates a seamless connection between the component and the uploader, allowing them to work together effectively.

<fp-upload-file-select fp-upload="webUploads"> 
     <button class="upload-button" slot="upload-file-button">Select your file</button> 
</fp-upload-file-select>

Personalize to your preferences

The component is designed with simplicity in mind, but it also allows for advanced customization. You can personalize its appearance and behavior to match your platform’s branding or interface guidelines.

Using HTML slots

The component gives built-in flexibility, allowing you to customize its interface to better fit your application's design. By utilizing HTML slots, you can inject your own design elements and replace the default elements. This not only enhances visual appeal but also ensures a consistent and cohesive user experience.

Example: Integrating custom buttons with slots

Let's say you already have a stylish button class (".upload-button") defined in your application. You can leverage the slot="button" attribute to integrate this custom button into the uploader. This way, users will interact with a familiar button while selecting files for upload, maintaining a cohesive experience for your users.

<style> 
.uploadButton { 
  padding: 20px 24px; 
  background-color: #217a7d; 
  color: #FFF; 
  border: 0px; 
  border-radius: 15px; 
  cursor: pointer; 
} 
</style> 

<fp-upload endpoint="" id="webUploads"> 
  <button class="uploadButton" slot="upload-file-button">Select your file</button> 
</fp-upload> 

Maximizing control with slot options

Customizing UI with CSS variables

To apply custom styles to components, you should use the class attribute. This allows you to include both CSS and Tailwind CSS-based styling. For other HTML elements used within the component, you can use the className attribute in React projects.

📘

PLEASE NOTE

CSS variable allow for dynamic theming. By adjusting a single property in your CSS , you can alter the look of all your upload components globally, ensuring your design is flexible and future-proof.

Here's an example code for CSS customization in React:

import "fp-web-uploads"
import "./WebUploads.css"

function WebUpload() {

  return (

    <div>
      <h2>Fastpix Web Uploads</h2>
      <fp-upload class="uploaderContainer" endpoint="signed-url" id="webUploads">
      </fp-upload>
      <fp-upload-file-select fp-upload="webUploads">
        <button className="uploadButton" slot="upload-file-button">Select your file</button>
      </fp-upload-file-select>
      <fp-upload-monitor class="progressStatus" fp-upload="webUploads" progress-type="progress-status"></fp-upload-monitor>
      <fp-upload-monitor class="progressBar" fp-upload="webUploads" progress-type="progress-bar"></fp-upload-monitor>
      <fp-upload-status class="uploadStatus" fp-upload="webUploads"></fp-upload-status>
    </div>

  )

}

export default WebUpload 

.uploaderContainer {
  display: none;
}

.uploadButton {
  padding: 20px 24px;
  background-color: #ffffff;
  border: 1px solid #6f42c1;
  cursor: pointer;
  border-radius: 10px;
  color: #6f42c1;
}

.uploadButton:hover {
  background-color: #6f42c1;
  color: #ffffff;
}

.uploadButton:active {
  background-color: #4b2d84;
  border-color: #4b2d84;
}

.progressStatus {
  color: #6f42c1;
}

.progressBar {
  --uploader-progress-bar-color: #4b2d84;
}

.uploadStatus{ 
	color: #4b2d84; 
} 

Styling with Tailwind CSS

Tailwind CSS is another popular approach to styling React applications. It provides utility classes that let you apply styles directly to your HTML elements.

By following this approach, you can style your component using Tailwind's pre-defined utility classes, making your application's design consistent and efficient.

PLEASE NOTE

• If you are using a large, multi-page application, consider combining Tailwind's utility classes with custom CSS for a balance between flexibility and maintainanility.
• Tailwind's small bundle size also contributes to faster load times, which is critical for high-traffic website like video hosting platforms

This example demonstrates how to style the component using Tailwind CSS:

import "fp-web-uploads"

const WebUploads = () => {

  return (

    <>
      <div className="w-full min-h-screen bg-white">
        <h2 className="text-dark font-medium text-lg">Fastpix web uploads using Tailwind</h2>
        <div className="w-full border-[1px] border-dashed border-[#b9e5f0] flex flex-col justify-center items-center bg-white px-5 py-5">
          <fp-upload class="hidden" id="webUploads" endpoint="signed-url">
          </fp-upload>
          <div className="w-full">
            <fp-upload-file-select class="flex flex-row justify-center items-center" fp-upload="webUploads">
              <button slot="upload-file-button" className="bg-sky-300 rounded px-[10px] text-[#ffffff] py-[14px] hover:bg-sky-700"> Select your file</button>
            </fp-upload-file-select>
            <fp-upload-monitor class="text-[#6bcbe3] font-semibold font-md" fp-upload="webUploads" progress-type="progress-status"></fp-upload-monitor>
            <fp-upload-monitor style={{ "--uploader-progress-fill-color": "#20a8c9" }} fp-upload="webUploads"></fp-upload-monitor>
            <fp-upload-status fp-upload="webUploads" class="text-[#2f788a] font-semibold flex flex-row justify-center items-center"></fp-upload-status>
          </div>
        </div>
      </div>
    </>
  )
}

export default WebUploads 

Customizing the progress bar

The example utilizes custom CSS properties within the and element to define the progress bar's color, height, and background color:

<style> 

.uploadButton { 
  padding: 20px 24px; 
  background-color: #217a7d; 
  color: #FFF; 
  border: 0px; 
  border-radius: 15px; 
  cursor: pointer; 
} 

fp-upload { 
  --uploader-progress-fill-color: #ceb40e; 
  --uploader-progress-bar-height: 10px; 
  --uploader-progress-bar-backgroundcolor: #0f0f0f; 
} 
</style> 

<fp-upload endpoint="" id="webUploads"> 
  <button class="uploadButton" slot="upload-file-button">Select your file</button> 
</fp-upload> 

• --uploader-progress-bar-color: This property defines the color used to fill the progress bar as it progresses.
• --uploader-progress-bar-height: This property controls the height of the progress bar element.
• --uploader-progress-bar-backgroundcolor: This property sets the background color behind the progress bar.

📘

TIP

Consider adding animations to the progress bar to make it more engaging. For instance, you cloud animate the process color change to stage of the upload (e.g., green 100% completion, yellow for slow progress.

Drag and drop area for file uploads

FastPix web uploads SDK comes with built-in drag-and-drop functionality, making file uploads easy and intuitive for users.

<style> 

.uploadButton { 
  padding: 20px 24px; 
  background-color: #217a7d; 
  color: #FFF; 
  border: 0px; 
  border-radius: 15px; 
  cursor: pointer; 
} 

fp-upload { 
  --uploader-overlay-background-color: #9fcddc; 
} 

</style> 

<fp-upload overlay-text="Drop your video file here" endpoint="signed-url" id="webUploads"> 
    <button class="uploadButton" slot="upload-file-button">Select your file</button> 
</fp-upload> 

• --uploader-overlay-background-color: Sets the background color of the overlay that likely appears when hovering over the upload area.
• The overlay-text attribute allows you to provide custom text that informs the user when a file has been hovered over the upload area

Customizing

This component combines a custom button, progress text, progress bar, and drag-and-drop functionality, all of which can be easily tailored to fit your website's style.

Enjoy the convenience of drag-and-drop file uploading. The upload area changes its background when a file is hovered over it, providing clear visual feedback.

You can further display custom overlay text during the drag-and-drop interaction to guide users effortlessly.

<style>
  fp-upload-drop {
    background - color: #d8f1f2 ;
  --uploader-overlay-background-color: #c7d2d6;
  --uploader-progress-fill-color: #237487; 
}
  .upload-component {
    display: none; 
}
  .upload-button {
  background: #7eafb8;
  color: white;
  border-radius: .35em;
  border: 0;
  cursor: pointer;
  height: 50px;
  width: 220px; 
}

  .progress-status {
  color: cadetblue;
  font-size: medium;
  font-weight: 600;
  text-decoration: underline; 
}

  .drop-heading {
  color: #2c383c;
  font-size: 24px;
  font-weight: 700; 

}
.drop-separator { 

color: #2c383c; 

font-size: 16px; 

font-weight: 400; 

margin-top: 10px; 

margin-bottom: 20px; 

} 

</style> 


<fp-upload class="upload-component" endpoint="" id="webUploads"> 

</fp-upload> 

<fp-upload-drop overlay-text="Drop your video file here" fp-upload="webUploads"> 

<span class="drop-heading" slot="heading">Drop your video file here</span> 

<span class="drop-separator" slot="separator">-- or --</span> 

<fp-upload-file-select fp-upload="webUploads"> 

<button class="upload-button" slot="upload-file-button">Select your file</button> 

</fp-upload-file-select> 

<fp-upload-monitor class="progress-status" progress-type="progress-status" 

fp-upload="webUploads"></fp-upload-monitor> 

<fp-upload-monitor fp-upload="webUploads"></fp-upload-monitor> 

<fp-upload-status fp-upload="webUploads"></fp-upload-status> 

<fp-upload-retry fp-upload="webUploads"> 

</fp-upload-retry> 

</fp-upload-drop> 

Extra considerations for customizing

1. Accessibility: Ensure that the customized elements adhere to accessibility standards (WCAG compliance). This includes using appropriate color contrast, adding descriptive labels for screen readers, and providing keyboard accessibility for users who cannot use a mouse.
2. Responsive design: Make sure the component and its customized parts work well on all devices. You can adjust the layout and size of the progress bar, buttons, and drag-and-drop areas to be mobile-friendly.
3. Custom error messages: Customize the retry button and error messages with clearer feedback, such as indicating the type of error (e.g., file size limit exceeded, unsupported file format). This makes it easier for users to resolve issues