diff options
author | Eugene Sokolov <eug-vs@keemail.me> | 2020-08-22 14:56:07 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-08-22 14:56:07 +0300 |
commit | 89f038c7a0ccf6de94516cba8499a0bc69f8dae1 (patch) | |
tree | 5e6dbd7ae5a9d0ce1b79921b2b44986bb13f1874 /src/hooks | |
parent | a42667af463b8c33a38b935b96d39582b543790b (diff) | |
parent | 93319d38e904535ce33a7868b3c1e0a2a4f33d65 (diff) | |
download | which-ui-89f038c7a0ccf6de94516cba8499a0bc69f8dae1.tar.gz |
Merge pull request #93 from which-ecosystem/avatar-uploads
Avatar uploads
Diffstat (limited to 'src/hooks')
-rw-r--r-- | src/hooks/useS3Preupload.tsx | 85 |
1 files changed, 0 insertions, 85 deletions
diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx deleted file mode 100644 index 651bfb6..0000000 --- a/src/hooks/useS3Preupload.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { useState, useCallback, useMemo } from 'react'; -import axios from 'axios'; -import Bluebird from 'bluebird'; -import Compressor from 'compressorjs'; -import { get } from '../requests'; - - -interface ProgressEvent { - loaded: number; - total: number; -} - -interface Hook { - setValue: (value: File | string | undefined) => void; - isReady: boolean; - resolve: () => Promise<string>; - progress: number; -} - - -const compressFile = (file: File, quality = 0.6): Promise<Blob> => { - return new Promise((resolve, reject) => { - return new Compressor(file, { - success: result => resolve(result), - error: err => reject(err), - quality - }); - }); -}; - -export default (): Hook => { - const [url, setUrl] = useState<string>(); - const [file, setFile] = useState<File>(); - const [progress, setProgress] = useState<number>(0); - - const isReady = useMemo(() => Boolean(file || url), [file, url]); - - const setValue: Hook['setValue'] = useCallback(value => { - if (value instanceof File) { - setFile(value); - setUrl(undefined); - } else { - setUrl(value); - setFile(undefined); - } - }, [setUrl, setFile]); - - const handleUploadProgress = useCallback((progressEvent: ProgressEvent): void => { - // Only allow upload progress reach 95%, and set 100% when request is resolved - setProgress(Math.round((progressEvent.loaded * 95) / progressEvent.total)); - }, [setProgress]); - - const resolve = useCallback(async (quality?: number): Promise<string> => { - if (file) { - const config = { - headers: { 'Content-Type': 'image/png' }, - onUploadProgress: handleUploadProgress - }; - - setProgress(0.01); - - // Add querystring to avoid caching request in some browsers, see - // https://stackoverflow.com/questions/59339561/safari-skipping-xmlhttprequests - return Bluebird.all([get(`/files?key=${file.name}`), compressFile(file, quality)]) - .then(([response, compressedFile]) => { - const uploadUrl = response.data; - return axios.put(uploadUrl, compressedFile, config); - }) - .then(response => { - setProgress(100); - const uri = response.config.url; - return uri ? uri.slice(0, uri.indexOf('?')) : ''; - }); - } - setProgress(100); - return url || ''; - }, [file, handleUploadProgress, url]); - - return { - setValue, - isReady, - resolve, - progress - }; -}; |