Merge pull request #93 from which-ecosystem/avatar-uploads

Avatar uploads

2 files changed, 68 insertions, 0 deletions

diff --git a/src/utils/getLocalFileUrl.ts b/src/utils/getLocalFileUrl.ts
new file mode 100644
index 0000000..1469804
--- /dev/null
+++ b/src/utils/getLocalFileUrl.ts
@@ -0,0 +1,15 @@
+export default (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.addEventListener('load', () => {
+      if (typeof reader.result === 'string') resolve(reader.result);
+    }, false);
+
+    reader.addEventListener('error', () => {
+      reject(new Error('Error reading the file'));
+    }, false);
+
+    if (file) reader.readAsDataURL(file);
+  });
+};
diff --git a/src/utils/uploadFileToS3.ts b/src/utils/uploadFileToS3.ts
new file mode 100644
index 0000000..d91dac5
--- /dev/null
+++ b/src/utils/uploadFileToS3.ts
@@ -0,0 +1,53 @@
+import Compressor from 'compressorjs';
+import axios from 'axios';
+import Bluebird from 'bluebird';
+import { get } from '../requests';
+
+interface ProgressEvent {
+  loaded: number;
+  total: number;
+}
+
+type SetProgress = (progress: number) => void;
+
+
+const compressFile = (file: File, quality = 0.6): Promise<File | Blob> => {
+  return new Promise((resolve, reject) => {
+    if (quality === 1) return resolve(file);
+    return new Compressor(file, {
+      success: result => resolve(result),
+      error: err => reject(err),
+      quality
+    });
+  });
+};
+
+export default (file: File, quality?: number, setProgress?: SetProgress): Promise<string> => {
+  const onUploadProgress = (progressEvent: ProgressEvent): void => {
+    if (setProgress) {
+      const { loaded, total } = progressEvent;
+      // Only allow upload progress reach 95%, and set 100% when request is resolved
+      const progress = Math.round((loaded * 95) / total);
+      setProgress(progress);
+    }
+  };
+
+  const config = {
+    headers: { 'Content-Type': 'image/png' },
+    onUploadProgress
+  };
+
+  // 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 => {
+      if (setProgress) setProgress(100);
+      const uri = response.config.url;
+      return uri ? uri.slice(0, uri.indexOf('?')) : '';
+    });
+};
+