aboutsummaryrefslogtreecommitdiff
path: root/src/hooks
diff options
context:
space:
mode:
authorEugene Sokolov <eug-vs@keemail.me>2020-08-22 14:56:07 +0300
committerGitHub <noreply@github.com>2020-08-22 14:56:07 +0300
commit89f038c7a0ccf6de94516cba8499a0bc69f8dae1 (patch)
tree5e6dbd7ae5a9d0ce1b79921b2b44986bb13f1874 /src/hooks
parenta42667af463b8c33a38b935b96d39582b543790b (diff)
parent93319d38e904535ce33a7868b3c1e0a2a4f33d65 (diff)
downloadwhich-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.tsx85
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
- };
-};