Skip to main content

FileField

The FileField component allows users to upload files by clicking to select or dragging and dropping the file into the designated area. It includes validation for file extensions.

Example Usage​

import React, { useState } from 'react';
import { FileField } from '@ginger-society/ginger-ui';

export const Example = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (file: File | null) => {
    setSelectedFile(file);
  };

  return (
    <div>
      <FileField
        label="Driving License"
        onChange={handleFileChange}
        extensions={['jpg', 'png']}
      />
    </div>
  );
};

Props​

FileField​

PropTypeDescription
labelstringLabel for the file input.
onChange`(file: Filenull) => void`
extensionsstring[]Optional. Array of allowed file extensions (e.g., ['jpg', 'png']).

Example Usage​

Basic FileField​

import React, { useState } from 'react';
import { FileField } from '@ginger-society/ginger-ui';

const Example: React.FC = () => {
  const handleFileChange = (file: File | null) => {
    console.log('Selected file:', file);
  };

  return (
    <FileField label="Upload your file" onChange={handleFileChange} />
  );
};

export default Example;

FileField with Extensions​

import React, { useState } from 'react';
import { FileField } from '@ginger-society/ginger-ui';

const ExampleWithExtensions: React.FC = () => {
  const handleFileChange = (file: File | null) => {
    console.log('Selected file:', file);
  };

  return (
    <FileField
      label="Upload your image"
      onChange={handleFileChange}
      extensions={['jpg', 'png', 'gif']}
    />
  );
};

export default ExampleWithExtensions;