JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<input type="text" id="af_rpta_propertyland_filename" placeholder="Please input file name"/><br />
<input type="file" id="image" accepts=".pdf" />

JavaScript

$("#image").on("change", function(e) {
  var name = $("#af_rpta_propertyland_filename").val();
  var file = e.target.files[0];
  var filename = name.length > 1 ? name + ".pdf" : file.name;
  var filetype = file.type;
  var filesize = file.size;
  var data = {
      "filename":filename,
      "filetype":filetype,
      "filesize":filesize
      };
  console.log(data);
  var reader = new FileReader();
    reader.onload = function(e) {
      data.file_base64 = e.target.result.split(/,/)[1];
        $.post("/echo/json/", {json:JSON.stringify(data)}, "json")
        .then(function(data) {
          console.log(data);
          var results = $("<a />", {
                "href": "data:" + data.filetype + ";base64," + data.file_base64,
                "download": data.filename,
                "target": "_blank",
                "text": data.filename
              });
            $("body").append("<br>download: ", results[0]);
        }, function(jqxhr, textStatus, errorThrown) {
          console.log(textStatus, errorThrown)
        })
    };
    reader.readAsDataURL(file)
})