diff --git a/package.json b/package.json index b94f44443..76d871516 100644 --- 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 index 707a048de..b1f8ae47b 100644 --- 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 index c94922d26..962c9bf67 100644 --- 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== +js-sha1@0.6.0: + 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"