diff --git a/viz-dev-frontend/src/styles/components/form.scss b/viz-dev-frontend/src/styles/components/form.scss
index ef3400fa5528cfaaf4886adc5781d35307963d63..ca3bddee0d94d8ba4c366a32d27f6ae3f8911153 100644
--- a/viz-dev-frontend/src/styles/components/form.scss
+++ b/viz-dev-frontend/src/styles/components/form.scss
@@ -26,9 +26,9 @@ input[type=text], input[type=email], input[type=password], input[type=number], t
   background-color: transparent;
 }
 
-input[type=text]:active, input[type=email]:active, input[type=password]:active, input[type=number]:active, textarea:active,
-input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus,
-input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=number]:hover, textarea:hover {
+input[type=text]:active, input[type=email]:active, input[type=password]:active, input[type=number]:active, input[type=file]:active, textarea:active,
+input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=file]:focus, textarea:focus,
+input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=number]:hover, input[type=file]:hover, textarea:hover {
   outline: none;
   background-color: rgba(6, 116, 210, .05);
   border-bottom: 2px solid rgba(6, 116, 210, 1);
diff --git a/viz-dev-frontend/src/views/SeriesEdit.vue b/viz-dev-frontend/src/views/SeriesEdit.vue
index 74523891bc81833fb3b6fb026111e2ae0ca7566e..8d5056d06ec09994b72a610d9a3403b635e85b94 100644
--- a/viz-dev-frontend/src/views/SeriesEdit.vue
+++ b/viz-dev-frontend/src/views/SeriesEdit.vue
@@ -21,21 +21,12 @@
           v-if="!isSavingSeries"
           v-on:click="saveSeries">Simpan</button>
       </div>
-
-      <div class="entry-add">
-        <div class="align-self-start">
-          Tambah tahun:
-          <input type="number" v-model="addedYear">
-          <button
-            class="btn add-year"
-            v-on:click="addYear">Tambah</button>
-        </div>
-
-        <div class="import-data">
-            <button
-              class="btn import-data-btn align-self-end"
-              v-on:click="importCsv">Import</button>
-          </div>
+      <div class="align-self-start">
+        Tambah tahun:
+        <input type="number" v-model="addedYear">
+        <button
+          class="btn add-year"
+          v-on:click="addYear">Tambah</button>
       </div>
 
       <Loader class="loader" v-if="isLoadingEntries" />
@@ -66,6 +57,17 @@
       </div>
 
       <Loader class="loader" v-if="isSavingEntries" />
+
+      <div class="csv-importer form-group">
+        <div class="upload-btn-wrapper">
+          <button class="btn upload-csv">Upload Csv File</button>
+          <input type="file" name="file" ref="csvFileInput" v-on:change="handleFileUpload"/>
+        </div>
+        <input class="file-desc" type="text" :value="csvFile" disabled/>
+        <button
+          class="btn import-data align-self-end"
+          v-on:click="importCsv">Import</button>
+      </div>
     </div>
   </div>
 </template>
@@ -97,6 +99,8 @@ export default {
     isSavingSeries: false,
     isSavingEntries: false,
     addedYear: 2019,
+    csvFile: "",
+    files: [],
   }),
   created() {
     this.retrieveSeries();
@@ -165,6 +169,11 @@ export default {
       }
       this.$forceUpdate();
     },
+    handleFileUpload(event){
+      var fileData =  event.target.files[0];
+      this.files = event.target.files[0];
+      this.csvFile = fileData.name;
+    },
     importCsv(){
       confirm('test')
     },
@@ -268,10 +277,41 @@ textarea {
   justify-content: space-between; 
 }
 
-.entry-add {
+.csv-importer{
+  margin-top: 50px;
   display: flex;
   width: 100%;
   justify-content: space-between; 
 }
 
+.upload-btn-wrapper {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.upload-btn-wrapper input[type=file] {
+  font-size: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.csv-importer.file-desc {
+  margin-top: 19px;
+  margin-right: auto;
+  vertical-align: text-top;
+}
+
+.btn.upload-csv{
+  float: left;
+  margin-left: 0;
+}
+
+.btn.import-data{
+  float: right;
+  margin-right: 0;
+}
+
 </style>