From b598b428b45d3ae77dbc15ceac67a2b13c66b86b Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Thu, 23 Jun 2016 19:48:42 +0200 Subject: [PATCH] Move file hashing and creation utils to js-utility-belt --- .../react_s3_fine_uploader.js | 8 +- js/utils/file.js | 92 ++----------------- package.json | 2 +- 3 files changed, 12 insertions(+), 90 deletions(-) diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index a5c20114..39f6fb16 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -20,7 +20,7 @@ import { RETRY_ATTEMPT_TO_SHOW_CONTACT_US, ENDPOINTS } from '../../constants/upl import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils'; import { getCsrfToken, makeCsrfHeader } from '../../utils/csrf'; -import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file'; +import { computeFileHash, createTextFile, extractFileExtensionFromString } from '../../utils/file'; import { getLangText } from '../../utils/lang'; @@ -899,7 +899,7 @@ const ReactS3FineUploader = React.createClass({ // "files" is not a classical Javascript array but a Javascript FileList, therefore // we can not use map to convert values - for(let i = 0; i < files.length; i++) { + for (let i = 0; i < files.length; i++) { // for calculating the overall progress of all submitted files // we'll need to calculate the overall sum of all files' sizes overallFileSize += files[i].size; @@ -909,7 +909,9 @@ const ReactS3FineUploader = React.createClass({ // since the actual computation of a file's hash is an async task , // we're using promises to handle that - let hashedFilePromise = computeHashOfFile(files[i]); + const hashedFilePromise = computeFileHash(files[i]) + .then((hash) => createTextFile(hash, `hash-of-${files[i].name}`, files[i])); + convertedFilePromises.push(hashedFilePromise); } diff --git a/js/utils/file.js b/js/utils/file.js index 724f7fd8..d611599c 100644 --- a/js/utils/file.js +++ b/js/utils/file.js @@ -1,87 +1,7 @@ -import Q from 'q'; -import SparkMD5 from 'spark-md5'; -import Moment from 'moment'; - -import { getLangText } from './lang'; - // Re-export related utilities from js-utility-belt for easier access -export { extractFileExtensionFromString, extractFileExtensionFromUrl } from 'js-utility-belt/es6/file'; - -/** - * Takes a file Object, computes the MD5 hash and returns the URL of the textfile with the hash - * - * @param {File} file javascript File object - * @return {string} regular javascript string - */ -export function computeHashOfFile(file) { - return Q.Promise((resolve, reject, notify) => { - const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; - const chunkSize = 2097152; // Read in chunks of 2MB - const chunks = Math.ceil(file.size / chunkSize); - const spark = new SparkMD5.ArrayBuffer(); - const fileReader = new FileReader(); - const startTime = new Moment(); - let currentChunk = 0; - - // comment: We should convert this to es6 at some point, however if so please consider that - // an arrow function will get rid of the function's scope... - fileReader.onload = (e) => { - // console.log('read chunk nr', currentChunk + 1, 'of', chunks); - spark.append(e.target.result); // Append array buffer - currentChunk++; - - if (currentChunk < chunks) { - loadNext(); - } else { - const fileHash = spark.end(); - - console.info('computed hash %s (took %d s)', - fileHash, - Math.round(((new Moment() - startTime) / 1000) % 60)); // Compute hash - - resolve(makeTextFile(fileHash, file)); - } - }; - - fileReader.onerror = () => { - reject(new Error(getLangText("We weren't able to hash your file locally. Try to " + - 'upload it manually or consider contact us.'))); - }; - - function loadNext() { - const start = currentChunk * chunkSize; - const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; - - // send progress - // Due to the fact that progressHandler and notify are going to be removed in v2 - // of Q, the functionality of throwing errors in the progressHandler will not be implemented - // anymore. To still be able to throw an error however, we can just expose the promise's reject - // method to the .progress function to stop the execution immediately. - notify({ - progress: start / file.size, - reject - }); - - fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); - } - - loadNext(); - }); -} - -/** - * Takes a string, creates a text file and returns the URL - * - * @param {string} text regular javascript string - * @return {string} regular javascript string - */ -function makeTextFile(text, file) { - const textFileBlob = new Blob([text], { type: 'text/plain' }); - const textFile = new File([textFileBlob], `hash-of-${file.name}.txt`, { - lastModifiedDate: file.lastModifiedDate, - lastModified: file.lastModified, - type: 'text/plain' - }); - - return textFile; -} +export { + createTextFile, + computeFileHash, + extractFileExtensionFromString, + extractFileExtensionFromUrl +} from 'js-utility-belt/es6/file'; diff --git a/package.json b/package.json index 41f30123..6c20b88b 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "html-webpack-plugin": "^2.21.0", "invariant": "^2.2.1", "isomorphic-fetch": "^2.0.2", - "js-utility-belt": "^1.3.1", + "js-utility-belt": "^1.4.0", "moment": "^2.10.6", "node-sass": "^3.7.0", "postcss-loader": "^0.9.1",