Images uploaded from Safari gets cut off

Question

I have a form in a web app where you can upload an image, and then i send a POST call to a GAS script. Then in the GAS script i save the image in a Google drive folder.

But if the image is uploaded from Safari it gets cut off like this:

This only happens to images uploaded with an iPhone.

Here's how i handle the image-data in the web app:

var reader = new FileReader();
var file = document.querySelector("input[name='file']").files[0];
var fileName = file.name;
reader.onload = function (e) {
  var html =
    '<input type="" id="data" value="' +
    e.target.result.replace(/^.*,/, "") +
    '" >';
  html +=
    '<input type="" id="mimetype" value="' +
    e.target.result.match(/^.*(?=;)/)[0] +
    '" >';
  html += '<input type="" id="filename" value="' + fileName + '" >';
  document.getElementById("filedata").innerHTML = html;

Post to the Google Apps Script:

var formData = new FormData();
var fileData = document.getElementById("data").value;
var mimetype = document.getElementById("mimetype").value;
var filename = document.getElementById("filename").value;
formData.append("data", fileData);
formData.append("mimetype", mimetype);
formData.append("filename", filename);

axios
  .post(
    "https://script.google.com/macros/s/myscript/exec",
    formData,
    {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }
  )

And the uploading part on the GAS side:

function doPost(e){
var data = Utilities.base64Decode(e.parameters.data);
var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);
// save image to selected folder
var folder = DriveApp.getFolderById('myid')
var file = folder.createFile(blob);
var id = file.getId();
IMAGE_ID = id;
}

Answer 1

If you upload it directly from the iPhone gallery, it probably breaks because it doesn't render as a .png or .jpg file, but if you upload a .png or .jpg from the phones downloaded files it should render correctly.

Answer 2

I think your mistake is that you are not waiting for the page/document to load correctly, with jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) to execute something when all other things are loaded as well, such as the images.