opml file import/export handlers

template/index.html

@@ -228,6 +228,16 @@
                 </div>
             </div>
             <div v-else-if="settings=='import'">
+                <form id="opml-import-form" enctype="multipart/form-data">
+                    <label for="opml-import">Import Subscription</label>
+                    <div class="custom-file">
+                        <input type="file" class="custom-file-input" id="opml-import" @change="importOPML" name="opml">
+                        <label class="custom-file-label" for="opml-import">Choose file</label>
+                    </div>
+                </form>
+                <label class="mt-3">Export Subscriptions</label>
+                <br>
+                <a class="btn btn-default" href="/opml/export" target="_blank">Download</a>
             </div>
         </div>
     </div>

template/static/javascripts/api.js

@@ -74,5 +74,11 @@
         return api('put', '/api/settings', data)
       },
     },
+    upload_opml: function(form) {
+      return fetch('/opml/import', {
+        method: 'post',
+        body: new FormData(form),
+      })
+    },
   }
 })()

template/static/javascripts/app.js

@@ -240,5 +240,9 @@ var vm = new Vue({
       }
       api.items.update(item.id, {status: item.status})
     },
+    importOPML: function(event) {
+      var form = document.querySelector('#opml-import-form')
+      api.upload_opml(form)
+    },
   }
 })