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

Comparing version 0.2.1 to 0.2.2

dist/lib/types.d.ts

		export declare type useFileUploadHook = {
		files: File[];
		fileNames: string[];
		fileTypes: string[];
		totalSize: string;
		@@ -6,0 +4,0 @@ totalSizeInBytes: number;

dist/lib/useFileUpload.js

		@@ -24,4 +24,2 @@ "use strict";
		const [files, setFilesState] = react_1.useState([]);
		const [fileNames, setFileNames] = react_1.useState([]);
		const [fileTypes, setFileTypes] = react_1.useState([]);
		const [totalSize, setTotalSize] = react_1.useState('');
		@@ -35,7 +33,2 @@ const [totalSizeInBytes, setTotalSizeInBytes] = react_1.useState(0);
		const filesArr = Array.from(files);
		const fileNames = filesArr.map((file) => file.name);
		const fileTypes = filesArr.map((file) => file.type);
		setFilesState(filesArr);
		setFileNames(fileNames);
		setFileTypes(fileTypes);
		handleSizes(filesArr);
		@@ -67,4 +60,2 @@ }
		files,
		fileNames,
		fileTypes,
		totalSize,
		@@ -71,0 +62,0 @@ totalSizeInBytes,

package.json

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

README.md

		# React useFileUpload

		A React Hook to make dealing with files in an upload scenario easier. It extracts away a lot of the boilerplate that comes with allowing users to add their own files to your web application.

		## API

		### files

		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.

		```
		File[]
		```

		### totalSize

		A string that will pretty print the total size of the files. For example, `1024KB`, `2MB`, `4GB` etc.

		```
		string
		```

		### totalSizeInBytes

		A number that represents the size of all of the files in bytes.

		```
		number
		```

		### createFormData

		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.

		```
		() => FormData
		```

		### onFileDrag

		A function that prevents you from writing boilerplate code in your input fields.

		```
		(e) => void
		```

		### removeFile

		```
		(index: number) => void
		```

		### setFiles

		```
		(files: FileList) => void
		```

src/lib/types.ts

		export type useFileUploadHook = {
		files: File[];
		fileNames: string[];
		fileTypes: string[];
		totalSize: string;
		@@ -6,0 +4,0 @@ totalSizeInBytes: number;

src/lib/useFileUpload.ts

		@@ -26,4 +26,2 @@ import { useState, useCallback } from 'react';
		const [files, setFilesState] = useState<File[]>([]);
		const [fileNames, setFileNames] = useState<string[]>([]);
		const [fileTypes, setFileTypes] = useState<string[]>([]);
		const [totalSize, setTotalSize] = useState('');
		@@ -37,9 +35,2 @@ const [totalSizeInBytes, setTotalSizeInBytes] = useState(0);
		const filesArr: File[] = Array.from(files);
		const fileNames: string[] = filesArr.map((file) => file.name);
		const fileTypes: string[] = filesArr.map((file) => file.type);

		setFilesState(filesArr);
		setFileNames(fileNames);
		setFileTypes(fileTypes);

		handleSizes(filesArr);
		@@ -76,4 +67,2 @@ }
		files,
		fileNames,
		fileTypes,
		totalSize,
		@@ -80,0 +69,0 @@ totalSizeInBytes,

New alerts