diff --git a/gdrive_to_commons/settings.py b/gdrive_to_commons/settings.py
index 8f39574..b2dfb0a 100644
--- a/gdrive_to_commons/settings.py
+++ b/gdrive_to_commons/settings.py
@@ -35,6 +35,7 @@
     "uploader",
     "rest_framework",
     "social_django",
+    "tellme",
 ]
 
 MIDDLEWARE = [
diff --git a/gdrive_to_commons/urls.py b/gdrive_to_commons/urls.py
index 9e5cbb4..5f2381b 100644
--- a/gdrive_to_commons/urls.py
+++ b/gdrive_to_commons/urls.py
@@ -32,5 +32,6 @@
     path(r"admin/", admin.site.urls),
     url(r"^api-auth/", include("rest_framework.urls")),
     url(r"^oauth/", include("social_django.urls", namespace="social")),
+    url(r'^tellme/', include("tellme.urls")),
     path("", HomePageView.as_view(), name="home_page"),
 ] + static(settings.STATIC_URL_DEPLOYMENT, document_root=settings.STATIC_ROOT)
diff --git a/requirements.txt b/requirements.txt
index c984473..f59c30e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -48,3 +48,5 @@ urllib3==1.25.3
 virtualenv==16.6.0
 Werkzeug==0.15.4
 zipp==0.5.1
+django-tellme==0.6.5
+Pillow==7.1.1
diff --git a/uploader/templates/upload.html b/uploader/templates/upload.html
index 305d959..033d925 100644
--- a/uploader/templates/upload.html
+++ b/uploader/templates/upload.html
@@ -1,389 +1,395 @@
-{% extends 'base/base.html' %}
-<!-- prettier-ignore -->
-{% load static %}
-<!-- prettier-ignore -->
-{% block meta %}
-<link
-  href="{% static 'css/tabulator_bootstrap4.min.css' %}"
-  rel="stylesheet"
-  crossorigin="anonymous"
-/>
-{% endblock %} {% block body %}
-<!-- prettier-ignore -->
-<div class="container">
-  <div class="row">
-    <div class="col-lg-9 mx-auto step-3">
-      <div class="card card-signin my-5">
-        <div class="card-body">
-          <div class="row logo-row col-xs-12">
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
-            </div>
-            <div class="col-xs-4">
-              <i class="fas fa-caret-right"></i>
-            </div>
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
-            </div>
-          </div>
-
-          <h5 class="app-desc text-center">Your selected file(s):</h5>
-          <div class="table-responsive">
-            <table class="table files-table" id="picked-files-table">
-            </table>
-          </div>
-
-          <form class="form-signin">
-            <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button" id="upload-button"
-              onclick="uploadFiles()">
-              Upload to Wikimedia Commons <i class="fas fa-caret-right"></i>
-            </button>
-            <hr class="my-4" />
-            <h5 class="card-title text-center">
-              <div class="progress">
-                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
-                  aria-valuemax="100">
-                  75%
-                </div>
-              </div>
-            </h5>
-          </form>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-sm-9 col-md-7 col-lg-5 mx-auto step-1-2">
-      <div class="card card-signin my-5">
-        <div class="card-body">
-          <div class="row logo-row col-xs-12">
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
-            </div>
-            <div class="col-xs-4">
-              <i class="fas fa-caret-right"></i>
-            </div>
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
-            </div>
-          </div>
-
-          <h5 class="app-desc text-center">
-            Upload your photos from Google Drive to Wikimedia Commons!
-          </h5>
-
-          <form class="form-signin">
-            {% if user.is_authenticated %}
-            <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button"
-              onclick="onGoogleUploadButtonClick()">
-              Choose photos from Google Drive
-              <i class="fas fa-caret-right"></i>
-            </button>
-            {% else %}
-            <a href="{% url 'social:begin' 'mediawiki' %}" style="text-decoration: none">
-              <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button">
-                Login to Wikimedia Commons
-                <i class="fas
-                    fa-caret-right fa-1x"></i>
-              </button>
-            </a>
-            {% endif %}
-
-            <hr class="my-4" />
-            <h5 class="card-title text-center">
-              <div class="progress">
-                {% if user.is_authenticated %}
-                <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
-                  aria-valuemax="100">
-                  50%
-                </div>
-                {% else %}
-
-                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
-                  aria-valuemax="100">
-                  25%
-                </div>
-                {% endif %}
-              </div>
-            </h5>
-          </form>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-8 mx-auto step-4">
-      <div class="card card-signin my-5">
-        <div class="card-body">
-          <div class="row logo-row col-xs-12">
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
-            </div>
-            <div class="col-xs-4">
-              <i class="fas fa-caret-right"></i>
-            </div>
-            <div class="col-xs-4">
-              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
-            </div>
-          </div>
-
-          <h5 class="app-desc text-center">
-            The following files were uploaded!
-          </h5>
-
-                      <div class="table-responsive mb-3">
-                        <table class="table mb-0 results-panel">
-                          <thead>
-                            <tr>
-                              <th style="width: 105px">Preview</th>
-                              <th>Name of file</th>
-                            </tr>
-                          </thead>
-                        </table>
-                      </div>
-
-          <a class="btn btn-lg btn-primary btn-block text-uppercase" href='{% url "upload_page" %}'>
-            Upload more <i class="fas fa-caret-right"></i>
-          </a>
-
-          <hr class="my-4" />
-
-          <h5 class="card-title text-center">
-            <div class="progress">
-              <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
-                aria-valuemax="100">
-                100%
-              </div>
-            </div>
-          </h5>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- prettier-ignore -->
-{% endblock body %}
-<!-- prettier-ignore -->
-{% block scripts %}
-<!-- prettier-ignore -->
-<script type="text/javascript" src="{% static 'js/gapi.js' %}"></script>
-<script
-  type="text/javascript"
-  src="{% static 'js/tabulator.min.js' %}"
-></script>
-<script type="text/javascript">
-  $(".step-3").hide();
-  $(".step-4").hide();
-  // The Browser API key obtained from the Google API Console.
-  // Replace with your own Browser API key, or your own key.
-  var pickedFiles = [];
-  var developerKey = "{{ developer_key }}";
-
-  // The Client ID obtained from the Google API Console. Replace with your own Client ID.
-  var clientId = "{{ client_id }}";
-
-  // Replace with your own project number from console.developers.google.com.
-  // See "Project number" under "IAM & Admin"     > "Settings"
-  var appId = "{{ google_app_id }}";
-
-  // Scope to use to access user's Drive items.
-  var scope = ["https://www.googleapis.com/auth/drive.readonly"];
-
-  var pickerApiLoaded = false;
-  var oauthToken;
-  var fileStagingTable;
-
-  // Use the Google API Loader script to load the google.picker script.
-  function onGoogleUploadButtonClick() {
-    gapi.load("auth", { callback: onAuthApiLoad });
-    gapi.load("picker", { callback: onPickerApiLoad });
-  }
-
-  function onAuthApiLoad() {
-    window.gapi.auth.authorize(
-      {
-        client_id: clientId,
-        scope: scope,
-        immediate: false
-      },
-      handleAuthResult
-    );
-  }
-  function onPickerApiLoad() {
-    pickerApiLoaded = true;
-    createPicker();
-  }
-  function handleAuthResult(authResult) {
-    if (authResult && !authResult.error) {
-      oauthToken = authResult.access_token;
-      createPicker();
-    }
-  }
-
-  // Create and render a Picker object for searching images.
-  function createPicker() {
-    if (pickerApiLoaded && oauthToken) {
-      var view = new google.picker.DocsView().setIncludeFolders(true);
-      view.setMimeTypes("image/jpeg,image/jpg,image/gif,image/png,image/bmp");
-      view.setParent("root");
-      var picker = new google.picker.PickerBuilder()
-        .enableFeature(google.picker.Feature.NAV_HIDDEN)
-        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
-        .setAppId(appId)
-        .setOAuthToken(oauthToken)
-        .addView(view)
-        .addView(new google.picker.DocsUploadView())
-        .setDeveloperKey(developerKey)
-        .setCallback(pickerCallback)
-        .build();
-      picker.setVisible(true);
-    }
-  }
-
-  function generateGdriveThumbNailLink(itemId) {
-    return `https://drive.google.com/thumbnail?authuser=0&sz=w50-h50&id=${itemId}`;
-  }
-  // A simple callback implementation.
-  function pickerCallback(data) {
-    if (data.action == google.picker.Action.PICKED) {
-      data.docs.forEach(item =>
-        pickedFiles.push({
-          name: item.name,
-          id: item.id,
-          description: item.description
-        })
-      );
-
-      $(".step-3").show();
-      $(".step-1-2").hide();
-
-      fileStagingTable = new Tabulator("#picked-files-table", {
-        data: pickedFiles,
-        layout: "fitColumns",
-        columns: [
-          {
-            title: "File",
-            field: "id",
-            formatter: function(cell, formatterParams, onRendered) {
-              return `<img src='${generateGdriveThumbNailLink(
-                cell.getValue()
-              )}'>`;
-            },
-            width: 80
-          },
-          {
-            title: "License",
-            field: "license",
-            width: 300,
-            formatter: function(cell, formatterParams, onRendered) {
-              return `{% include 'licenses.html' %}`;
-            }
-          },
-          {
-            title: "Title",
-            field: "name",
-            editor: "input",
-            validator: "unique"
-          },
-          {
-            title: "Description",
-            field: "description",
-            editor: "textarea",
-            validator: "required"
-          },
-          {
-            formatter: "buttonCross",
-            width: 40,
-            align: "center",
-            headerSort: false,
-            cellClick: function(e, cell) {
-              cell.getRow().delete();
-            }
-          }
-        ]
-      });
-      fileStagingTable.setData(pickedFiles);
-    }
-  }
-
-  function uploadFiles() {
-    // Disable the button first.
-    $("#upload-button").prop("disabled", true);
-    $("#upload-button i")
-      .removeClass("fa-caret-right")
-      .addClass("fa-spinner fa-spin");
-    var fileData = {
-      fileList: fileStagingTable.getData(),
-      token: oauthToken
-    };
-
-    for (var x = 0; x < fileData["fileList"].length; x++) {
-      var sel = document.getElementById(
-        `wpLicense${fileData["fileList"][x]["id"]}`
-      );
-      fileData["fileList"][x]["license"] = sel.value;
-    }
-
-    function getCookie(name) {
-      var cookieValue = null;
-      if (document.cookie && document.cookie !== "") {
-        var cookies = document.cookie.split(";");
-        for (var i = 0; i < cookies.length; i++) {
-          var cookie = cookies[i].trim();
-          // Does this cookie string begin with the name we want?
-          if (cookie.substring(0, name.length + 1) === name + "=") {
-            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-            break;
-          }
-        }
-      }
-      return cookieValue;
-    }
-
-    var csrftoken = getCookie("csrftoken");
-
-    function csrfSafeMethod(method) {
-      // these HTTP methods do not require CSRF protection
-      return /^(GET|HEAD|OPTIONS|TRACE)$/.test(method);
-    }
-
-    function enableUploadButton() {
-      $("#upload-button").prop("disabled", false);
-      $("#upload-button i")
-        .removeClass("fa-spinner fa-spin")
-        .addClass("fa-caret-right");
-    }
-
-    $.ajax({
-      // prettier-ignore
-      url: "{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% url 'file_upload' %}",
-      type: "POST",
-      data: JSON.stringify(fileData),
-      cache: false,
-      processData: false,
-      contentType: "application/json",
-      beforeSend: function(xhr, settings) {
-        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-          xhr.setRequestHeader("X-CSRFToken", csrftoken);
-        }
-      },
-      success: function(data) {
-        $(".step-3").hide();
-        $(".step-1-2").hide();
-        $(".step-4").show();
-        $(".results-panel").append("<tbody>");
-        enableUploadButton();
-        data.forEach(function(item) {
-          $(".results-panel").append(
-            `<tr><td><img src='${item.url}' style='width: 50px'></td><td><a href='${item.descriptionurl}' target='_blank'>${item.canonicaltitle}</a></td></tr>`
-          );
-        });
-        $(".results-panel").append("</tbody>");
-      },
-      error: function() {
-        console.log("error");
-        enableUploadButton();
-      }
-    });
-  }
-</script>
-<!-- prettier-ignore -->
-{% endblock scripts %}
+{% extends 'base/base.html' %}
+<!-- prettier-ignore -->
+{% load static %}
+<!-- prettier-ignore -->
+{% block meta %}
+<link
+  href="{% static 'css/tabulator_bootstrap4.min.css' %}"
+  rel="stylesheet"
+  crossorigin="anonymous"
+/>
+<link href="{% static 'tellme/feedback.min.css' %}" rel="stylesheet">
+{% endblock %} {% block body %}
+<!-- prettier-ignore -->
+<button type="button" id="feedback-btn" class="btn btn-info vertical-right-aligned">
+    Feedback <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
+</button>
+<div class="container">
+  <div class="row">
+    <div class="col-lg-9 mx-auto step-3">
+      <div class="card card-signin my-5">
+        <div class="card-body">
+          <div class="row logo-row col-xs-12">
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
+            </div>
+            <div class="col-xs-4">
+              <i class="fas fa-caret-right"></i>
+            </div>
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
+            </div>
+          </div>
+
+          <h5 class="app-desc text-center">Your selected file(s):</h5>
+          <div class="table-responsive">
+            <table class="table files-table" id="picked-files-table">
+            </table>
+          </div>
+
+          <form class="form-signin">
+            <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button" id="upload-button"
+              onclick="uploadFiles()">
+              Upload to Wikimedia Commons <i class="fas fa-caret-right"></i>
+            </button>
+            <hr class="my-4" />
+            <h5 class="card-title text-center">
+              <div class="progress">
+                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
+                  aria-valuemax="100">
+                  75%
+                </div>
+              </div>
+            </h5>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-9 col-md-7 col-lg-5 mx-auto step-1-2">
+      <div class="card card-signin my-5">
+        <div class="card-body">
+          <div class="row logo-row col-xs-12">
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
+            </div>
+            <div class="col-xs-4">
+              <i class="fas fa-caret-right"></i>
+            </div>
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
+            </div>
+          </div>
+
+          <h5 class="app-desc text-center">
+            Upload your photos from Google Drive to Wikimedia Commons!
+          </h5>
+
+          <form class="form-signin">
+            {% if user.is_authenticated %}
+            <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button"
+              onclick="onGoogleUploadButtonClick()">
+              Choose photos from Google Drive
+              <i class="fas fa-caret-right"></i>
+            </button>
+            {% else %}
+            <a href="{% url 'social:begin' 'mediawiki' %}" style="text-decoration: none">
+              <button class="btn btn-lg btn-primary btn-block text-uppercase" type="button">
+                Login to Wikimedia Commons
+                <i class="fas
+                    fa-caret-right fa-1x"></i>
+              </button>
+            </a>
+            {% endif %}
+
+            <hr class="my-4" />
+            <h5 class="card-title text-center">
+              <div class="progress">
+                {% if user.is_authenticated %}
+                <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
+                  aria-valuemax="100">
+                  50%
+                </div>
+                {% else %}
+
+                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
+                  aria-valuemax="100">
+                  25%
+                </div>
+                {% endif %}
+              </div>
+            </h5>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-8 mx-auto step-4">
+      <div class="card card-signin my-5">
+        <div class="card-body">
+          <div class="row logo-row col-xs-12">
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Google_Drive_Logo.svg' %}" width="100px" />
+            </div>
+            <div class="col-xs-4">
+              <i class="fas fa-caret-right"></i>
+            </div>
+            <div class="col-xs-4">
+              <img src="{% static 'svg/Commons-logo.svg' %}" height="100px" />
+            </div>
+          </div>
+
+          <h5 class="app-desc text-center">
+            The following files were uploaded!
+          </h5>
+
+          <div class="table-responsive mb-3">
+            <table class="table mb-0 results-panel">
+              <thead>
+                <tr>
+                  <th style="width: 105px">Preview</th>
+                  <th>Name of file</th>
+                  <th>Link to upload</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+
+          <a class="btn btn-lg btn-primary btn-block text-uppercase" href='{% url "upload_page" %}'>
+            Upload more <i class="fas fa-caret-right"></i>
+          </a>
+
+          <hr class="my-4" />
+
+          <h5 class="card-title text-center">
+            <div class="progress">
+              <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
+                aria-valuemax="100">
+                100%
+              </div>
+            </div>
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{%  include 'tellme/js_inc.html' %}  
+<!-- prettier-ignore -->
+{% endblock body %}
+<!-- prettier-ignore -->
+{% block scripts %}
+<!-- prettier-ignore -->
+<script type="text/javascript" src="{% static 'js/gapi.js' %}"></script>
+<script
+  type="text/javascript"
+  src="{% static 'js/tabulator.min.js' %}"
+></script>
+<script type="text/javascript">
+  $(".step-3").hide();
+  $(".step-4").hide();
+  // The Browser API key obtained from the Google API Console.
+  // Replace with your own Browser API key, or your own key.
+  var pickedFiles = [];
+  var developerKey = "{{ developer_key }}";
+
+  // The Client ID obtained from the Google API Console. Replace with your own Client ID.
+  var clientId = "{{ client_id }}";
+
+  // Replace with your own project number from console.developers.google.com.
+  // See "Project number" under "IAM & Admin"     > "Settings"
+  var appId = "{{ google_app_id }}";
+
+  // Scope to use to access user's Drive items.
+  var scope = ["https://www.googleapis.com/auth/drive.readonly"];
+
+  var pickerApiLoaded = false;
+  var oauthToken;
+  var fileStagingTable;
+
+  // Use the Google API Loader script to load the google.picker script.
+  function onGoogleUploadButtonClick() {
+    gapi.load("auth", { callback: onAuthApiLoad });
+    gapi.load("picker", { callback: onPickerApiLoad });
+  }
+
+  function onAuthApiLoad() {
+    window.gapi.auth.authorize(
+      {
+        client_id: clientId,
+        scope: scope,
+        immediate: false
+      },
+      handleAuthResult
+    );
+  }
+  function onPickerApiLoad() {
+    pickerApiLoaded = true;
+    createPicker();
+  }
+  function handleAuthResult(authResult) {
+    if (authResult && !authResult.error) {
+      oauthToken = authResult.access_token;
+      createPicker();
+    }
+  }
+
+  // Create and render a Picker object for searching images.
+  function createPicker() {
+    if (pickerApiLoaded && oauthToken) {
+      var view = new google.picker.DocsView().setIncludeFolders(true);
+      view.setMimeTypes("image/jpeg,image/jpg,image/gif,image/png,image/bmp");
+      view.setParent('root');
+      var picker = new google.picker.PickerBuilder()
+        .enableFeature(google.picker.Feature.NAV_HIDDEN)
+        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
+        .setAppId(appId)
+        .setOAuthToken(oauthToken)
+        .addView(view)
+        .addView(new google.picker.DocsUploadView())
+        .setDeveloperKey(developerKey)
+        .setCallback(pickerCallback)
+        .build();
+      picker.setVisible(true);
+    }
+  }
+
+  function generateGdriveThumbNailLink(itemId) {
+    return `https://drive.google.com/thumbnail?authuser=0&sz=w50-h50&id=${itemId}`;
+  }
+  // A simple callback implementation.
+  function pickerCallback(data) {
+    if (data.action == google.picker.Action.PICKED) {
+      data.docs.forEach(item =>
+        pickedFiles.push({
+          name: item.name,
+          id: item.id,
+          description: item.description
+        })
+      );
+
+      $(".step-3").show();
+      $(".step-1-2").hide();
+
+      fileStagingTable = new Tabulator("#picked-files-table", {
+        data: pickedFiles,
+        layout: "fitColumns",
+        columns: [
+          {
+            title: "File",
+            field: "id",
+            formatter: function(cell, formatterParams, onRendered) {
+              return `<img src='${generateGdriveThumbNailLink(
+                cell.getValue()
+              )}'>`;
+            },
+            width: 80
+          },
+          {
+            title: "License",
+            field: "license",
+            width: 300,
+            formatter: function(cell, formatterParams, onRendered) {
+              return `{% include 'licenses.html' %}`;
+            }
+          },
+          {
+            title: "Title",
+            field: "name",
+            editor: "input",
+            validator: "unique"
+          },
+          {
+            title: "Description",
+            field: "description",
+            editor: "textarea",
+            validator: "required"
+          },
+          {
+            formatter: "buttonCross",
+            width: 40,
+            align: "center",
+            headerSort: false,
+            cellClick: function(e, cell) {
+              cell.getRow().delete();
+            }
+          }
+        ]
+      });
+      fileStagingTable.setData(pickedFiles);
+    }
+  }
+
+  function uploadFiles() {
+    // Disable the button first.
+    $("#upload-button").prop("disabled", true);
+    $("#upload-button i")
+      .removeClass("fa-caret-right")
+      .addClass("fa-spinner fa-spin");
+    var fileData = {
+      fileList: fileStagingTable.getData(),
+      token: oauthToken
+    };
+
+    for (var x = 0; x < fileData["fileList"].length; x++) {
+      var sel = document.getElementById(
+        `wpLicense${fileData["fileList"][x]["id"]}`
+      );
+      fileData["fileList"][x]["license"] = sel.value;
+    }
+
+    function getCookie(name) {
+      var cookieValue = null;
+      if (document.cookie && document.cookie !== "") {
+        var cookies = document.cookie.split(";");
+        for (var i = 0; i < cookies.length; i++) {
+          var cookie = cookies[i].trim();
+          // Does this cookie string begin with the name we want?
+          if (cookie.substring(0, name.length + 1) === name + "=") {
+            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+            break;
+          }
+        }
+      }
+      return cookieValue;
+    }
+
+    var csrftoken = getCookie("csrftoken");
+
+    function csrfSafeMethod(method) {
+      // these HTTP methods do not require CSRF protection
+      return /^(GET|HEAD|OPTIONS|TRACE)$/.test(method);
+    }
+
+    function enableUploadButton() {
+      $("#upload-button").prop("disabled", false);
+      $("#upload-button i")
+        .removeClass("fa-spinner fa-spin")
+        .addClass("fa-caret-right");
+    }
+
+    $.ajax({
+      // prettier-ignore
+      url: "{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% url 'file_upload' %}",
+      type: "POST",
+      data: JSON.stringify(fileData),
+      cache: false,
+      processData: false,
+      contentType: "application/json",
+      beforeSend: function(xhr, settings) {
+        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+          xhr.setRequestHeader("X-CSRFToken", csrftoken);
+        }
+      },
+      success: function(data) {
+        $(".step-3").hide();
+        $(".step-1-2").hide();
+        $(".step-4").show();
+        $(".results-panel").append("<tbody>");
+        enableUploadButton();
+        data.forEach(function(item) {
+          $(".results-panel").append(
+            `<tr><td><img src='${item.url}' style='width: 50px'></td><td>${item.canonicaltitle}</td><td><a href='${item.url}' target='_blank'>${item.url}</a></td></tr>`
+          );
+        });
+        $(".results-panel").append("</tbody>");
+      },
+      error: function() {
+        console.log("error");
+        enableUploadButton();
+      }
+    });
+  }
+</script>
+<!-- prettier-ignore -->
+{% endblock scripts %}