Move file hashing and creation utils to js-utility-belt

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);
             }
 

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';

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",