luci/applications/luci-app-dockerman/luasrc/view/dockerman/images_import.htm

<input type="text" class="cbi-input-text" name="isrc" placeholder="http://host/image.tar" id="isrc" />
<input type="text" class="cbi-input-text" name="itag" placeholder="repository:tag" id="itag" />
<div style="display: inline-block;">
  <input type="button"" class=" cbi-button cbi-button-add" id="btnimport" name="import" value="<%:Import%>" />
  <input type="file" id="file_import" style="visibility:hidden; position: absolute;top: 0px; left: 0px;" />
</div>

<script type="text/javascript">
  let btnImport = document.getElementById('btnimport')
  let valISrc = document.getElementById('isrc')
  let valITag = document.getElementById('itag')
  btnImport.onclick = function (e) {
    if (valISrc.value == "") {
      document.getElementById("file_import").click()
      return
    } else {
      let formData = new FormData()
      formData.append('src', valISrc.value)
      formData.append('tag', valITag.value)
      let xhr = new XMLHttpRequest()
      uci_confirm_docker()
      xhr.open("POST", "<%=luci.dispatcher.build_url('admin/docker/images_import')%>", true)
      xhr.onload = function () {
        location.reload()
      }
      xhr.send(formData)
    }
  }
  let fileimport = document.getElementById('file_import')
  fileimport.onchange = function (e) {
    let fileimport = document.getElementById('file_import')
    if (!fileimport.value) {
      return
    }
    let valITag = document.getElementById('itag')
    let fileName = fileimport.files[0].name
    let formData = new FormData()
    formData.append('upload-filename', fileName)
    formData.append('tag', valITag.value)
    formData.append('upload-archive', fileimport.files[0])
    let xhr = new XMLHttpRequest()
    uci_confirm_docker()
    xhr.open("POST", "<%=luci.dispatcher.build_url('admin/docker/images_import')%>", true)
    xhr.onload = function () {
      fileimport.value = ''
      location.reload()
    }
    xhr.send(formData)
  }

  let new_tag = function (image_id) {
    let new_tag = prompt("<%:New tag%>\n<%:Image%>" + "ID: " + image_id + "\n<%:Please input new tag%>:", "")
    if (new_tag) {
      (new XHR()).post("<%=luci.dispatcher.build_url('admin/docker/images_tag')%>",
        { id: image_id, tag: new_tag },
        function (r) {
          if (r.status == 201) {
            location.reload()
          }
          else {
            docker_status_message('warning', 'Image: untagging ' + tag + '...fail code:' + r.status + r.statusText);
            document.getElementById('docker_apply_overlay').addEventListener("click", (e)=>{
              docker_status_message()
            })
          }
        })
    }
  }

  let un_tag = function (tag) {
    if (tag.match("<none>")) return
    if (confirm("<%:Remove tag%>: " + tag + " ?")) {
      (new XHR()).post("<%=luci.dispatcher.build_url('admin/docker/images_untag')%>",
        { tag: tag },
        function (r) {
          if (r.status == 200) {
            location.reload()
          }
          else {
            docker_status_message('warning', 'Image: untagging ' + tag + '...fail code:' + r.status + r.statusText);
            document.getElementById('docker_apply_overlay').addEventListener("click", (e)=>{
              docker_status_message()
            })
          }
        })
    }
  }
</script>