The React widget provides you with a customizable widget to upload files from your React application.


To use the UfWidget component in your React application, run the following command:

npm i @uploadfly/react-widget


Import the UfWidget component and use it within your React application:

import React from "react";
import { UfWidget } from "@uploadfly/react-widget";
import "@uploadfly/react-widget/dist/style.css";

function App() {
  // Your component code

  return (
      <h1>React File Upload Widget</h1>
      <UfWidget apiKey="YOUR_API_KEY">
        {/* Content that triggers the modal */}
        <button>Upload a file</button>

export default App;


The UfWidget component accepts the following props:

  • apiKey (string, required): Your UploadFly API key. Preferably an upload access key.
  • filename (string, optional): The name of the file to be uploaded.
  • maxFileSize (string, optional): The maximum allowed file size for upload, specified as a string (e.g., “6.9MB”).
  • allowedFileTypes (array of strings, optional): An array of allowed file types for upload (e.g., [“jpeg”, “png”]).
  • hideAttribution (boolean, optional): If set to true, hides the attribution link.
  • onUploadComplete (function, optional): A callback function that receives upload completion data.
  • accentColor (string, optional): Custom accent color for styling the widget (default is #f35815).

Event Handlers

  • onUploadComplete(data: object): A callback function called when the upload process is completed. It receives an object containing the following properties:
    • status (number): HTTP status code of the upload response.
    • success (boolean): Indicates whether the upload was successful.
    • data (object): Information about the uploaded file, including:
      • url (string): URL to the uploaded file.
      • name (string): Name of the uploaded file.
      • size (number): Size of the uploaded file in bytes.
      • type (string): MIME type of the uploaded file.
      • path (string): Path to the uploaded file.


By default, the widget includes an attribution link to UploadFly. If you wish to hide this attribution, set the hideAttribution prop to true.