Merge pull request #120 from arduino/feature/show-filename-transfer

Show filename transfer

Author: murilopolese

ui/arduino/main.css

@@ -652,6 +652,7 @@ button.small .icon {
   transition: all 0.25s;
   pointer-events: none;
   opacity: 0;
+  text-align: center;
 }
 
 #overlay.open {

ui/arduino/store.js

@@ -1197,16 +1197,16 @@ async function store(state, emitter) {
       if (file.type == 'folder') {
         await uploadFolder(
           srcPath, destPath,
-          (e) => {
-            state.transferringProgress = e
+          (progress, fileName) => {
+            state.transferringProgress = `${fileName}: ${progress}`
             emitter.emit('render')
           }
         )
       } else {
         await serial.uploadFile(
           srcPath, destPath,
-          (e) => {
-            state.transferringProgress = e
+          (progress) => {
+            state.transferringProgress = `${file.fileName}: ${progress}`
             emitter.emit('render')
           }
         )
@@ -1521,7 +1521,9 @@ async function uploadFolder(srcPath, destPath, dataConsumer) {
       await serial.uploadFile(
         disk.getFullPath(srcPath, relativePath, ''),
         serial.getFullPath(destPath, relativePath, ''),
-        dataConsumer
+        (progress) => {
+          dataConsumer(progress, relativePath.slice(1))
+        }
       )
     }
   }

ui/arduino/views/components/overlay.js

@@ -10,7 +10,7 @@ function Overlay(state, emit) {
   if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
   if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
   if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
-  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
+  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file<br><br>${state.transferringProgress}</p></div>`
 
   return overlay
 }