FileUpload

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { MessageBar } from "@coreai-ds/react-components";
import { MessageBarBody } from "@coreai-ds/react-components";
import { MessageBarTitle } from "@coreai-ds/react-components";
import { FileUpload } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";

export const Default = () => {
    const maxFileSize = 5 * 1024 * 1024;
    const acceptedFileTypes = {
        'application/pdf': ['.pdf'],
        'text/plain': ['.txt'],
        'image/png': ['.png'],
        'image/jpeg': ['.jpg', '.jpeg'],
    };
    const instructionsId = React.useId();
    const errorId = React.useId();
    const [names, setNames] = React.useState<string[]>([]);
    const [error, setError] = React.useState<string>();
    const styles = /* css */ `
      .file-upload-default-example {
        display: flex;
        flex-direction: column;
        max-width: 720px;
        padding: var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="file-upload-default-example">
          {error ? (<MessageBar id={errorId} intent="error">
              <MessageBarBody>
                <MessageBarTitle>Unable to add file</MessageBarTitle>
                {error}
              </MessageBarBody>
            </MessageBar>) : null}
          <FileUpload accept={acceptedFileTypes} ariaDescribedBy={error ? `${instructionsId} ${errorId}` : instructionsId} ariaLabel="Choose files" maxSize={maxFileSize} minSize={1} onDropAccepted={(added) => {
            setError(undefined);
            setNames(added.map((file) => file.name));
        }} onDropRejected={(rejections) => setError(rejections
            .map(({ file, errors }) => `${file.name}: ${errors.map(({ message }) => message).join(', ')}`)
            .join('; '))}>
            {({ isDragActive, isDragAccept, isDragReject }) => (<>
                <Text preset="body">
                  {isDragReject
                ? 'This file is not supported'
                : isDragAccept
                    ? 'Drop to add the file'
                    : isDragActive
                        ? 'Checking file…'
                        : 'Drag files here or click to browse'}
                </Text>
                <Text id={instructionsId} foreground={3} preset="bodyS">
                  PDF, TXT, PNG, or JPEG · Max 5 MB
                </Text>
              </>)}
          </FileUpload>
          {names.length > 0 ? <Text preset="bodyS">Selected: {names.join(', ')}</Text> : null}
        </div>
      </>);
};

export default Default;