vfs-upload-widget

eGov upload widget

installation

npm install egov-upload-widget

import style

import 'egov-upload-widget/styles';

Avatar Uploader Component

The Avatar Uploader component allows users to upload and display avatars in your React application.

Parameters

• project: (string) Name of the project.
• name: (string) Name of the component.
• value: (string) Image URL of the avatar.
• maxFileSize: (number) Maximum file size in bytes allowed for avatar uploads.
• onChange: (function) Function called when the value of the component changes.
• onDelete: (function) Delete Function trigger when delete icon clicked.
• onClick: (function) Click Function to get current data.
• customRender: (React component) Custom React component for rendering the avatar.
• disabled: (function) disabled upload and delete.

Usage

import Avatar from 'egov-upload-widget/avatar';
//or
import Avatar from 'egov-upload-widget/avatar-circle';

<Avatar
  project="project_name"
  name="avatar"
  value="https://example.com/avatar.jpg"
  maxFileSize={1048576} // 1MB
  onChange={(e) => console.log(e.target.value)}
  onDelete={() => {}}
  customRender={<CustomAvatarComponent />}
/>

import React, { useState } from 'react';
import Avatar from 'egov-upload-widget/avatar';

const App = () => {
  const [value, setValue] = useState('');

  const onHandleChange = (e) => {
    setValue(e.target.value.url);
  };

  return (
    <div>
      <Avatar
        project="project_name"
        name="avatar"
        value={value}
        maxFileSize={5242880} // 5MB
        onchange={onHandleChange}
      />
    </div>
  );
};

export default App;

customRender Prop

The customRender prop allows you to specify a custom React component for rendering the avatar. This gives you full control over the appearance and behavior of the avatar component. The custom component will receive the following props:

• onToggleMenu: (function) A function to toggle the menu display.
• data: (any) Additional data to pass to the custom component.
• progressPercentage: (number) Progress percentage of the avatar upload (0 to 100).
• error: (string) Error message if avatar upload fails.
• isShowMenu: (boolean) Flag indicating whether the menu is currently shown.
• setIsShowMenu: (function) A function to toggle the menu display.
• onHandleDelete: (function) A function to handle the deletion of the avatar.
• MenuComponent: (React component) The menu component to be rendered alongside the avatar.

Example Usage

import React from 'react';

const CustomAvatarComponent = ({
  onToggleMenu,
  data,
  progressPercentage,
  error,
  isShowMenu,
  setIsShowMenu,
  onHandleDelete,
  MenuComponent
}) => {
  return (
    ...
  )
}

const App = () => {
  
  return (
    <Avatar
      project="project_name"
      name="avatar"
      value={avatarUrl}
      maxFileSize={5242880} // 5MB
      onchange={onHandleChange}
      customRender={(props) => (
        <CustomAvatarComponent />
      )}
    />
  );
};

export default App;

Single File Uploader Component

The Single File Uploader component allows users to upload and display file in your React application.

Parameters

• project: (string) Name of the project.
• name: (string) Name of the component.
• value: (object) data value for component.
• maxFileSize: (number) Maximum file size in bytes allowed for file uploads.
• onchange: (function) Function called when the value of the component changes.
• onDelete: (function) Delete Function trigger when delete icon clicked.
• onClick: (function) Click Function to get current data.
• fileTypes: (function) Allowed mime types | default to all
• customRender: (React component) Custom React component for rendering the file.
• disabled: (function) disabled upload and delete.

value

• url: (string) Url of file.
• mime_type: (string) mime type of file.
• file_name: (string) file name of file.
• file_size: (string) file size of file.

Usage

import File from 'egov-upload-widget/file';

<File
  project="project_name"
  name="file"
  value={{
    file_name: 'file.jpg',
    url: 'https://example.com/file.jpg',
    mime_type: 'application/jpeg'
  }}
  maxFileSize={1048576} // 1MB
  onchange={(e) => console.log(e.target.value.url)}
  customRender={<CustomAvatarComponent />}
/>

import React, { useState } from 'react';
import File from 'egov-upload-widget/file';

const App = () => {
  const [value, setValue] = useState('');

  const onHandleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <File
        project="project_name"
        name="file"
        value={value}
        maxFileSize={5242880} // 5MB
        onchange={onHandleChange}
      />
    </div>
  );
};

export default App;

customRender Prop

The customRender prop allows you to specify a custom React component for rendering the file. This gives you full control over the appearance and behavior of the file component. The custom component will receive the following props:

• onToggleMenu: (function) A function to toggle the menu display.
• data: (any) Additional data to pass to the custom component.
• progressPercentage: (number) Progress percentage of the file upload (0 to 100).
• error: (string) Error message if file upload fails.
• isShowMenu: (boolean) Flag indicating whether the menu is currently shown.
• setIsShowMenu: (function) A function to toggle the menu display.
• onHandleDelete: (function) A function to handle the deletion of the file.
• MenuComponent: (React component) The menu component to be rendered alongside the file.

Example Usage

import React from 'react';

const CustomFileComponent = ({
  onToggleMenu,
  data,
  progressPercentage,
  error,
  isShowMenu,
  setIsShowMenu,
  onHandleDelete,
  MenuComponent
}) => {
  return (
    ...
  )
}

const App = () => {
  
  return (
    <File
      project="project_name"
      name="file"
      value={value}
      maxFileSize={5242880} // 5MB
      onchange={onHandleChange}
      customRender={(props) => (
        <CustomFileComponent />
      )}
    />
  );
};

export default App;

Multiple File Uploader Component

The Multiple File Uploader component allows users to upload and display files in your React application.

Parameters

• project: (string) Name of the project.
• name: (string) Name of the component.
• value: (array) array of file object .
• maxFileSize: (number) Maximum file size in bytes allowed for file uploads.
• onchange: (function) Function called when the value of the component changes.
• onDeleteItem: (function) Delete Function trigger when click delete icon clicked.
• onClickItem: (function) Click Function trigger when content click and get current data and index.
• fileTypes: (function) Allowed mime types | default to all
• customRender: (React component) Custom React component for rendering the file.
• disabled: (function) disabled upload and delete.
• disabledOnDeleteItem: (function) disabled onDelete only.

value

• url: (string) Url of file.
• mime_type: (string) mime type of file.
• file_name: (string) file name of file.
• file_size: (string) file size of file.

Usage

import Files from 'egov-upload-widget/files';

<Files
  project="project_name"
  name="files"
  value={[
    {
      file_name: 'file.jpg',
      url: 'https://example.com/file.jpg',
      mime_type: 'application/jpeg'
    },
    {
      file_name: 'file2.jpg',
      url: 'https://example.com/file2.jpg',
      mime_type: 'application/jpeg'
    },
    {
      file_name: 'file3.pdf',
      url: 'https://example.com/file3.jpg',
      mime_type: 'application/pdf'
    }
  ]}
  maxFileSize={1048576} // 1MB
  onchange={(e) => {
    //array of files
    console.log(e.target.value)
  }}
  customRender={<CustomAvatarComponent />}
/>

import React, { useState } from 'react';
import Files from 'egov-upload-widget/files';

const App = () => {
  const [value, setValue] = useState('');

  const onHandleChange = (e) => {
    //array of files
    setValue(e.target.value);
  };

  return (
    <div>
      <Files
        project="project_name"
        name="files"
        value={value}
        maxFileSize={5242880} // 5MB
        onchange={onHandleChange}
      />
    </div>
  );
};

export default App;

customRender Prop

The customRender prop allows you to specify a custom React component for rendering the file. This gives you full control over the appearance and behavior of the file component. The custom component will receive the following props:

• onToggleMenu: (function) A function to toggle the menu display.
• data: (array) Additional data to pass to the custom component.
• tmpData: (array) Additional temp data to pass to the custom component to indicate incoming file upload.
• progressPercentage: (number) Progress percentage of the file upload (0 to 100).
• error: (array) Error message if file upload fails.
• isShowMenu: (boolean) Flag indicating whether the menu is currently shown.
• setIsShowMenu: (function) A function to toggle the menu display.
• onHandleDelete: (function) A function to handle the deletion of the file.
• MenuComponent: (React component) The menu component to be rendered alongside the file.

Example Usage

import React from 'react';

const CustomFileComponent = ({
  onToggleMenu,
  data,
  progressPercentage,
  error,
  isShowMenu,
  setIsShowMenu,
  onHandleDelete,
  MenuComponent
}) => {
  return (
    ...
  )
}

const App = () => {
  
  return (
    <Files
      project="project_name"
      name="files"
      value={value}
      maxFileSize={5242880} // 5MB
      onchange={onHandleChange}
      customRender={(props) => (
        <CustomFileComponent />
      )}
    />
  );
};

export default App;