@appvitalinc/file-upload-widget-api-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    appvital-file-upload-widget-api-react

    React wrapper library to quickly integrate Appvital File picker & cloud uploader in your application with just few lines of code.

    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.

    Install

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

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    20.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • appvital