From e060d394867a11fcca3a3a36c3325807f4bc5a50 Mon Sep 17 00:00:00 2001 From: diminator Date: Wed, 22 Jul 2015 17:12:00 +0200 Subject: [PATCH 1/5] solves the issue for textarea_toggable couldnt reproduce login --- js/components/ascribe_forms/form.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index ecbd17de..541a4036 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -39,13 +39,14 @@ let Form = React.createClass({ this.setState(this.getInitialState()); }, submit(event){ + console.log('submit') if (event) { event.preventDefault(); } this.setState({submitted: true}); this.clearErrors(); let action = (this.httpVerb && this.httpVerb()) || 'post'; - this[action](); + window.setTimeout(() => this[action](), 100); }, post(){ requests @@ -56,9 +57,14 @@ let Form = React.createClass({ getFormData(){ let data = {}; + console.log('data') for (let ref in this.refs){ data[this.refs[ref].props.name] = this.refs[ref].state.value; + console.log(this.refs[ref].state.value) + console.log(this.refs[ref].refs.input.state.value) } + //console.log(data) + if ('getFormData' in this.props){ data = mergeOptionsWithDuplicates(data, this.props.getFormData()); } From 1b7b3446052eef0569edcdccd5c2ae67d4d2679a Mon Sep 17 00:00:00 2001 From: diminator Date: Wed, 22 Jul 2015 17:12:46 +0200 Subject: [PATCH 2/5] solves the issue for textarea_toggable couldnt reproduce login --- js/components/ascribe_forms/form.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 541a4036..f5cfdbf7 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -39,7 +39,6 @@ let Form = React.createClass({ this.setState(this.getInitialState()); }, submit(event){ - console.log('submit') if (event) { event.preventDefault(); } @@ -57,13 +56,9 @@ let Form = React.createClass({ getFormData(){ let data = {}; - console.log('data') for (let ref in this.refs){ data[this.refs[ref].props.name] = this.refs[ref].state.value; - console.log(this.refs[ref].state.value) - console.log(this.refs[ref].refs.input.state.value) } - //console.log(data) if ('getFormData' in this.props){ data = mergeOptionsWithDuplicates(data, this.props.getFormData()); From 1a1f14e04c0b5c3e7c32d40a45acca068546bb31 Mon Sep 17 00:00:00 2001 From: diminator Date: Thu, 23 Jul 2015 11:45:25 +0200 Subject: [PATCH 3/5] add JS file hashing to fineuploader didnt instantiate it because needs UX --- .../react_s3_fine_uploader.js | 46 ++++++++++++++++++- package.json | 3 +- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 3ececa6d..05cc32cd 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -2,6 +2,7 @@ import React from 'react/addons'; import Raven from 'raven-js'; +import SparkMD5 from 'spark-md5'; import { getCookie } from '../../utils/fetch_api_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -484,7 +485,8 @@ var ReactS3FineUploader = React.createClass({ this.state.uploader.addFiles(files); let oldFiles = this.state.filesToUpload; let oldAndNewFiles = this.state.uploader.getUploads(); - + // Compute the hash of the file instead of uploading... needs UX design! + // this.computeHashOfFile(0); // Add fineuploader specific information to new files for(let i = 0; i < oldAndNewFiles.length; i++) { for(let j = 0; j < files.length; j++) { @@ -542,6 +544,48 @@ var ReactS3FineUploader = React.createClass({ }); this.setState(newState); }, + makeTextFile(text) { + let data = new Blob([text], {type: 'text/plain'}); + return window.URL.createObjectURL(data); + }, + computeHashOfFile(fileId) { + let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, + file = this.state.uploader.getFile(fileId), + chunkSize = 2097152, // Read in chunks of 2MB + chunks = Math.ceil(file.size / chunkSize), + currentChunk = 0, + spark = new SparkMD5.ArrayBuffer(), + fileReader = new FileReader(); + + let startTime = new Date(); + fileReader.onload = function (e) { + //console.log('read chunk nr', currentChunk + 1, 'of', chunks); + spark.append(e.target.result); // Append array buffer + currentChunk++; + + if (currentChunk < chunks) { + loadNext(); + } else { + let fileHash = spark.end(); + console.info('computed hash %s (took %d s)', + fileHash, + Math.round(((new Date() - startTime) / 1000) % 60)); // Compute hash + console.log(this.makeTextFile(fileHash)); + } + }.bind(this); + + fileReader.onerror = function () { + console.warn('oops, something went wrong.'); + }; + function loadNext() { + var start = currentChunk * chunkSize, + end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; + + fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); + } + loadNext(); + + }, render() { return ( diff --git a/package.json b/package.json index bac4a421..44a7d3fa 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,8 @@ "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.1.2", - "yargs": "^3.10.0" + "yargs": "^3.10.0", + "spark-md5": "~1.0.0" }, "jest": { "scriptPreprocessor": "node_modules/babel-jest", From 0cc48a73e4d16766946fb1d310236b0bdd703c4d Mon Sep 17 00:00:00 2001 From: diminator Date: Thu, 23 Jul 2015 13:03:30 +0200 Subject: [PATCH 4/5] moved hashing to file_utils --- .../react_s3_fine_uploader.js | 44 ------------- js/utils/file_utils.js | 61 +++++++++++++++++++ 2 files changed, 61 insertions(+), 44 deletions(-) create mode 100644 js/utils/file_utils.js diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 05cc32cd..63f22d91 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -2,7 +2,6 @@ import React from 'react/addons'; import Raven from 'raven-js'; -import SparkMD5 from 'spark-md5'; import { getCookie } from '../../utils/fetch_api_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -485,8 +484,6 @@ var ReactS3FineUploader = React.createClass({ this.state.uploader.addFiles(files); let oldFiles = this.state.filesToUpload; let oldAndNewFiles = this.state.uploader.getUploads(); - // Compute the hash of the file instead of uploading... needs UX design! - // this.computeHashOfFile(0); // Add fineuploader specific information to new files for(let i = 0; i < oldAndNewFiles.length; i++) { for(let j = 0; j < files.length; j++) { @@ -544,48 +541,7 @@ var ReactS3FineUploader = React.createClass({ }); this.setState(newState); }, - makeTextFile(text) { - let data = new Blob([text], {type: 'text/plain'}); - return window.URL.createObjectURL(data); - }, - computeHashOfFile(fileId) { - let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, - file = this.state.uploader.getFile(fileId), - chunkSize = 2097152, // Read in chunks of 2MB - chunks = Math.ceil(file.size / chunkSize), - currentChunk = 0, - spark = new SparkMD5.ArrayBuffer(), - fileReader = new FileReader(); - let startTime = new Date(); - fileReader.onload = function (e) { - //console.log('read chunk nr', currentChunk + 1, 'of', chunks); - spark.append(e.target.result); // Append array buffer - currentChunk++; - - if (currentChunk < chunks) { - loadNext(); - } else { - let fileHash = spark.end(); - console.info('computed hash %s (took %d s)', - fileHash, - Math.round(((new Date() - startTime) / 1000) % 60)); // Compute hash - console.log(this.makeTextFile(fileHash)); - } - }.bind(this); - - fileReader.onerror = function () { - console.warn('oops, something went wrong.'); - }; - function loadNext() { - var start = currentChunk * chunkSize, - end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; - - fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); - } - loadNext(); - - }, render() { return ( diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js new file mode 100644 index 00000000..4593de37 --- /dev/null +++ b/js/utils/file_utils.js @@ -0,0 +1,61 @@ +'use strict'; + +import SparkMD5 from 'spark-md5'; + +/** + * Takes a string, creates a text file and returns the URL + * + * @param {string} text regular javascript string + * @return {string} regular javascript string + */ +export function makeTextFile(text) { + let data = new Blob([text], {type: 'text/plain'}); + return window.URL.createObjectURL(data); +} + +/** + * 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) { + let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, + chunkSize = 2097152, // Read in chunks of 2MB + chunks = Math.ceil(file.size / chunkSize), + currentChunk = 0, + spark = new SparkMD5.ArrayBuffer(), + fileReader = new FileReader(); + + let startTime = new Date(); + fileReader.onload = function (e) { + //console.log('read chunk nr', currentChunk + 1, 'of', chunks); + spark.append(e.target.result); // Append array buffer + currentChunk++; + + if (currentChunk < chunks) { + loadNext(); + } else { + let fileHash = spark.end(); + console.info('computed hash %s (took %d s)', + fileHash, + Math.round(((new Date() - startTime) / 1000) % 60)); // Compute hash + let hashFile = this.makeTextFile(fileHash); + console.info('hash: ', hashFile); + return hashFile; + } + }.bind(this); + + fileReader.onerror = function () { + console.warn('oops, something went wrong.'); + }; + function loadNext() { + var start = currentChunk * chunkSize, + end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; + + fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); + } + + loadNext(); + +} \ No newline at end of file From c415e97e42808ac500d87494c44e04fef227dae2 Mon Sep 17 00:00:00 2001 From: diminator Date: Thu, 23 Jul 2015 15:18:58 +0200 Subject: [PATCH 5/5] allow download for non-renderable files --- js/components/ascribe_detail/media_container.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 6bf58a9c..873325f2 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -55,6 +55,7 @@ let MediaContainer = React.createClass({ encodingStatus={this.props.content.digital_work.isEncoding} />