diff --git a/src/api/rest-api.js b/src/api/rest-api.js index 6a79598..43af793 100644 --- a/src/api/rest-api.js +++ b/src/api/rest-api.js @@ -128,9 +128,9 @@ class RestAPI { }); } - upload(url, data, token) { + upload(url, data, token, progressCallback) { return new Promise(function (resolve, reject) { - var req = request.post(url).send(data); + const req = request.post(url).send(data).on('progress', progressCallback); if (token != null) { req.set('x-access-token', token); diff --git a/src/components/dialog/edit-widget-image-control.js b/src/components/dialog/edit-widget-image-control.js index 56ae8f0..9db27ac 100644 --- a/src/components/dialog/edit-widget-image-control.js +++ b/src/components/dialog/edit-widget-image-control.js @@ -19,12 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; -import { FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap'; +import React from 'react'; +import { FormGroup, FormControl, ControlLabel, Button, ProgressBar } from 'react-bootstrap'; import AppDispatcher from '../../app-dispatcher'; -class EditImageWidgetControl extends Component { +class EditImageWidgetControl extends React.Component { constructor(props) { super(props); @@ -32,7 +32,8 @@ class EditImageWidgetControl extends Component { widget: { file: '' }, - fileList: null + fileList: null, + progress: 0 }; } @@ -40,11 +41,11 @@ class EditImageWidgetControl extends Component { this.setState({ widget: nextProps.widget }); } - startFileUpload() { + startFileUpload = () => { // get selected file - var formData = new FormData(); + let formData = new FormData(); - for (var key in this.state.fileList) { + for (let key in this.state.fileList) { if (this.state.fileList.hasOwnProperty(key) && this.state.fileList[key] instanceof File) { formData.append(key, this.state.fileList[key]); } @@ -54,39 +55,46 @@ class EditImageWidgetControl extends Component { AppDispatcher.dispatch({ type: 'files/start-upload', data: formData, - token: this.props.sessionToken + token: this.props.sessionToken, + progressCallback: this.uploadProgress, + finishedCallback: this.clearProgress }); } + uploadProgress = (e) => { + this.setState({ progress: Math.round(e.percent) }); + } + + clearProgress = () => { + this.setState({ progress: 0 }); + } + render() { - return ( -
- - Image - this.props.handleChange(e)}> - { - this.props.files.length === 0? ( - - ) : ( - this.props.files.reduce( (entries, file, index) => { - entries.push(); - return entries; - }, [ - - ]) - ) - } - - + return
+ + Image + this.props.handleChange(e)}> + {this.props.files.length === 0 ? ( + + ) : ( + this.props.files.reduce((entries, file, index) => { + entries.push(); + return entries; + }, [ + + ]) + )} + + - - Upload - this.setState({ fileList: e.target.files }) } /> - + + Upload + this.setState({ fileList: e.target.files }) } /> + - -
- ); + + +
; } } diff --git a/src/data-managers/files-data-manager.js b/src/data-managers/files-data-manager.js index f5edb37..c63f895 100644 --- a/src/data-managers/files-data-manager.js +++ b/src/data-managers/files-data-manager.js @@ -28,20 +28,25 @@ class FilesDataManager extends RestDataManager { super('file', '/files'); } - upload(file, token = null) { - RestAPI.upload(this.makeURL('/upload'), file, token).then(response => { + upload(file, token = null, progressCallback = null, finishedCallback = null) { + RestAPI.upload(this.makeURL('/upload'), file, token, progressCallback).then(response => { AppDispatcher.dispatch({ type: 'files/uploaded' }); + // Trigger a files reload AppDispatcher.dispatch({ type: 'files/start-load', - token: token + token }); + + if (finishedCallback) { + finishedCallback(); + } }).catch(error => { AppDispatcher.dispatch({ type: 'files/upload-error', - error: error + error }); }); } diff --git a/src/stores/file-store.js b/src/stores/file-store.js index 09266dd..1437652 100644 --- a/src/stores/file-store.js +++ b/src/stores/file-store.js @@ -30,11 +30,11 @@ class FileStore extends ArrayStore { reduce(state, action) { switch (action.type) { case 'files/start-upload': - FilesDataManager.upload(action.data, action.token); + FilesDataManager.upload(action.data, action.token, action.progressCallback, action.finishedCallback); return state; case 'files/uploaded': - console.log('ready uploaded'); + //console.log('ready uploaded'); return state; case 'files/upload-error':