diff options
| -rw-r--r-- | package-lock.json | 19 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/hooks/useS3Preupload.tsx | 38 |
3 files changed, 43 insertions, 15 deletions
diff --git a/package-lock.json b/package-lock.json index d904501..0e86c15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2961,6 +2961,11 @@ "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" }, + "blueimp-canvas-to-blob": { + "version": "3.28.0", + "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz", + "integrity": "sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg==" + }, "bn.js": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.2.tgz", @@ -3685,6 +3690,15 @@ } } }, + "compressorjs": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.0.6.tgz", + "integrity": "sha512-HgaDx4AGCjJOyOt08JsGO9VLJIHwy8guZDU1OG2jtuz77MG8PQr+reKt5J6aYZCajVIKXsFXJreZeEmk6lXFmA==", + "requires": { + "blueimp-canvas-to-blob": "^3.16.0", + "is-blob": "^2.0.1" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -6858,6 +6872,11 @@ "binary-extensions": "^2.0.0" } }, + "is-blob": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz", + "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==" + }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", diff --git a/package.json b/package.json index 8d8843a..457fa4f 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@material-ui/lab": "^4.0.0-alpha.56", "axios": "^0.19.2", "bluebird": "^3.7.2", + "compressorjs": "^1.0.6", "lodash": "^4.17.15", "notistack": "^0.9.17", "react": "^16.13.1", diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx index 3834a48..651bfb6 100644 --- a/src/hooks/useS3Preupload.tsx +++ b/src/hooks/useS3Preupload.tsx @@ -1,7 +1,8 @@ -/* eslint-disable */ import { useState, useCallback, useMemo } from 'react'; import axios from 'axios'; -import { post } from '../requests'; +import Bluebird from 'bluebird'; +import Compressor from 'compressorjs'; +import { get } from '../requests'; interface ProgressEvent { @@ -16,6 +17,17 @@ interface Hook { 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>(); @@ -38,7 +50,7 @@ export default (): Hook => { setProgress(Math.round((progressEvent.loaded * 95) / progressEvent.total)); }, [setProgress]); - const resolve = useCallback(async (): Promise<string> => { + const resolve = useCallback(async (quality?: number): Promise<string> => { if (file) { const config = { headers: { 'Content-Type': 'image/png' }, @@ -46,25 +58,21 @@ export default (): Hook => { }; setProgress(0.01); - return post('/files') - .then(function(response){ - console.log({'resData': response.data}); - debugger; - return response.data; - }) - .then(function(uploadUrl){ - console.log({'uploadUrl': uploadUrl}); - return axios.put(uploadUrl, file, config); + + // 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(function(response){ + .then(response => { setProgress(100); const uri = response.config.url; - console.log({'uri': uri?.slice(0, uri.indexOf('?'))}); return uri ? uri.slice(0, uri.indexOf('?')) : ''; }); } setProgress(100); - console.log({'url': url}); return url || ''; }, [file, handleUploadProgress, url]); |