js-encode-base64-fetch.html

Please select a file to upload:
<br>
<input id="file" type="file" accept="image/*">
<br>
<button id="button">Upload</button>

<script runat="client">
  document.getElementById("button")
      .addEventListener("click", function() {
          var files = document.getElementById("file").files;
          if (files.length > 0) {
              getBase64(files[0]);
          }
      });

  function getBase64(file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {

          //prepare data to pass to processing page 
          var fileEncoded = reader.result;
          var base64enc = fileEncoded.split(";base64,")[1];
          var fullFileName = document.getElementById("file").files[0].name;
          var fileName = fullFileName.split(".")[0];
          var assetName = fullFileName.split(".")[1];

          fetch("https://pub.s10.exacttarget.com/xxxxxxxxx", {  //provide URL of the processing page
                  method: "POST",
                  headers: {
                      "Content-Type": "application/json"
                  },
                  body: JSON.stringify({
                      base64enc: base64enc,
                      fileName: fileName,
                      assetName: assetName
                  })
              })
              .then(function(res) {
                      window.alert("Success!");
              })
              .catch(function(err) {
                  window.alert("Error!");
              });
      };
      reader.onerror = function(error) {
          console.log('Error: ', error);
      };
  }
</script>