Merge pull request box#12 from tjuanitas/hackathon

Uploading works?
benjamin-shen · Jun 29, 2022 · 8a6d3aa · 8a6d3aa
2 parents 31e2404 + 2888e2f
commit 8a6d3aa
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
         "i18n-webpack-plugin": "^1.0.0",
         "jest": "^26.4.0",
         "jest-canvas-mock": "^2.2.0",
+        "js-sha1": "0.6.0",
         "jsuri": "^1.3.1",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",

diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import getProp from 'lodash/get';
+import PlainUpload from 'box-ui-elements/es/api/uploads/PlainUpload';
 import AnnotationControlsFSM, { AnnotationInput, AnnotationMode, AnnotationState } from '../../AnnotationControlsFSM';
 import ImageBaseViewer from './ImageBaseViewer';
 import ImageControls from './ImageControls';
@@ -54,6 +55,46 @@ class ImageViewer extends ImageBaseViewer {
         }
     }
 
+    getCookie = name => {
+        return (
+            ('; ' + document.cookie)
+                .split('; ' + name + '=')
+                .pop()
+                .split(';')
+                .shift() || null
+        );
+    };
+
+    getConfig = propertyName => {
+        if (window.Box && window.Box.config && {}.hasOwnProperty.call(window.Box.config, propertyName)) {
+            return window.Box.config[propertyName];
+        }
+
+        return null;
+    };
+
+    getUploadToken = async fileId => {
+        const data = new FormData();
+        data.append('file_id', fileId);
+
+        const requestToken = this.getConfig('requestToken');
+        const crsfToken = this.getCookie('csrf-token');
+
+        const response = await fetch('/index.php?rm=box_upload_get_scoped_token', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: new Headers({
+                'X-CSRF-TOKEN': crsfToken,
+                'Request-Token': requestToken,
+                'X-Request-Token': requestToken,
+            }),
+            body: data,
+        });
+
+        const { access_token: token } = await response.json();
+        return token;
+    };
+
     loadImageEditor() {
         const previewEl = document.querySelector('.preview-body');
         const pinturaEl = document.createElement('div');
@@ -71,45 +112,45 @@ class ImageViewer extends ImageBaseViewer {
 
         // Remove header buttons
         document.querySelector('.preview-header-right').remove();
-        console.log(this.options);
-
-        editor.on('process', imageWriterResult => {
-            const { token } = this.options;
-            const headers = getHeaders({ 'Content-Type': 'multipart/form-data' }, token);
-            const getBase64FromUrl = async url => {
-                const data = await fetch(url);
-                const blob = await data.blob();
-                return new Promise(resolve => {
-                    const reader = new FileReader();
-                    reader.readAsDataURL(blob);
-                    reader.onloadend = () => {
-                        const base64data = reader.result;
-                        resolve(base64data);
-                    };
-                });
-            };
 
-            const source = getBase64FromUrl(URL.createObjectURL(imageWriterResult.dest));
-            fetch(
-                `https://upload.${getProp(this.options, 'appHost').replace('https://', '')}/2.0/files/${getProp(
-                    this.options,
-                    'file.id',
-                )}/content`,
-                {
-                    headers,
-                    method: 'POST',
-                    body: JSON.stringify({
-                        file: source,
-                    }),
-                    mode: 'no-cors',
-                },
-            )
-                .then(data => {
-                    console.log('fetch', data);
-                })
-                .catch(err => {
-                    console.log(err);
+        editor.on('process', async imageWriterResult => {
+            const fileId = getProp(this.options, 'file.id');
+            const fileName = getProp(this.options, 'file.name');
+            const fileType = getProp(this.options, 'file.type');
+
+            const token = await this.getUploadToken(fileId);
+
+            const options = {
+                id: `file_${fileId}`,
+                token,
+                apiHost: this.options.apiHost,
+            };
+            const uploader = new PlainUpload(options);
+
+            const file = new File([URL.createObjectURL(imageWriterResult.dest)], fileName, {
+                type: fileType,
+            });
+
+            const request = new Promise((resolve, reject) => {
+                uploader.upload({
+                    file,
+                    fileDescription: null,
+                    fileId,
+                    folderId: '0',
+                    overwrite: true,
+                    successCallback: resolve,
+                    errorCallback: reject,
                 });
+            });
+
+            let res;
+            try {
+                res = await request;
+            } catch (error) {
+                console.log(error.message);
+            }
+            const [uploadedFile] = res;
+            console.log(uploadedFile);
         });
     }
 

diff --git a/yarn.lock b/yarn.lock
@@ -8685,6 +8685,11 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
+[email protected]:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/js-sha1/-/js-sha1-0.6.0.tgz#adbee10f0e8e18aa07cdea807cf08e9183dbc7f9"
+  integrity sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w==
+
 js-tokens@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"