diff --git a/client/public/images/cloud.jpg b/client/public/images/cloud.jpg new file mode 100644 index 0000000..930e43c Binary files /dev/null and b/client/public/images/cloud.jpg differ diff --git a/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss b/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss index 20ba47f..fbc5ee9 100644 --- a/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss +++ b/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss @@ -15,6 +15,14 @@ &.md-light{color:rgb(33, 37, 41)} &.md-36{font-size:36px} } + + .loading { + background-color: #ffffff; + background-image: url("http://loadinggif.com/images/image-selection/3.gif"); + background-size: 25px 25px; + background-position: 98%; + background-repeat: no-repeat; + } .navbar { padding: 5px; diff --git a/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js b/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js index d46f112..69982b6 100644 --- a/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js +++ b/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js @@ -67,9 +67,10 @@ class CommandPrompt extends React.Component { } executeCommand() { - alert('called') + const commandField = $('#command') + commandField.toggleClass('loading') // this.domOpsService.hideNonCards(); - let commandVal = $('#command').val(); + let commandVal = commandField.val(); console.log(commandVal) if(!commandVal) { // this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage); @@ -100,7 +101,6 @@ class CommandPrompt extends React.Component {
this.initiateDomOpsOnEnter(event, this.executeCommand, 2000)} - // onClick={showContextMenu} #command> onClick={this.showContextMenu} />
Fire diff --git a/client/src/app/components/molecules/common/Dropzone/Dropzone.js b/client/src/app/components/molecules/common/Dropzone/Dropzone.js index faad62a..0a9bdeb 100644 --- a/client/src/app/components/molecules/common/Dropzone/Dropzone.js +++ b/client/src/app/components/molecules/common/Dropzone/Dropzone.js @@ -20,6 +20,9 @@ class Dropzone extends React.Component { onFilesAdded(evt) { if (this.props.disabled) return; + console.log(evt.target.files) + console.log(evt.target.result) + const files = evt.target.files; if (this.props.onFilesAdded) { const array = this.fileListToArray(files); @@ -69,7 +72,7 @@ class Dropzone extends React.Component { upload ({ modal: { @@ -32,15 +33,18 @@ class Uploader extends React.Component { super(props) this.state = { files: [], + imageURI: [], uploading: false, uploadProgress: {}, successfullUploaded: false }; this.onFilesAdded = this.onFilesAdded.bind(this); - this.uploadFiles = this.uploadFiles.bind(this); + this.uploadFile = this.uploadFile.bind(this); this.sendRequest = this.sendRequest.bind(this); this.renderActions = this.renderActions.bind(this); this.renderProgress = this.renderProgress.bind(this); + this.compressAndUploadFiles = this.compressAndUploadFiles.bind(this); + this.compressFile = this.compressFile.bind(this); } onFilesAdded(files) { @@ -58,7 +62,7 @@ class Uploader extends React.Component { done - this.setState({ files: [], successfullUploaded: false }) - } - > + ); @@ -84,23 +84,66 @@ class Uploader extends React.Component { return ( ); } } - - async uploadFiles() { + + readURI(file){ + return new Promise((resolve, reject) => { + let reader = new FileReader() + reader.onload = (ev) => { + resolve(ev.target.result) + } + reader.readAsDataURL(file) + }) + } + + handleChange(e){ + this.readURI(e); // maybe call this with webworker or async library? + if (this.props.onChange !== undefined) + this.props.onChange(e); // propagate to parent component + } + + compressAndUploadFiles(callback) { + const jic = new ImageService() this.setState({ uploadProgress: {}, uploading: true }); const promises = []; - this.state.files.forEach(file => { - promises.push(this.sendRequest(file)); + this.state.files.forEach((file) => { + this.readURI(file).then((result) => { + file.image_source = result + this.compressFile(file, jic).then(async (result) => { + // callback(result) + promises.push(this.sendRequest(result)); + try { + await Promise.all(promises); + this.setState({ successfullUploaded: true, uploading: false }); + } catch (e) { + // Not Production ready! Do some error handling here instead... + this.setState({ successfullUploaded: true, uploading: false }); + } + }) + }) + }) + } + + compressFile(file, jic) { + return new Promise((resolve, reject) => { + resolve(jic.compress(file, 20)) }); + } + + async uploadFile(file) { + this.setState({ uploadProgress: {}, uploading: true }); + const promises = []; + // this.state.files.forEach(file => { + promises.push(this.sendRequest(file)); + // }); try { await Promise.all(promises); - this.setState({ successfullUploaded: true, uploading: false }); } catch (e) { // Not Production ready! Do some error handling here instead... diff --git a/client/src/app/services/image.service.ts b/client/src/app/services/image.service.ts index 7b01bad..ddd429e 100644 --- a/client/src/app/services/image.service.ts +++ b/client/src/app/services/image.service.ts @@ -1,8 +1,10 @@ -export class ImageService { +export default class ImageService { constructor() { } - compress(source_img_obj, quality, output_format) { + compress(source_img_file, quality, output_format) { + var img = document.createElement('img') + img.src = source_img_file.image_source; var mime_type; if (output_format === "png") { @@ -14,13 +16,22 @@ export class ImageService { } var cvs = document.createElement('canvas'); - cvs.width = source_img_obj.naturalWidth; - cvs.height = source_img_obj.naturalHeight; - var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); + // cvs.width = img.naturalWidth; + // cvs.height = img.naturalHeight; + var ctx = cvs.getContext("2d").drawImage(img, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality / 100); - var result_image_obj = new Image(); - result_image_obj.src = newImageData; - return result_image_obj; + // var result_image_obj = new Image(); + // result_image_obj.src = newImageData; + // return result_image_obj; + var byteString = atob(newImageData.split(',')[1]); + var mimeString = newImageData.split(',')[0].split(':')[1].split(';')[0]; + var ab = new ArrayBuffer(byteString.length); + var ia = new Uint8Array(ab); + for (var i = 0; i < byteString.length; i++) { + ia[i] = byteString.charCodeAt(i); + } + return new Blob([ab], {type: mimeString}); + // return newImageData } upload(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders) { diff --git a/server/image_uploads/blob b/server/image_uploads/blob new file mode 100644 index 0000000..fb9cafb Binary files /dev/null and b/server/image_uploads/blob differ diff --git a/server/image_uploads/dragonfly.jpeg b/server/image_uploads/dragonfly.jpeg new file mode 100644 index 0000000..edff032 Binary files /dev/null and b/server/image_uploads/dragonfly.jpeg differ