export async function action({ request }: ActionFunctionArgs) {
  const uploadHandler = composeUploadHandlers(
   
    multipartUploadHandler,  // our custom upload handler
    createMemoryUploadHandler() // should pick up everything else when the first handler returns undefined
  );

  const formData = await parseMultipartFormData(request, uploadHandler);
}

import { BlockStack, Box, Button, DropZone, Select, Text, Thumbnail } from '@shopify/polaris';
import { Form } from '@remix-run/react';
import { useCallback, useState } from 'react';
import { NoteIcon } from '@shopify/polaris-icons';

const options = [
  { label: 'Default', value: 'default' },
  { label: 'Legacy', value: 'legacy' },
];

export default function UploadForm() {
  const [file, setFile] = useState<File>();
  const [selected, setSelected] = useState('default');

  const handleSelectChange = useCallback((value: string) => setSelected(value), []);
  const handleDropZoneDrop = useCallback(
    (_dropFiles: File[], acceptedFiles: File[], _rejectedFiles: File[]) =>
      setFile(acceptedFiles[0]),
    []
  );
  const fileUpload = !file && <DropZone.FileUpload actionHint="Accepts .csv" />;
  const uploadedFile = file && (
    <BlockStack>
      <Thumbnail
        size="small"
        alt={file.name}
        source={file.type === '.csv' ? window.URL.createObjectURL(file) : NoteIcon}
      />
      {file.name}{' '}
      <Text variant="bodySm" as="p">
        {file.size} bytes
      </Text>
    </BlockStack>
  );
  return (
    <div>
      <Text as="h4">Upload Form</Text>
      <p>Upload a CSV file</p>
      <Box paddingBlock={'200'}>
        <Form
          method="post"
          action="/app/subscribers/upload"
          encType="multipart/form-data"
          name="file-upload-form"
          id="file-upload-form"
        >
          <Select
            label="Upload data version"
            options={options}
            onChange={handleSelectChange}
            value={selected}
            name="upload-data-version"
            id="upload-data-version"
          />
          <Box paddingBlockStart={'200'}>
            <DropZone
              accept=".csv"
              type="file"
              errorOverlayText="File type must be .csv"
              allowMultiple={false}
              onDrop={handleDropZoneDrop}
              id="file-upload"
            >
              {uploadedFile}
              {fileUpload}
            </DropZone>
          </Box>
          <Box paddingBlockStart="200">
            <Button submit variant="primary">
              Upload
            </Button>
          </Box>
        </Form>
      </Box>
    </div>
  );
}