/paste file upload - for #4733

app/views/game/importGame.scala.html

@@ -1,13 +1,5 @@
 @(form: Form[_])(implicit ctx: Context)
 
-@moreJs = {
-@embedJs {
-$("#import_game form").submit(function() {
-setTimeout(function() { $(this).html(lichess.spinnerHtml); }.bind(this), 50);
-});
-}
-}
-
 @analyseHelp = {
   @if(ctx.isAnon) { <a class="blue" href="@routes.Auth.signup">@trans.youNeedAnAccountToDoThat()</a> }
 }
@@ -15,7 +7,7 @@ setTimeout(function() { $(this).html(lichess.spinnerHtml); }.bind(this), 50);
 @base.layout(
 title = trans.importGame.txt(),
 moreCss = cssTags("form3.css", "import.css"),
-moreJs = moreJs,
+moreJs = jsTag("importer.js"),
 openGraph = lila.app.ui.OpenGraph(
 title = "Paste PGN chess game",
 url = s"$netBaseUrl${routes.Importer.importGame.url}",
@@ -25,6 +17,7 @@ description = "When pasting a game PGN, you get a browsable replay, a computer a
   <p class="explanation">@trans.importGameExplanation()</p>
   <form class="form3 import" action="@routes.Importer.sendGame()" method="post">
     @form3.group(form("pgn"), trans.pasteThePgnStringHere())(form3.textarea(_))
+    @form3.group(form("pgnFile"), Html("Or upload a PGN file"), klass = "upload")(form3.input(_, typ = "file"))
     @form3.checkbox(form("analyse"), trans.requestAComputerAnalysis(), help = analyseHelp.some, disabled = ctx.isAnon)
     @form3.action(form3.submit(trans.importGame()))
   </form>

public/javascripts/importer.js

@@ -0,0 +1,20 @@
+$(function() {
+  var $form = $("#import_game form");
+  $form.submit(function() {
+    setTimeout(function() { $form.html(lichess.spinnerHtml); }, 50);
+  });
+
+  if (window.FileReader) {
+    $form.find('input[type=file]').on('change', function() {
+      var file = this.files[0];
+      if (!file) return;
+      var $file = $(this);
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        $form.find('textarea').val(e.target.result);
+        $file.val('');
+      };
+      reader.readAsText(file);
+    });
+  } else $form.find('.upload').remove();
+});