Fix(next-app): FileUploaderInput #DS-1508

examples/next-with-app-router/src/app/fileuploader.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  FileUploader,
+  FileUploaderAttachment,
+  FileUploaderInput,
+  FileUploaderList,
+  SpiritFileUploaderAttachmentProps,
+  useFileQueue,
+} from '@lmc-eu/spirit-web-react';
+
+const FileuploaderTest = () => {
+  const [errorMessage, setErrorMessage] = useState<(string | Error)[]>([]);
+
+  const {
+    fileQueue: fileQueueWarning,
+    addToQueue: addToQueueWarning,
+    clearQueue: clearQueueWarning,
+    onDismiss: onDismissWarning,
+    findInQueue: findInQueueWarning,
+    updateQueue: updateQueueWarning,
+  } = useFileQueue();
+
+  const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => (
+    <FileUploaderAttachment key={id} id={id} {...props} />
+  );
+
+  return (
+    <FileUploader
+      addToQueue={(key, file) => {
+        return addToQueueWarning(key, file);
+      }}
+      clearQueue={clearQueueWarning}
+      fileQueue={fileQueueWarning}
+      findInQueue={findInQueueWarning}
+      id="file-uploader-validation-states-warning"
+      onDismiss={onDismissWarning}
+      updateQueue={updateQueueWarning}
+    >
+      <FileUploaderInput
+        helperText="Max file size is 50 kb"
+        id="file-uploader-validation-states-warning-input"
+        label="Label"
+        labelText="or drag and drop here"
+        linkText="Upload your file"
+        name="attachmentsWarning"
+        onError={(error) => {
+          setErrorMessage((prevErrors) => [...prevErrors, error]);
+        }}
+        validationText={`${errorMessage.join(', ')}`}
+        validationState="warning"
+        isRequired
+        isMultiple
+        maxFileSize={51200} // 50 kb
+        // add onInput callback should solve issue if upload files by select them (not for drag and drop)
+        // onInput={() => setErrorMessage([])}
+      />
+      <FileUploaderList
+        attachmentComponent={attachmentComponent}
+        id="file-uploader-validation-states-warning-attachment"
+        inputName="attachmentsWarning"
+        label="Attachments"
+      />
+    </FileUploader>
+  );
+};
+
+export default FileuploaderTest;

examples/next-with-app-router/src/app/page.tsx

@@ -1,6 +1,6 @@
-import { Heading } from '@lmc-eu/spirit-web-react';
 import { NextPage } from 'next';
+import FileuploaderTest from '@/app/fileuploader';
 
-const Home: NextPage = () => <Heading size="large">Spirit App Router</Heading>;
+const Home: NextPage = () => <FileuploaderTest />;
 
 export default Home;

packages/web-react/src/components/FileUploader/FileUploaderInput.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDeprecationMessage, useStyleProps } from '../../hooks';
 import { SpiritFileUploaderInputProps } from '../../types';
 import { HelperText, ValidationText, useAriaIds } from '../Field';
@@ -11,6 +11,7 @@ import { useFileUploaderInput } from './useFileUploaderInput';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
 
 const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
+  const [isDragAndDropSupported, setIsDragAndDropSupported] = useState(false);
   const {
     accept,
     'aria-describedby': ariaDescribedBy = '',
@@ -34,10 +35,6 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     validationText,
     ...restProps
   } = props;
-
-  const isDragAndDropSupported =
-    typeof document !== 'undefined' ? 'draggable' in document.createElement('span') : false;
-
   const {
     isDisabledByQueueLimitBehavior,
     isDragging,
@@ -67,9 +64,12 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     validationState,
   });
   const { styleProps, props: transferProps } = useStyleProps(restProps);
-
   const [ids, register] = useAriaIds(ariaDescribedBy);
 
+  useEffect(() => {
+    setIsDragAndDropSupported('draggable' in document.createElement('span'));
+  }, []);
+
   useDeprecationMessage({
     method: 'custom',
     trigger: !id,