Core Features

• Drag & Drop or Copy & Paste any file
• Pick files from multiple sources including popular online file shares
• Upload files straight to your own Amazon S3, Azure Bob & SFTP storages
• Crop, rotate, flip and enhance photos to perfection with built-in photo editor
• Generate thumbnails, apply text or image watermarks
• Complete control with configurable options and much more

Demo/Examples

See file upload widget in action here with example configurations demonstrating various features.

Quick Start

Install it through NPM

npm install @appvitalinc/file-upload-widget-api-react

import { ApvFilePicker } from '@appvitalinc/file-upload-widget-api-react';

const MyComponent = () => {
  return (
    <ApvFilePicker
      apikey={'apiKey'}
    />
  )
}

Available inputs

| Name | Type | Required | Default | Description | | ------- | -------------------- | -------- | ------- | ------------------------------------------------------------------- | | apikey | String | True | | Filepicker api key | | options | ApvFilePickerOptions | | | Check ApvFilePickerOptions |

Callbacks

| Name | Function | Required | Default | Description | | --------------- | --------------------- | -------- | ------- | -------------------------------------- | | onOpen | () | | | Fires when filepicker has been initialized and is ready. |
| onClose | () | | | Fires when filepicker popup is closed. | | onCancel | () | | | Fires when filepicker is canceled. | | onUploadStarted | () | | | Fires when file(s) uploading starts. | | onUploadDone | (ApvFilePickerResponse) | | | Fires when uploading completes. | | onUploadError | (error) | | | Fires when file(s) upload is failed. |

Below you can find some quick basic implementations.

Open picker - Single file upload

import { ApvFilePicker } from '@appvitalinc/file-upload-widget-api-react';

const MyComponent = () => {

  const apikey = 'YOUR_API_KEY';
  const options =  {
      multiple: false,
      outputfileoptions: {
        width: 500,
        height: 281,
        resizetype: "fit",
        resizeconflict: "pad",
        storage: [
          {
            name: "AWS-S3-Storage-Demo",
            path: "/file-picker-demo/",
          },
        ],
      },
      inputfileoptions: {
        allowedfileformats: "jpg,jpeg,gif,bmp,png,webp,zip,pdf",
        maxfilesize: 700000000,
        note:
          "File size restricted to: 10000 KB / File type restricted to: JPG, PNG, JPEG, PDF, DOC, DOCX, TXT, XML and ZIP.",
      },
    };
  };

  onOpen = () =>  {
    console.log('Modal open');
  }

  onClose = () => {
    console.log('Modal Close');
  }

  onCancel = () => {
    console.log('On Cancel');
  }

  onUploadDone = (data) => {
      console.log('onUploadStart', data);
  }

  onUploadStart = () => {
    console.log('onUploadStart');
  }

  onUploadError = (data) => {
    console.log('onUploadError', data);
  }

  return (
    <ApvFilePicker
      apiKey={apikey}
      options={options}
      onOpen={onOpen}
      onClose={onClose}
      onCancel={onCancel}
      onUploadDone={onUploadDone}
      onUploadStarted={onUploadStart}
      onUploadError={onUploadError} 
      />
    );
}

Documentation

You can find further documentation about available filepicker options and configuration details here at https://appvital.com/docs/file-uploader#Quickstart-React

Contributing

Any of your contributions or ideas are more than welcome. Please consider that we follow the conventional commits specification to ensure consistent commit messages and changelog formatting.