use-tus 0.2.5 → 0.5.0

package/README.md

@@ -3,7 +3,7 @@
 </h3>
 
 <p align="center">
-  React hooks for resumable file uploads using <a href="https://github.com/tus/tus-js-client">tus-js-client</a>.
+  React hooks for resumable file uploads using <a href="https://github.com/tus/tus-js-client">tus</a>.
 </p>
 
 <p align="center">
@@ -15,7 +15,6 @@
 ## Features
 - Resumable file uploads on react.
 - Managing the [Upload](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusuploadfile-options) by using context.
-- One dependency ([tus-js-client](https://github.com/tus/tus-js-client)).
 - TypeScript support.
 
 ## Demo
@@ -25,12 +24,12 @@ You can try the [use-tus demo](https://kqito.github.io/use-tus/?path=/story/uset
 ## Installation
 You can install the package from npm.
 ```sh
-npm install use-tus
+npm install use-tus tus-js-client
 ```
 
 or
 ```sh
-yarn add use-tus
+yarn add use-tus tus-js-client
 ```
 
 ## Usage
@@ -48,8 +47,7 @@ const App = () => (
 const Uploader = () => {
   const { upload, setUpload, isSuccess, error, remove } = useTus();
 
-  const handleSetUpload = useCallback(
-    (event) => {
+  const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files.item(0);
 
       if (!file) {
@@ -91,7 +89,7 @@ const Uploader = () => {
 ## API
 ### `useTus` hooks
 
-```js
+```tsx
 const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cacheKey, autoAbort, autoStart });
 ```
 
@@ -128,7 +126,7 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cach
 
 ### `TusClientProvider`
 
-```js
+```tsx
 () => (
   <TusClientProvider>
     {children}
@@ -144,23 +142,212 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cach
 - `canStoreURLs` (type: `boolean | undefined`)
   - A boolean indicating whether the current environment allows storing URLs enabling the corresponding upload to be resumed. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tuscanstoreurls)
 
-- `defaultOptions` (type: `tus.DefaltOptions | undefined`)
+- `defaultOptions` (type: `(file: tus.Upload['file']) => tus.DefaltOptions | undefined`)
   - An object containing the default options used when creating a new upload. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusdefaultoptions)
 
+### `useTusClient`
+
+```tsx
+const { state, removeUpload, reset } = useTusClient();
+```
+`useTusClient` is a hooks that can be used to retrieve and reset the state of a `TusClientProvider`.
+
+### Returns
+- `state` (type: `{ [cacheKey: string]: UploadState | undefined }`)
+  - Upload information associated with cacheKey
+
+- `removeUpload` (type: `(cacheKey: string) => void`)
+  - Remove the upload instance associated with the specified cacheKey.
+
+- `reset` (type: `() => void`)
+  - Initialize the value of TusClientProvider
+
 ## Examples
+The following are some example of how to use `use-tus`.
+
+Note that the `TusClientProvider` must be specified as the parent or higher element.
+
+### Uploading a file
+The setUpload and `upload.start` functions can be used to perform resumable file uploads.
+
+```tsx
+import { useTus } from 'use-tus'
+
+const Uploader = () => {
+  const { upload, setUpload } = useTus();
+
+  const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files.item(0);
+
+      if (!file) {
+        return;
+      }
+
+      setUpload(file, {
+        endpoint: 'https://tusd.tusdemo.net/files/',
+        metadata: {
+          filename: file.name,
+          filetype: file.type,
+        },
+      });
+    },
+    [setUpload]
+  );
+
+  const handleStart = useCallback(() => {
+    if (!upload) {
+      return;
+    }
+
+    // Start upload the file.
+    upload.start();
+  }, [upload]);
+
+  return (
+    <div>
+      <input type="file" onChange={handleSetUpload} />
+      <button type="button" onClick={handleStart}>
+        Upload
+      </button>
+    </div>
+  );
+};
+```
+
+It is also possible to automatically upload files after setUpload by specifying the `autoStart` option.
+
+```tsx
+import { useTus } from 'use-tus'
+
+const Uploader = () => {
+  const { upload, setUpload } = useTus({ autoStart: true });
+
+  const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files.item(0);
+
+      if (!file) {
+        return;
+      }
+
+      setUpload(file, {
+        endpoint: 'https://tusd.tusdemo.net/files/',
+        metadata: {
+          filename: file.name,
+          filetype: file.type,
+        },
+      });
+    },
+    [setUpload]
+  );
+  return (
+    <input type="file" onChange={handleSetUpload} />
+  );
+};
+```
+
+### Aborting a file upload
+You can abort the upload by using the `upload.abort` function.
+
+```tsx
+import { useTus } from 'use-tus'
+
+const Aborter = () => {
+  const { upload } = useTus();
+
+  const handleAbort = useCallback(() => {
+    if (!upload) {
+      return;
+    }
+
+    upload.abort();
+  }, [upload]);
+
+  return (
+    <div>
+      <button type="button" onClick={handleAbort}>
+        Abort
+      </button>
+    </div>
+  );
+};
+```
+
+You can also specify the `autoAbort` option to automatically stop uploads when unmounting hooks.
+
+```tsx
+import { useTus } from 'use-tus'
+
+const Uploader = () => {
+  const { upload, setUpload } = useTus({ autoAbort: true });
+
+  // omitted...
+};
+```
+
+## Default options of upload
+You can specify default options in the `defaultOptions` props of the `TusClientProvider`.
+
+```tsx
+import { useTus, DefaultOptions, TusClientProvider } from 'use-tus'
+
+const defaultOptions: DefaultOptions = (contents) => {
+  const file = contents instanceof File ? contents : undefined;
+
+  return {
+    endpoint: 'https://tusd.tusdemo.net/files/',
+    metadata: file
+      ? {
+          filename: file.name,
+          filetype: file.type,
+        }
+      : undefined,
+  };
+};
+
+const App = () => (
+  <TusClientProvider defaultOptions={defaultOptions}>
+    <Uploader />
+  </TusClientProvider>
+);
+
+const Uploader = () => {
+  const { setUpload } = useTus({ autoAtart: true });
+
+  const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files.item(0);
+
+      if (!file) {
+        return;
+      }
+
+      // You no longer need to specify the options associated with upload.
+      // If specified, it will override defaultOptions.
+      setUpload(file);
+    },
+    [setUpload]
+  );
+
+  return (
+    <div>
+      <input type="file" onChange={handleSetUpload} />
+    </div>
+  );
+};
+```
+
 ### Specify upload key
-If you specify `cacheKey` as an argument to useTus, you can get the `upload` associated with it. This is useful for resuming uploads, etc.
+If you specify `cacheKey` as an argument to useTus, you can get the `upload` associated with it. This is useful for cross-page file uploads.
 
-```js
-const SelectFileComponent = (file) => {
+```tsx
+const SelectFileComponent = (file: File) => {
   // Create upload accosiated with 'upload-thumbnail' key
-  const { setUpload } = useTus({cacheKey: 'upload-thumbnail'})
+  const { setUpload } = useTus({ cacheKey: 'upload-thumbnail' })
 
   setUpload(file)
 }
 
 const UploadFileComponent = () => {
-  const { upload } = useTus({cacheKey: 'upload-thumbnail'})
+  const { upload } = useTus({ cacheKey: 'upload-thumbnail' })
 
   upload.start()
 }

package/dist/TusClientProvider/TusClientProvider.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
-import { TusConfigs } from '../core/tusHandler';
-export declare type TusClientProviderProps = Readonly<TusConfigs>;
-export declare const TusClientProvider: FC<TusClientProviderProps>;
+import { FC } from 'react';
+import { TusConfigs } from '../core/tusHandler';
+export declare type TusClientProviderProps = Readonly<TusConfigs>;
+export declare const TusClientProvider: FC<TusClientProviderProps>;

package/dist/TusClientProvider/TusController.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { TusConfigs } from '../core/tusHandler';
-export declare type TusControllerProps = Readonly<TusConfigs>;
-export declare const TusController: FC<TusControllerProps>;
+import { FC } from 'react';
+import { TusConfigs } from '../core/tusHandler';
+export declare type TusControllerProps = Readonly<TusConfigs>;
+export declare const TusController: FC<TusControllerProps>;

package/dist/TusClientProvider/index.d.ts

@@ -1,2 +1,2 @@
-export { TusClientProvider } from './TusClientProvider';
-export type { TusClientProviderProps } from './TusClientProvider';
+export { TusClientProvider } from './TusClientProvider';
+export type { TusClientProviderProps } from './TusClientProvider';

package/dist/__stories__/Basic.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/__stories__/CacheKey.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CacheKey: () => JSX.Element;

package/dist/__stories__/DefaultOptions.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const WithDefaultOptions: () => JSX.Element;

package/dist/__stories__/components/BasicButton/BasicButton.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+declare type BasicButtonProps = {
+    onClick: ComponentProps<'button'>['onClick'];
+    title: string;
+    disabled?: ComponentProps<'button'>['disabled'];
+    styleColor?: 'primary' | 'basic' | 'error';
+};
+export declare const BasicButton: import("react").ForwardRefExoticComponent<BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/__stories__/components/BasicButton/index.d.ts

@@ -0,0 +1 @@
+export { BasicButton } from './BasicButton';

package/dist/__stories__/components/LoadingCircle/LoadingCircle.d.ts

@@ -0,0 +1,2 @@
+import type { VFC } from 'react';
+export declare const LoadingCircle: VFC;

package/dist/__stories__/components/LoadingCircle/index.d.ts

@@ -0,0 +1 @@
+export { LoadingCircle } from './LoadingCircle';

package/dist/__stories__/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import { VFC } from 'react';
+declare type ProgressBarProps = {
+    title?: string;
+    value?: number;
+};
+export declare const ProgressBar: VFC<ProgressBarProps>;
+export {};

package/dist/__stories__/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';

package/dist/__stories__/components/UploadIcon/UploadIcon.d.ts

@@ -0,0 +1,2 @@
+import { VFC } from 'react';
+export declare const UploadIcon: VFC;

package/dist/__stories__/components/UploadIcon/index.d.ts

@@ -0,0 +1 @@
+export { UploadIcon } from './UploadIcon';

package/dist/__stories__/constants.d.ts

@@ -0,0 +1 @@
+export declare const TUS_DEMO_ENDPOINT: "https://tusd.tusdemo.net/files/";

package/dist/__tests__/TusClientProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useTus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/utils/getBlob.d.ts

@@ -0,0 +1 @@
+export declare const getBlob: (str: string) => Blob;

package/dist/__tests__/utils/mock.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="jest" />
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+export declare const createConsoleErrorMock: () => jest.SpyInstance<void, [message?: any, ...optionalParams: any[]]>;
+export declare const insertEnvValue: (value: NodeJS.Process['env']) => void;

package/dist/core/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const ERROR_MESSAGES: {
-    tusClientHasNotFounded: string;
-    tusIsNotSupported: string;
-};
+export declare const ERROR_MESSAGES: {
+    tusClientHasNotFounded: string;
+    tusIsNotSupported: string;
+};

package/dist/core/contexts.d.ts

@@ -1,7 +1,7 @@
-import type { Dispatch } from 'react';
-import { TusClientActions } from './tucClientActions';
-import { TusClientState } from './tusClientReducer';
-export declare const TusClientStateContext: import("react").Context<TusClientState | undefined>;
-export declare const TusClientDispatchContext: import("react").Context<Dispatch<TusClientActions> | undefined>;
-export declare const useTusClientState: () => TusClientState;
-export declare const useTusClientDispatch: () => Dispatch<TusClientActions>;
+import type { Dispatch } from 'react';
+import { TusClientActions } from './tucClientActions';
+import { TusClientState } from './tusClientReducer';
+export declare const TusClientStateContext: import("react").Context<TusClientState | undefined>;
+export declare const TusClientDispatchContext: import("react").Context<Dispatch<TusClientActions> | undefined>;
+export declare const useTusClientState: () => TusClientState;
+export declare const useTusClientDispatch: () => Dispatch<TusClientActions>;

package/dist/core/tucClientActions.d.ts

@@ -1,47 +1,50 @@
-import type { Upload } from 'tus-js-client';
-import { TusConfigs } from './tusHandler';
-export declare type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof updateTusHandlerOptions>;
-export declare const insertUploadInstance: (cacheKey: string, upload: Upload) => {
-    readonly type: "INSERT_UPLOAD_INSTANCE";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly uploadState: {
-            readonly upload: Upload;
-            readonly isSuccess: false;
-            readonly isAborted: false;
-        };
-    };
-};
-export declare const updateSuccessUpload: (cacheKey: string) => {
-    readonly type: "UPDATE_SUCCESS_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-    };
-};
-export declare const updateErrorUpload: (cacheKey: string, error?: Error | undefined) => {
-    readonly type: "UPDATE_ERROR_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly error: Error | undefined;
-    };
-};
-export declare const updateIsAbortedUpload: (cacheKey: string, isAborted: boolean) => {
-    readonly type: "UPDATE_IS_ABORTED_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly isAborted: boolean;
-    };
-};
-export declare const removeUploadInstance: (cacheKey: string) => {
-    readonly type: "REMOVE_UPLOAD_INSTANCE";
-    readonly payload: {
-        readonly cacheKey: string;
-    };
-};
-export declare const updateTusHandlerOptions: (payload: TusConfigs) => {
-    readonly type: "UPDATE_TUS_HANDLER_OPTIONS";
-    readonly payload: Partial<{
-        canStoreURLs: boolean;
-        defaultOptions: import("tus-js-client").UploadOptions;
-    }>;
-};
+import type { Upload } from 'tus-js-client';
+import { TusConfigs } from './tusHandler';
+export declare type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof resetClient | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof updateTusHandlerOptions>;
+export declare const insertUploadInstance: (cacheKey: string, upload: Upload) => {
+    readonly type: "INSERT_UPLOAD_INSTANCE";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly uploadState: {
+            readonly upload: Upload;
+            readonly isSuccess: false;
+            readonly isAborted: false;
+        };
+    };
+};
+export declare const updateSuccessUpload: (cacheKey: string) => {
+    readonly type: "UPDATE_SUCCESS_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+    };
+};
+export declare const updateErrorUpload: (cacheKey: string, error?: Error | undefined) => {
+    readonly type: "UPDATE_ERROR_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly error: Error | undefined;
+    };
+};
+export declare const updateIsAbortedUpload: (cacheKey: string, isAborted: boolean) => {
+    readonly type: "UPDATE_IS_ABORTED_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly isAborted: boolean;
+    };
+};
+export declare const removeUploadInstance: (cacheKey: string) => {
+    readonly type: "REMOVE_UPLOAD_INSTANCE";
+    readonly payload: {
+        readonly cacheKey: string;
+    };
+};
+export declare const resetClient: () => {
+    readonly type: "RESET_CLIENT";
+};
+export declare const updateTusHandlerOptions: (payload: TusConfigs) => {
+    readonly type: "UPDATE_TUS_HANDLER_OPTIONS";
+    readonly payload: Partial<{
+        canStoreURLs: boolean;
+        defaultOptions: import("./tusHandler").DefaultOptions;
+    }>;
+};

package/dist/core/tusClientReducer.d.ts

@@ -1,18 +1,18 @@
-import type { Reducer } from 'react';
-import type { Upload } from 'tus-js-client';
-import { TusClientActions } from './tucClientActions';
-import { TusHandler } from './tusHandler';
-export declare type UploadState = {
-    upload: Upload | undefined;
-    isSuccess: boolean;
-    isAborted: boolean;
-    error?: Error;
-};
-export declare type TusClientState = {
-    uploads: {
-        [cacheKey: string]: UploadState | undefined;
-    };
-    tusHandler: TusHandler;
-};
-export declare const tusClientReducer: Reducer<TusClientState, TusClientActions>;
-export declare const tusClientInitialState: TusClientState;
+import type { Reducer } from 'react';
+import type { Upload } from 'tus-js-client';
+import { TusClientActions } from './tucClientActions';
+import { TusHandler } from './tusHandler';
+export declare type UploadState = {
+    upload: Upload | undefined;
+    isSuccess: boolean;
+    isAborted: boolean;
+    error?: Error;
+};
+export declare type TusClientState = {
+    uploads: {
+        [cacheKey: string]: UploadState | undefined;
+    };
+    tusHandler: TusHandler;
+};
+export declare const tusClientReducer: Reducer<TusClientState, TusClientActions>;
+export declare const tusClientInitialState: TusClientState;

package/dist/core/tusHandler.d.ts

@@ -1,11 +1,17 @@
-import * as tus from 'tus-js-client';
-export declare type Tus = typeof tus;
-export declare type TusConfigs = Partial<{
-    canStoreURLs: boolean;
-    defaultOptions: tus.UploadOptions;
-}>;
-export declare class TusHandler {
-    private tus;
-    constructor(tusConfigs?: TusConfigs);
-    get getTus(): typeof tus;
-}
+import * as tus from 'tus-js-client';
+import { Upload } from 'tus-js-client';
+export declare type DefaultOptions = (file: Upload['file']) => tus.UploadOptions;
+export declare type TusConfigs = Partial<{
+    canStoreURLs: boolean;
+    defaultOptions: DefaultOptions;
+}>;
+export declare type Tus = Readonly<Omit<typeof tus, 'defaultOptions'> & Required<TusConfigs>>;
+export declare const initialDefaultOptions: DefaultOptions;
+export declare class TusHandler {
+    private tus;
+    constructor(tusConfigs?: TusConfigs);
+    get getTus(): Readonly<Omit<typeof tus, "defaultOptions"> & Required<Partial<{
+        canStoreURLs: boolean;
+        defaultOptions: DefaultOptions;
+    }>>>;
+}

package/dist/core/types.d.ts

@@ -1,8 +1,8 @@
-import { Upload } from 'tus-js-client';
-export declare type BaseUseTusResult = {
-    upload?: Upload;
-    setUpload: (file: Upload['file'], options?: Upload['options']) => void;
-    isSuccess: boolean;
-    error?: Error;
-};
-export declare type BaseUseTusOptions = {};
+import { Upload } from 'tus-js-client';
+export declare type BaseUseTusResult = {
+    upload?: Upload;
+    setUpload: (file: Upload['file'], options?: Upload['options']) => void;
+    isSuccess: boolean;
+    error?: Error;
+};
+export declare type BaseUseTusOptions = {};