feat: add loadFileCollection imperative API (#4056)

Author: targos

src/component/loader/useLoadFiles.ts

@@ -85,8 +85,13 @@ export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
 
   const currentPreferences = preferences.current;
   const loadUserFiles = useCallback(
-    async (files: File[]) => {
-      if (onOpenMetaInformation && files.length === 1 && isMetaFile(files[0])) {
+    async (files: File[] | FileCollection) => {
+      if (
+        onOpenMetaInformation &&
+        Array.isArray(files) &&
+        files.length === 1 &&
+        isMetaFile(files[0])
+      ) {
         onOpenMetaInformation(files[0]);
         return;
       }
@@ -101,18 +106,22 @@ export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
         experimentalFeatures,
       };
 
-      const groupedFiles = await groupFiles(files);
-      const { nmriumArchiveFiles, fileCollection, metaFile } = groupedFiles;
-
-      if (nmriumArchiveFiles.length > 0) {
-        await Promise.all(
-          nmriumArchiveFiles.map((file) =>
-            loadNmriumArchives(file, parsingOptions),
-          ),
-        );
+      if (Array.isArray(files)) {
+        const groupedFiles = await groupFiles(files);
+        const { nmriumArchiveFiles, fileCollection, metaFile } = groupedFiles;
+
+        if (nmriumArchiveFiles.length > 0) {
+          await Promise.all(
+            nmriumArchiveFiles.map((file) =>
+              loadNmriumArchives(file, parsingOptions),
+            ),
+          );
+        }
+
+        await loadFileCollection(fileCollection, metaFile, parsingOptions);
+      } else {
+        await loadFileCollection(files, undefined, parsingOptions);
       }
-
-      await loadFileCollection(fileCollection, metaFile, parsingOptions);
     },
     [
       experimentalFeatures,
@@ -126,7 +135,7 @@ export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
   );
 
   return useCallback(
-    (files: File[]) => {
+    (files: File[] | FileCollection) => {
       dispatch({ type: 'SET_LOADING_FLAG', payload: { isLoading: true } });
 
       loadUserFiles(files)

src/component/main/NMRiumRefAPI.ts

@@ -1,3 +1,4 @@
+import type { FileCollection } from 'file-collection';
 import type { ForwardedRef, RefObject } from 'react';
 import { useImperativeHandle } from 'react';
 
@@ -11,6 +12,7 @@ export interface NMRiumRefAPI {
   getSpectraViewerAsBlob: () => BlobObject | null;
   getNMRiumFile: (option: SaveIncludeOptions) => Promise<Blob>;
   loadFiles: (files: File[]) => void;
+  loadFileCollection: (fileCollection: FileCollection) => void;
 }
 
 export function useNMRiumRefAPI(
@@ -29,6 +31,8 @@ export function useNMRiumRefAPI(
           : null;
       },
       loadFiles,
+      loadFileCollection: (fileCollection: FileCollection) =>
+        loadFiles(fileCollection),
       getNMRiumFile: (options) => createNmriumZip(options),
     }),
     [loadFiles, rootRef, createNmriumZip],

src/demo/views/RefAPI.tsx

@@ -1,3 +1,4 @@
+import { FileCollection } from 'file-collection';
 import { useCallback, useRef } from 'react';
 import { Button, DropZone } from 'react-science/ui';
 
@@ -7,7 +8,13 @@ import { saveAs } from '../../component/utility/save_as.ts';
 
 export default function RefAPI() {
   const nmriumRef = useRef<NMRiumRefAPI>(null);
-  const dropFileHandler = useCallback((dropFiles: File[]) => {
+  const dropLoadFileCollectionHandler = useCallback((dropFiles: File[]) => {
+    const fileCollection = new FileCollection();
+    void fileCollection.appendFileList(dropFiles).then(() => {
+      nmriumRef.current?.loadFileCollection(fileCollection);
+    });
+  }, []);
+  const dropLoadFilesHandler = useCallback((dropFiles: File[]) => {
     nmriumRef.current?.loadFiles(dropFiles);
   }, []);
 
@@ -49,8 +56,21 @@ export default function RefAPI() {
             flex: 3,
           }}
         >
-          <div style={{ flex: 3 }}>
-            <DropZone onDrop={dropFileHandler} emptyTitle="Drop data files" />
+          <div style={{ flex: 3, display: 'flex', flexDirection: 'column' }}>
+            <div style={{ flex: 1 }}>
+              <DropZone
+                onDrop={dropLoadFileCollectionHandler}
+                emptyTitle="Drop data files"
+                emptyDescription="To load with ref.loadFileCollection API"
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <DropZone
+                onDrop={dropLoadFilesHandler}
+                emptyTitle="Drop data files"
+                emptyDescription="To load with ref.loadFiles API"
+              />
+            </div>
           </div>
         </div>
       </div>