wix-style-react/src/FileUpload/docs/FileUpload.examples.js

wix-style-react

export const _structure = `
<FileUpload>
  {({ openFileUploadDialog }) => (
    <Button onClick={openFileUploadDialog} prefixIcon={<Icons.UploadExport />}>Upload a File</Button>
  )}
</FileUpload>;`;

export const _fileTypes = `
<StorybookComponents.Stack>
  <FileUpload accept=".jpeg,.gif,.png">
    {({ openFileUploadDialog }) => (
      <Button
        prefixIcon={<Icons.UploadExport />}
        onClick={openFileUploadDialog}
      >
        Upload Image
      </Button>
    )}
  </FileUpload>
  <FileUpload accept=".doc,.pdf">
    {({ openFileUploadDialog }) => (
      <Button
        prefixIcon={<Icons.UploadExport />}
        onClick={openFileUploadDialog}
      >
        Upload Document
      </Button>
    )}
  </FileUpload>
</StorybookComponents.Stack>;
`;

export const _multipleFiles = `
<FileUpload multiple>
  {({ openFileUploadDialog }) => (
    <Button onClick={openFileUploadDialog} prefixIcon={<Icons.UploadExport />}>
      Upload Files
    </Button>
  )}
</FileUpload>;`;

export const _triggerElements = `
<FileUpload multiple accept=".jpeg,.gif,.png">
  {({ openFileUploadDialog }) => (
    <AddItem
      size="large"
      subtitle="You can upload jpeg, png and gif files up to 5 mb size"
      onClick={openFileUploadDialog}
    >
      Upload Media
    </AddItem>
  )}
</FileUpload>;`;

export const _addImageCase = `
<FileUpload
  multiple
  accept=".jpeg,.gif,.png"
>
  {({ openFileUploadDialog }) => (
    <ImageViewer onAddImage={openFileUploadDialog}/>
  )}
</FileUpload>;`;

export const _attachmentsCase = `() => {
  const renderAddFileButton = (
    <FileUpload multiple>
      {({ openFileUploadDialog }) => (
        <TextButton
          size="tiny"
          onClick={openFileUploadDialog}
          prefixIcon={<Icons.AddSmall />}
        >
          Add
        </TextButton>
      )}
    </FileUpload>
  );

  return (
    <Box>
      <Card>
        <Card.Content>
          <Box direction="vertical">
            <Box width="100%" align="space-between" marginBottom="15px">
              <Text size="medium" secondary weight="bold">
                Attachments
              </Text>

              {renderAddFileButton}
            </Box>
            <Text light secondary>
              Need to attach files to this contact? Do it here.
            </Text>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
};
`;