Handle uploaded files better

client/source/sass/components/_dropzone.scss

@@ -76,13 +76,19 @@ $dropzone--file--icon--fill: #adbfce;
   &__selected-files {
     @extend .textbox;
     @extend .textbox.is-fulfilled;
+    border-radius: 4px 4px 0 0 ;
     font-size: 0.8em;
     padding: $spacing-unit * 1/2;
     width: 100%;
 
+    & + .dropzone {
+      border-radius: 0 0 4px 4px;
+      border-top: none;
+    }
+
     &__file {
-      display: block;
       text-align: left;
+      white-space: nowrap;
 
       .icon {
         display: inline-block;
@@ -102,4 +108,31 @@ $dropzone--file--icon--fill: #adbfce;
       }
     }
   }
+
+  &__file {
+    display: flex;
+    width: 100%;
+
+    &__item {
+      flex: 1 0 auto;
+
+      &--icon {
+        flex: 0 0 auto;
+      }
+
+      &--file-name {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &--remove-icon {
+        cursor: pointer;
+      }
+    }
+
+    .icon {
+
+    }
+  }
 }

client/source/scripts/components/modals/AddTorrentsByFile.js

@@ -80,8 +80,7 @@ export default class AddTorrents extends React.Component {
     let dropzoneClasses = classnames('form__dropzone dropzone', {
       'is-fulfilled': this.state.files && this.state.files.length > 0
     });
-
+    let dropzoneContent = (
-    let content = (
       <Dropzone activeClassName="dropzone--is-dragging"
         className={dropzoneClasses} ref="dropzone"
         onDrop={this.handleFileDrop} disablePreview={true}>
@@ -94,27 +93,39 @@ export default class AddTorrents extends React.Component {
         </div>
       </Dropzone>
     );
+    let fileContent = null;
 
     if (this.state.files && this.state.files.length > 0) {
       let files = this.state.files.map((file, index) => {
         return (
-          <li className="dropzone__selected-files__file" key={index}>
+          <li className="dropzone__selected-files__file dropzone__file" key={index}>
-            <File />
+            <span className="dropzone__file__item dropzone__file__item--icon">
-            {file.name}
+              <File />
-            <span onClick={this.handleFileRemove.bind(this, index)}>
+            </span>
+            <span className="dropzone__file__item dropzone__file__item--file-name">
+              {file.name}{file.name}
+            </span>
+            <span className="dropzone__file__item dropzone__file__item--icon dropzone__file__item--remove-icon" onClick={this.handleFileRemove.bind(this, index)}>
               <Close />
             </span>
           </li>
         );
       });
 
-      content = (
+      fileContent = (
         <ul className="dropzone__selected-files" onClick={this.handleFilesClick}>
           {files}
         </ul>
       );
     }
 
+    let content = (
+      <div>
+        {fileContent}
+        {dropzoneContent}
+      </div>
+    );
+
     return content;
   }
 

server/assets/style.css

@@ -1196,12 +1196,16 @@ body {
     color: #258de5;
     text-decoration: underline; }
   .dropzone__selected-files {
+    border-radius: 4px 4px 0 0;
     font-size: 0.8em;
     padding: 12.5px;
     width: 100%; }
+    .dropzone__selected-files + .dropzone {
+      border-radius: 0 0 4px 4px;
+      border-top: none; }
     .dropzone__selected-files__file {
-      display: block;
+      text-align: left;
-      text-align: left; }
+      white-space: nowrap; }
       .dropzone__selected-files__file .icon {
         display: inline-block;
         fill: #adbfce;
@@ -1215,6 +1219,31 @@ body {
         margin-right: 0;
         vertical-align: middle;
         width: 8px; }
+  .dropzone__file {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%; }
+    .dropzone__file__item {
+      -webkit-box-flex: 1;
+      -webkit-flex: 1 0 auto;
+          -ms-flex: 1 0 auto;
+              flex: 1 0 auto; }
+      .dropzone__file__item--icon {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+            -ms-flex: 0 0 auto;
+                flex: 0 0 auto; }
+      .dropzone__file__item--file-name {
+        -webkit-box-flex: 1;
+        -webkit-flex: 1 1 auto;
+            -ms-flex: 1 1 auto;
+                flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+      .dropzone__file__item--remove-icon {
+        cursor: pointer; }
 
 .floating-action__button {
   background: #fff;

server/models/client.js

@@ -241,6 +241,59 @@ var client = {
     });
   },
 
+  moveFiles: function(data, callback) {
+    let files = data.files || [];
+
+    var multicall = [
+      []
+    ];
+
+    if (data.destination !== null && data.destination !== '') {
+      multicall[0].push({
+        methodName: 'execute',
+        params: [
+          'mkdir',
+          '-p',
+          data.destination
+        ]
+      });
+    }
+
+    var torrentsAdded = 0;
+
+    // loop through the torrents:
+    //  stop torrents, call d.stop and d.close
+    //  move torrents
+    //  set new torrent directory
+    //  start torrents, call d.start and d.open
+
+    while (torrentsAdded < data.urls.length) {
+      var parameters = [
+        '',
+        data.urls[torrentsAdded]
+      ];
+
+      if (data.destination !== null && data.destination !== '') {
+        parameters.push('d.directory.set="' + data.destination + '"');
+      }
+
+      parameters.push('d.custom.set=addtime,' + Math.floor(Date.now() / 1000));
+
+      multicall[0].push({
+        methodName: 'load.start',
+        params: parameters
+      });
+
+      torrentsAdded++;
+    }
+
+    rTorrent.get('system.multicall', multicall).then(function(data) {
+      callback(null, data);
+    }, function(error) {
+      callback(error, null);
+    });
+  },
+
   setFilePriority: function (hash, data, callback) {
     // TODO Add support for multiple hashes.
     var fileIndex = data.fileIndices[0];