refactor!: simplify file operations

3 files changed, 72 insertions, 29 deletions

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