Function DragDropComponent

packages/shared/src/components/fields/DragDrop.tsx:142–328

({
  onFilesDrop,
  validation = {},
  errorMessages = {},
  disabled = false,
  className,
  state,
  inputRef,
  isCompactList,
  ctaSize,
  renderCta,
  isCopyBold,
  dragDropDescription = 'Drag & Drop your CV or',
  ctaLabelDesktop = 'Upload CV',
  ctaLabelMobile = 'Upload CV',
  uploadIcon,
  showRemove,
  fullClick = false,
}: DragDropProps)

  'relative flex flex-1 rounded-10 border border-dashed border-border-subtlest-secondary';

function DragDropComponent({
  onFilesDrop,
  validation = {},
  errorMessages = {},
  disabled = false,
  className,
  state,
  inputRef,
  isCompactList,
  ctaSize,
  renderCta,
  isCopyBold,
  dragDropDescription = 'Drag & Drop your CV or',
  ctaLabelDesktop = 'Upload CV',
  ctaLabelMobile = 'Upload CV',
  uploadIcon,
  showRemove,
  fullClick = false,
}: DragDropProps): ReactElement {
  const [filenames, setFilenames] = useState<string[]>([]);
  const isLaptop = useViewSize(ViewSize.Laptop);
  const { displayToast } = useToastNotification();
  const isError = state === 'error';

  const { validateFiles } = useFileValidation(validation, errorMessages);

  const handleFiles = (files: FileList | null) => {
    if (!files || files.length === 0) {
      return;
    }

    const { validFiles, errors } = validateFiles(files);

    if (errors.length > 0) {
      const first = errors[0];
      const fileName = first.file ? ` (${first.file.name})` : '';
      displayToast(`${first.message}${fileName}`);
      return;
    }

    setFilenames(validFiles.map((f) => f.name));
    onFilesDrop(validFiles, errors.length > 0 ? errors : undefined);
  };

  const { input, openFileInput } = useFileInput({
    inputRef,
    onFiles: handleFiles,
    accept: validation.acceptedTypes,
    multiple: validation.multiple,
    disabled,
  });

  const {
    isDragOver,
    isDragValid,
    handleDragEnter,
    handleDragOver,
    handleDragLeave,