Работа над загрузкой файла на сервер

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -10,7 +10,8 @@
                 <el-button slot="append" icon="el-icon-check" @click="submitUrl"></el-button>
             </el-input>
             <div class="space"></div>
-            <el-button size="mini" @click="loadFle">
+            <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
+            <el-button size="mini" @click="loadFileClick">
                 Загрузить файл с диска
             </el-button>
             <div class="space"></div>
@@ -66,7 +67,13 @@ class LoaderPage extends Vue {
         }
     }
 
-    loadFle() {
+    loadFileClick() {
+        this.$refs.file.click();
+    }
+
+    loadFile() {
+        const file = this.$refs.file.files[0];
+        this.$emit('load-file', {file});
     }
 
     openHelp() {

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -21,6 +21,7 @@ const ruMessage = {
     'convert': 'конвертирование',
     'loading': 'загрузка',
     'parse': 'обработка',
+    'upload': 'отправка',
 };
 
 export default @Component({

client/components/Reader/Reader.vue

@@ -50,6 +50,7 @@
             <keep-alive>
                 <component ref="page" :is="activePage"
                     @load-book="loadBook"
+                    @load-file="loadFile"
                     @book-pos-changed="bookPosChanged"
                     @tool-bar-toggle="toolBarToggle"
                     @full-screen-toogle="fullScreenToggle"
@@ -647,6 +648,29 @@ class Reader extends Vue {
         });
     }
 
+    loadFile(opts) {
+        this.progressActive = true;
+        this.$nextTick(async() => {
+            const progress = this.$refs.page;
+            try {
+                progress.show();
+                progress.setState({state: 'upload'});
+
+                const url = await readerApi.uploadFile(opts.file, (state) => {
+                    progress.setState(state);
+                });
+
+                this.loadBook(url);
+
+                progress.hide(); this.progressActive = false;
+            } catch (e) {
+                progress.hide(); this.progressActive = false;
+                this.loaderActive = true;
+                this.$alert(e.message, 'Ошибка', {type: 'error'});
+            }
+        });
+    }
+
     blinkCachedLoadMessage() {
         this.blinkCount = 30;
         if (!this.inBlink) {