Переписал приложение на Vue. Изменена верстка.

1 files changed, 73 insertions, 0 deletions

diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue
new file mode 100644
index 0000000..f544088
--- /dev/null
+++ b/day9/task5_vue/src/components/UploadFileButton.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <form action="/api/upload" method="post" enctype="multipart/form-data">
+            <input type="file" name="csvFile" ref="csvFileInput"
+                   accept="text/csv" style="display: none;"
+                   onchange="form.submit()">
+        </form>
+        <button
+                @mouseenter="isHovered = true"
+                @mouseleave="isHovered = false"
+                @click="triggerUploadFile">
+            <div v-if="isHovered">Upload File</div>
+            <div v-else>
+                <img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">
+            </div>
+        </button>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: "UploadFileButton",
+
+        data() {
+            return {
+                isHovered: false
+            }
+        },
+
+        methods: {
+            triggerUploadFile() {
+                console.log('Clicked');
+                console.log(this.$refs.csvFileInput);
+                this.$refs.csvFileInput.click();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    button {
+        overflow: hidden;
+        white-space: nowrap;
+
+        position: fixed;
+
+        padding: 5px;
+        border-radius: 50px;
+        width: 100px;
+        height: 100px;
+        border: none;
+        background-color: #2871e2;
+        color: white;
+        font-size: 45px;
+
+        transition-property: width;
+        transition-duration: 0.6s;
+
+        bottom: 175px;
+        left: 50px;
+    }
+
+    button:hover {
+        width: 300px;
+        font-size: 30px;
+        background-color: #286bd6;
+    }
+
+    button:focus {
+        background-color: #2861c3;
+    }
+</style>
\ No newline at end of file