-1

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:

cut off image

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;
}
aneko5
  • 81
  • 1
  • 1
  • 11
  • 1
    What is version of the operative system and the name and version of the web-browser that you are using? Have you tried using different web browsers? Also, please add a [mcve]. – Rubén Apr 20 '22 at 13:45
  • 2
    Unfortunately, I cannot understand the relationship between the script of `Here's how i handle the image-data in the web app:` and the script of `And the uploading part on the GAS side:`. Can I ask you about the detail of your current issue? – Tanaike Apr 20 '22 at 13:48
  • @Tanaike the image-data gets sent to the google apps script, i'll add the post part aswell to make it clearer – aneko5 Apr 20 '22 at 14:00
  • @Rubén unsure about the versions as this have happened from multiple iphone users, i dont have any analyctics tools but i know most of the have the latest generations of iPhone and are using either chrome or safari. – aneko5 Apr 20 '22 at 14:07
  • Thanks for you reply. Please checkout https://stackoverflow.com/q/5916900/1595451 P.S. (don't forget to add a [mcve]). – Rubén Apr 20 '22 at 14:11
  • Thank you for replying. I apologize for my poor English skill. Unfortunately, I cannot still understand your situation. But I would like to try to understand it. When I could correctly understand it, I would like to think of a solution. I would be grateful if you can forgive my poor English skill. – Tanaike Apr 21 '22 at 00:39
  • Try setting you iphone back to jpg. – Cooper Apr 21 '22 at 02:17
  • @Tanaike no worries about your english skills at all! What do you need from me in order to understand it? – aneko5 Apr 21 '22 at 11:12
  • Does your problem appear on macOS or only iPhone, and which browser have you tested – Chinh Nguyen Apr 25 '22 at 03:17
  • and why would you have to post separate fields: `data`, `mimetype`, and `filename` instead of posting the whole file? the file object itself contain all these information – Chinh Nguyen Apr 25 '22 at 03:38
  • 2
    This is not problem with macos or other, this is problem with how you wrote code to upload, its very wrong. eg you dont need `Reader` to get file name and mimetype, just use `files[0].name` and `files[0].type` instead of manipulating binary using regexp. there is lot more to fix but sorry I can't explain all. – bogdanoff Apr 25 '22 at 09:25

2 Answers2

0

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.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Walter Bjurbo
  • 1
  • 1
0

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.

Ayman Jabr
  • 11
  • 3