Dosyanın yükleneceği Park seçimi için gerekli arayüz yapıldı

src/App.vue

 <template>
   <div id="app">
+    <UploadModal />
     <el-container class="body">
       <el-container>
         <el-main><Containers /></el-main>
@@ -10,9 +11,11 @@
 
 <script>
 import Containers from "./views/Containers.vue";
+import UploadModal from "./components/UploadModal.vue";
 export default {
   name: "App",
   components: {
+    UploadModal,
     Containers
   }
 };

src/components/UploadModal.vue

+<template>
+  <el-dialog
+    v-bind:title="$t('containers.upload_modal.title')"
+    v-bind:visible.sync="open"
+  >
+    <el-form
+      v-bind:model="form"
+      v-if="containers.length"
+      label-position="left"
+      label-width="200px"
+    >
+      <el-form-item v-bind:label="$t('containers.upload_modal.label.file')">
+        {{ this.file }}
+      </el-form-item>
+      <el-form-item
+        v-bind:label="$t('containers.upload_modal.label.container')"
+      >
+        <el-select v-model="form.container" style="width:100%">
+          <el-option
+            v-bind:label="container.Names[0]"
+            v-for="(container, index) in containers"
+            v-bind:value="index"
+            v-bind:key="container.Id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-alert title="Oyun parkın yok" type="success" effect="dark" v-else />
+    {{ this.file }}
+    <span slot="footer" class="dialog-footer">
+      <el-button
+        v-on:click="open = false"
+        v-text="$t('containers.upload_modal.buttons.cancel')"
+      />
+      <el-button
+        type="primary"
+        v-on:click="
+          () => {
+            open = false;
+            send();
+          }
+        "
+        v-text="$t('containers.upload_modal.buttons.send')"
+      />
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "UploadModal",
+  data() {
+    return {
+      containers: [],
+      form: {
+        container: null
+      },
+      open: false,
+      file: null
+    };
+  },
+  created() {
+    let vm = this;
+    window.addEventListener(
+      "modal",
+      function(e) {
+        vm.getContainers();
+        if (vm.containers.length === 0) {
+          vm.$message({
+            message: vm.$t("containers.upload_modal.no_container_message"),
+            type: "error"
+          });
+        } else {
+          vm.open = e.detail.modal;
+          vm.file = e.detail.file;
+        }
+      },
+      false
+    );
+  },
+  methods: {
+    getContainers: function() {
+      this.$loading();
+      this.$http
+        .get(`/containers`)
+        .then(({ data }) => {
+          this.containers = data;
+        })
+        .finally(() => {
+          this.$loading().close();
+        });
+    },
+    send: function() {
+      const container = this.containers[this.form.container];
+      window.ipcRenderer.send("modal_upload", {
+        Id: container.Id,
+        Source: container.Labels["desktop.docker.io/binds/0/Source"],
+        Target: container.Labels["desktop.docker.io/binds/0/Target"],
+        Username: container.Labels["Username"],
+        File: this.file
+      });
+    }
+  }
+};
+</script>