Add confirmation dialog for file upload

fixes element-hq/element-web#92
aviraldg · Apr 2, 2016 · 0574a28 · 0574a28
1 parent 0eeaac8
commit 0574a28
Showing 1 changed file with 34 additions and 6 deletions.
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
@@ -17,6 +17,7 @@ var React = require('react');
 
 var CallHandler = require('../../../CallHandler');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 var dis = require('../../../dispatcher');
 
@@ -47,13 +48,40 @@ module.exports = React.createClass({
 
     onUploadFileSelected: function(ev) {
         var files = ev.target.files;
-        // MessageComposer shouldn't have to rely on its parent passing in a callback to upload a file
-        if (files) {
-            for(var i=0; i<files.length; i++) {
-                this.props.uploadFile(files[i]);
-            }
+
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        var fileList = [];
+        for(var i=0; i<files.length; i++) {
+            fileList.push(<li>
+                <TintableSvg src="img/files.svg" width="16" height="16" /> {files[i].name}
+            </li>);
         }
-        this.refs.uploadInput.value = null;
+
+        Modal.createDialog(QuestionDialog, {
+            title: "Upload Files",
+            description: (
+                <div>
+                    <p>Are you sure you want upload the following files?</p>
+                    <ul style={{listStyle: 'none', textAlign: 'left'}}>
+                        {fileList}
+                    </ul>
+                </div>
+            ),
+            onFinished: (shouldUpload) => {
+                if(shouldUpload) {
+                    // MessageComposer shouldn't have to rely on its parent passing in a callback to upload a file
+                    if (files) {
+                        for(var i=0; i<files.length; i++) {
+                            this.props.uploadFile(files[i]);
+                        }
+                    }
+                }
+
+                this.refs.uploadInput.value = null;
+            }
+        });
     },
 
     onHangupClick: function() {