react-use-file-upload - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/lib/types.d.ts

 export declare type useFileUploadHook = {
     files: File[];
+    fileNames: string[];
+    fileTypes: string[];
     totalSize: string;
     totalSizeInBytes: number;
     createFormData: () => FormData;
-    getFileNames: () => string[];
-    getFileTypes: () => string[];
-    handleFileDDEvent: (e: Event) => void;
+    handleDragDropEvent: (e: Event) => void;
     removeFile: (file: number | string) => void;
     setFiles: (files: FileList) => void;
 };

dist/lib/useFileUpload.js

@@ -25,5 +25,5 @@ "use strict";
 /**
- * @function handleFileDDEvent
+ * @function handleDragDropEvent
  */
-const handleFileDDEvent = (e) => {
+const handleDragDropEvent = (e) => {
     e.stopPropagation();
@@ -37,14 +37,26 @@ e.preventDefault();
     const [files, setFilesState] = react_1.useState([]);
+    const [fileNames, setFileNames] = react_1.useState([]);
+    const [fileTypes, setFileTypes] = react_1.useState([]);
     const [totalSize, setTotalSize] = react_1.useState('');
     const [totalSizeInBytes, setTotalSizeInBytes] = react_1.useState(0);
+    react_1.useEffect(() => {
+        setFileNames(files.map((file) => file.name));
+        setFileTypes(files.map((file) => file.type));
+    }, [files]);
     /** @function setFiles */
-    const setFiles = react_1.useCallback((files) => {
-        if (!(files instanceof FileList)) {
-            console.error('argument supplied to setFiles must be of type: FileList');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const setFiles = react_1.useCallback((e) => {
+        var _a;
+        let filesArr = [];
+        if ((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.files) {
+            filesArr = Array.from(e.currentTarget.files);
         }
+        else if (e === null || e === void 0 ? void 0 : e.dataTransfer.files) {
+            filesArr = Array.from(e.dataTransfer.files);
+        }
         else {
-            const filesArr = Array.from(files);
-            setFilesState(filesArr);
-            handleSizes(filesArr);
+            console.error('Argument not recognized. Are you sure your passing setFiles an event object?');
         }
+        setFilesState(filesArr);
+        handleSizes(filesArr);
     }, []);
@@ -58,10 +70,2 @@ /** @function handleSizes */
     }, []);
-    /** @function getFileNames */
-    const getFileNames = () => {
-        return files.map((file) => file.name);
-    };
-    /** @function getFileTypes */
-    const getFileTypes = () => {
-        return files.map((file) => file.type);
-    };
     /** @function removeFile */
@@ -90,8 +94,8 @@ const removeFile = react_1.useCallback((file) => {
         files,
+        fileNames,
+        fileTypes,
         totalSize,
         totalSizeInBytes,
         createFormData,
-        getFileNames,
-        getFileTypes,
-        handleFileDDEvent,
+        handleDragDropEvent,
         removeFile,
@@ -98,0 +102,0 @@ setFiles,

package.json

 {
   "name": "react-use-file-upload",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "A React Hook to make dealing with file uploading easier.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -15,2 +15,18 @@ # React useFileUpload
 
+### fileNames
+
+An array containing just the names of the files
+
+```
+string[]
+```
+
+### fileTypes
+
+An array containing just the file types of the files.
+
+```
+string[]
+```
+
 ### totalSize
@@ -40,3 +56,3 @@
 
-### handleFileDDEvent
+### handleDragDropEvent
 
@@ -59,6 +75,6 @@ A function that prevents you from writing boilerplate code, and will call `e.preventDefault` and `e.stopPropagation` behind the scenes.
 
-A function that accepts a FileList as an argument, and converts it to an array.
+A function that accepts the event emitted from the input field or drop zone, and creates an array of File objects.
 
 ```
-(files: FileList) => void
+(e: Event) => void
 ```

src/__tests__/useFileUpload.test.ts

@@ -12,2 +12,4 @@ import { renderHook, act } from '@testing-library/react-hooks';
     expect(result.current.files).toStrictEqual([]);
+    expect(result.current.fileNames).toStrictEqual([]);
+    expect(result.current.fileTypes).toStrictEqual([]);
     expect(result.current.totalSize).toBe('');
@@ -17,8 +19,6 @@ expect(result.current.totalSizeInBytes).toBe(0);
 
-  it('exports six functions', () => {
+  it('exports four functions', () => {
     const { result } = renderHook(() => useFileUpload());
     expect(typeof result.current.createFormData).toBe('function');
-    expect(typeof result.current.getFileNames).toBe('function');
-    expect(typeof result.current.getFileTypes).toBe('function');
-    expect(typeof result.current.handleFileDDEvent).toBe('function');
+    expect(typeof result.current.handleDragDropEvent).toBe('function');
     expect(typeof result.current.removeFile).toBe('function');
@@ -25,0 +25,0 @@ expect(typeof result.current.setFiles).toBe('function');

src/lib/types.ts

 export type useFileUploadHook = {
   files: File[];
+  fileNames: string[];
+  fileTypes: string[];
   totalSize: string;
   totalSizeInBytes: number;
   createFormData: () => FormData;
-  getFileNames: () => string[];
-  getFileTypes: () => string[];
-  handleFileDDEvent: (e: Event) => void;
+  handleDragDropEvent: (e: Event) => void;
   removeFile: (file: number | string) => void;
   setFiles: (files: FileList) => void;
 };

src/lib/useFileUpload.ts

@@ -1,2 +0,2 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useFileUploadHook } from './types';
@@ -26,5 +26,5 @@
 /**
- * @function handleFileDDEvent
+ * @function handleDragDropEvent
  */
-const handleFileDDEvent = (e: Event) => {
+const handleDragDropEvent = (e: Event) => {
   e.stopPropagation();
@@ -39,14 +39,27 @@ e.preventDefault();
   const [files, setFilesState] = useState<File[]>([]);
+  const [fileNames, setFileNames] = useState<string[]>([]);
+  const [fileTypes, setFileTypes] = useState<string[]>([]);
   const [totalSize, setTotalSize] = useState('');
   const [totalSizeInBytes, setTotalSizeInBytes] = useState(0);
 
+  useEffect(() => {
+    setFileNames(files.map((file) => file.name));
+    setFileTypes(files.map((file) => file.type));
+  }, [files]);
+
   /** @function setFiles */
-  const setFiles = useCallback((files: FileList): void => {
-    if (!(files instanceof FileList)) {
-      console.error('argument supplied to setFiles must be of type: FileList');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const setFiles = useCallback((e: any): void => {
+    let filesArr: File[] = [];
+
+    if (e.currentTarget?.files) {
+      filesArr = Array.from(e.currentTarget.files);
+    } else if (e?.dataTransfer.files) {
+      filesArr = Array.from(e.dataTransfer.files);
     } else {
-      const filesArr: File[] = Array.from(files);
-      setFilesState(filesArr);
-      handleSizes(filesArr);
+      console.error('Argument not recognized. Are you sure your passing setFiles an event object?');
     }
+
+    setFilesState(filesArr);
+    handleSizes(filesArr);
   }, []);
@@ -62,12 +75,2 @@
 
-  /** @function getFileNames */
-  const getFileNames = () => {
-    return files.map((file) => file.name);
-  };
-
-  /** @function getFileTypes */
-  const getFileTypes = () => {
-    return files.map((file) => file.type);
-  };
-
   /** @function removeFile */
@@ -103,8 +106,8 @@ const removeFile = useCallback(
     files,
+    fileNames,
+    fileTypes,
     totalSize,
     totalSizeInBytes,
     createFormData,
-    getFileNames,
-    getFileTypes,
-    handleFileDDEvent,
+    handleDragDropEvent,
     removeFile,
@@ -111,0 +114,0 @@ setFiles,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13245

increased by6.06%

Lines of code

260

increased by2.36%

Number of lines in readme file

78

increased by25.81%

No dependency changes