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