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

Comparing version 0.2.2 to 0.3.0

dist/lib/types.d.ts

@@ -5,6 +5,8 @@ export declare type useFileUploadHook = {
     totalSizeInBytes: number;
+    createFormData: () => FormData;
+    getFileNames: () => string[];
+    getFileTypes: () => string[];
     onFileDrag: (e: Event) => void;
+    removeFile: (file: number | string) => void;
     setFiles: (files: FileList) => void;
-    removeFile: (index: number) => void;
-    createFormData: () => FormData;
 };

dist/lib/useFileUpload.d.ts

 import { useFileUploadHook } from './types';
+/**
+ * @ReactHook
+ */
 export declare const useFileUpload: () => useFileUploadHook;

dist/lib/useFileUpload.js

@@ -5,2 +5,5 @@ "use strict";
 const react_1 = require("react");
+/**
+ * @function bytesToSize
+ */
 const bytesToSize = (bytes) => {
@@ -16,5 +19,11 @@ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 };
+/**
+ * @function getTotalSizeInBytes
+ */
 const getTotalSizeInBytes = (files) => {
     return files.reduce((acc, file) => (acc += file.size), 0);
 };
+/**
+ * @function onFileDrag
+ */
 const onFileDrag = (e) => {
@@ -24,2 +33,5 @@ e.stopPropagation();
 };
+/**
+ * @ReactHook
+ */
 const useFileUpload = () => {
@@ -29,2 +41,3 @@ const [files, setFilesState] = react_1.useState([]);
     const [totalSizeInBytes, setTotalSizeInBytes] = react_1.useState(0);
+    /** @function setFiles */
     const setFiles = react_1.useCallback((files) => {
@@ -39,2 +52,3 @@ if (!(files instanceof FileList)) {
     }, []);
+    /** @function handleSizes */
     const handleSizes = react_1.useCallback((files) => {
@@ -46,10 +60,24 @@ const sizeInBytes = getTotalSizeInBytes(files);
     }, []);
-    const removeFile = react_1.useCallback((index) => {
-        if (typeof index !== 'number') {
-            console.error('argument supplied to removeFile must be of type: number.');
+    /** @function getFileNames */
+    const getFileNames = react_1.useCallback(() => {
+        return files.map((file) => file.name);
+    }, [files]);
+    /** @function getFileTypes */
+    const getFileTypes = react_1.useCallback(() => {
+        return files.map((file) => file.type);
+    }, [files]);
+    /** @function removeFile */
+    const removeFile = react_1.useCallback((file) => {
+        if (['number', 'string'].includes(typeof file)) {
+            console.error('argument supplied to removeFile must be of type number or string.');
+            return;
         }
+        if (typeof file === 'string') {
+            setFilesState(files.filter((_file) => _file.name !== file));
+        }
         else {
-            setFilesState(files.filter((file, i) => i !== index));
+            setFilesState(files.filter((_file, i) => i !== file));
         }
     }, []);
+    /** @function createFormData */
     const createFormData = react_1.useCallback(() => {
@@ -66,8 +94,10 @@ const formData = new FormData();
         totalSizeInBytes,
+        createFormData,
+        getFileNames,
+        getFileTypes,
         onFileDrag,
+        removeFile,
         setFiles,
-        removeFile,
-        createFormData,
     };
 };
 exports.useFileUpload = useFileUpload;

package.json

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

README.md

@@ -9,3 +9,3 @@ # React useFileUpload
 
-An array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects. When files are attached, they are converted from a FileList, to an array.
+An array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
 
@@ -34,3 +34,3 @@ ```
 
-A function that will prepare the `files` to be sent to an external API by creating a new [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object, appending the `files` to it, and returning that same FormData object.
+A function that will prepare the `files` to be sent to an external API by creating a new [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object, appending the `files` to it, and then returning the FormData object.
 
@@ -41,5 +41,5 @@ ```
 
-### onFileDrag
+### handleFileDDEvent
 
-A function that prevents you from writing boilerplate code in your input fields.
+A function that prevents you from writing boilerplate code, and will call `e.preventDefault` and `e.stopPropagation` behind the scenes.
 
@@ -52,4 +52,6 @@ ```
 
+A function that accepts a number(_index_) or string(_name of the file_) that will be used to remove a specific file from the `files` array.
+
 ```
-(index: number) => void
+(file: number | string) => void
 ```
@@ -59,4 +61,6 @@
 
+A function that accepts a FileList as an argument, and converts it to an array.
+
 ```
 (files: FileList) => void
 ```

src/__tests__/useFileUpload.test.ts

 import { renderHook, act } from '@testing-library/react-hooks';
 import { useFileUpload } from '../lib/useFileUpload';
 
+/**
+ * @todo
+ * - figure out an easy way to mock FileList
+ */
 describe('useFileUpload', () => {
@@ -8,4 +12,2 @@ it('Its initial values are correct', () => {
     expect(result.current.files).toStrictEqual([]);
-    expect(result.current.fileNames).toStrictEqual([]);
-    expect(result.current.fileTypes).toStrictEqual([]);
     expect(result.current.totalSize).toBe('');
@@ -15,8 +17,10 @@ expect(result.current.totalSizeInBytes).toBe(0);
 
-  it('exports four functions', () => {
+  it('exports six 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.onFileDrag).toBe('function');
+    expect(typeof result.current.removeFile).toBe('function');
     expect(typeof result.current.setFiles).toBe('function');
-    expect(typeof result.current.removeFile).toBe('function');
-    expect(typeof result.current.createFormData).toBe('function');
   });
@@ -23,0 +27,0 @@

src/lib/types.ts

@@ -5,6 +5,8 @@ export type useFileUploadHook = {
   totalSizeInBytes: number;
+  createFormData: () => FormData;
+  getFileNames: () => string[];
+  getFileTypes: () => string[];
   onFileDrag: (e: Event) => void;
+  removeFile: (file: number | string) => void;
   setFiles: (files: FileList) => void;
-  removeFile: (index: number) => void;
-  createFormData: () => FormData;
 };

src/lib/useFileUpload.ts

 import { useState, useCallback } from 'react';
 import { useFileUploadHook } from './types';
 
+/**
+ * @function bytesToSize
+ */
 const bytesToSize = (bytes: number): string => {
@@ -15,2 +18,5 @@ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 
+/**
+ * @function getTotalSizeInBytes
+ */
 const getTotalSizeInBytes = (files: File[]): number => {
@@ -20,2 +26,5 @@ return files.reduce((acc, file: File) => (acc += file.size), 0);
 
+/**
+ * @function onFileDrag
+ */
 const onFileDrag = (e: Event) => {
@@ -26,2 +35,5 @@ e.stopPropagation();
 
+/**
+ * @ReactHook
+ */
 export const useFileUpload = (): useFileUploadHook => {
@@ -32,2 +44,3 @@ const [files, setFilesState] = useState<File[]>([]);
 
+  /** @function setFiles */
   const setFiles = useCallback((files: FileList): void => {
@@ -42,2 +55,3 @@ if (!(files instanceof FileList)) {
 
+  /** @function handleSizes */
   const handleSizes = useCallback((files: File[]): void => {
@@ -50,10 +64,27 @@ const sizeInBytes = getTotalSizeInBytes(files);
 
-  const removeFile = useCallback((index: number): void => {
-    if (typeof index !== 'number') {
-      console.error('argument supplied to removeFile must be of type: number.');
+  /** @function getFileNames */
+  const getFileNames = useCallback((): string[] => {
+    return files.map((file) => file.name);
+  }, [files]);
+
+  /** @function getFileTypes */
+  const getFileTypes = useCallback((): string[] => {
+    return files.map((file) => file.type);
+  }, [files]);
+
+  /** @function removeFile */
+  const removeFile = useCallback((file: number | string): void => {
+    if (['number', 'string'].includes(typeof file)) {
+      console.error('argument supplied to removeFile must be of type number or string.');
+      return;
+    }
+
+    if (typeof file === 'string') {
+      setFilesState(files.filter((_file: File) => _file.name !== file));
     } else {
-      setFilesState(files.filter((file: File, i: number) => i !== index));
+      setFilesState(files.filter((_file: File, i) => i !== file));
     }
   }, []);
 
+  /** @function createFormData */
   const createFormData = useCallback((): FormData => {
@@ -73,7 +104,9 @@ const formData = new FormData();
     totalSizeInBytes,
+    createFormData,
+    getFileNames,
+    getFileTypes,
     onFileDrag,
+    removeFile,
     setFiles,
-    removeFile,
-    createFormData,
   };
 };

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

12417

increased by19.37%

Lines of code

249

increased by39.89%

Number of lines in readme file

62

increased by6.9%

No dependency changes