Move file upload logic to data model

src/main.js

@@ -17,7 +17,7 @@ import Viewer from './views/Viewer.vue';
 
 const routes = [
   { path: '/', redirect: '/home' },
-  { path: '/home/:type/:resourceId?/:cwd*', component: Home },
+  { path: '/home/:type?/:resourceId?/:cwd*', component: Home },
   { path: '/viewer/:type/:resourceId/:filePath*', component: Viewer },
   { path: '/login', component: Login },
 ];

src/models/DirectoryModel.js

@@ -26,6 +26,12 @@ export function createDirectoryModel(origin, accessToken, api) {
 
       return result.body.entries;
     },
+    async upload(targetDir, file, progressHandler) {
+      await superagent.post(`${origin}/api/v1/${api}/files/${encodeURIComponent(sanitize(targetDir + '/' + file.name))}`)
+        .query({ access_token: accessToken })
+        .attach('file', file)
+        .on('progress', progressHandler);
+    },
     async remove(filePath) {
       const [error] = await safe(superagent.del(`${origin}/api/v1/${api}/files/${filePath}`)
         .query({ access_token: accessToken }));

src/views/Home.vue

@@ -35,7 +35,12 @@
       </div>
     </template>
     <template #footer>
-      <FileUploader ref="fileUploader" :cwd="cwd" :upload-url="`${baseUrl}/api/v1/apps/${selectedAppId}/files/$PATH`" :access-token="accessToken" @finished="onUploadFinished"/>
+      <FileUploader
+        ref="fileUploader"
+        :cwd="cwd"
+        :upload-handler="uploadHandler"
+        @finished="onUploadFinished"
+      />
       <BottomBar />
     </template>
   </MainLayout>
@@ -183,6 +188,9 @@ export default {
         files
       };
     },
+    async uploadHandler(targetDir, file, progressHandler) {
+      await this.directoryModel.upload(targetDir, file, progressHandler);
+    },
     async loadCwd() {
       const items = await this.directoryModel.listFiles(this.cwd);