Image Uploader

The PixflyUploader component allows you to easily upload images to your server or cloud storage. It provides a simple, customizable interface to handle the upload process, and it integrates seamlessly with your web app.

Usage

Here's how to use the PixflyUploader component in your React app:

PixflyUploader.jsx

  import { PixFlyUploader } from "pixfly-kit"
  import "pixfly-kit/dist/styles.css"
  
  const Page = () => {
    return (
  
      <PixFlyUploader
        apiBaseUrl="API_URL"
        sign="YOUR_API_KEY"
        proj="YOUR_PROJECT_ID"
        onUploadSuccess={(result) => {
          console.log(result);
        }}
        onUploadError={(error) => {
          console.log(error);
        }}
      />
      
    );
  };
  

Explanation of Code

Let's break down each part of the code above and explain what each part does:

Item	Description
apiBaseUrl *	The apiBaseUrl is the base URL of Pixfly account. This is the URL that you use to access the Pixfly platform. It is typically https://thepixfly.com, but may vary depending on account settings.
sign *	The sign is a API key for your account. You can get this key after signing up on the Pixfly platform. Simply go to the Settings section in your dashboard to copy your API key. Get your API Key here.
proj *	The proj is the project ID you create when signing up. Each project is given a unique ID, which you will use in the component to link it to your project.
onUploadSuccess	This callback function is triggered after a successful upload. The result of the upload (including the image URL) is passed to this function, where you can access it and use it however you like.
onUploadError	This callback function is triggered if an error occurs during the upload process. It receives the error message, which can be used for debugging or informing the user.
customClass	The customClass prop allows you to customize the styling of the upload dialog, button, and other components. You can use this to match the uploader's design with your app's look and feel.
buttonText	The buttonText prop allows you to customize the text on the upload button. You can use this to change the button's label or add additional text.
maxImages	The maxImages prop allows you to set a limit on the number of images that can be uploaded at a time. You can use this to prevent users from uploading too many images.