Сломанный файл после загрузки с помощью Google Apps Script -> страница загрузки

Question

Я подготовил простой Google App Script с формой загрузки, чтобы позволить моему другу без учетной записи Google загружать некоторые файлы (разные типы - картинки, docx, png и т. Д. c; довольно маленькие файлы - до 10 МБ)

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {
  try {
    var mainFolder = "Tmp_Uploads";

    var folder = DriveApp.getFoldersByName(mainFolder).next();
    var file = folder.createFile(form.myFile);

    return "File uploaded successfully " + file.getUrl();
  } catch (error) {
    return error.toString();
  }
}

Механизм работает -> после загрузки файл отображается в моей папке "Tmp_Uploads" на Google Диске. Но когда я загружаю его в свой P C -> файл поврежден.

Я протестировал его с .jpg, .png, .do c, и все они сломаны - не могу открыть их (они также имеют размер, отличный от исходного).

Когда я загружаю простой файл .txt -> он работает нормально.

Вопросы: 1. Что не так? 2. Могу ли я как-то восстановить файл, который был загружен вышеуказанным механизмом? Расшифруйте его после загрузки в P C или постпроцесс, чтобы можно было его открыть?

Приветствия и заранее спасибо!

Answer 1

Попробуйте эту Javascript функцию в вашем html перед вызовом функции uploadFiles () вашего скрипта Google.

<script>
function uploadFile(form) {
    const file=form.File.files[0];
    const fr=new FileReader();//all this FileReader code originally came from Tanaike
    fr.onload=function(e) {
      const obj={filename:file.name,mimeType:file.type,bytes:[...new Int8Array(e.target.result)]};
      google.script.run.uploadFiles(obj);
    }
    fr.readAsArrayBuffer(file);
  }
  </script>

Тогда ваша функция скрипта Google выглядит следующим образом:

function uploadFiles(form) {
   var mainFolder = "Tmp_Uploads";
    var folder = DriveApp.getFoldersByName(mainFolder).next();
    var blob = Utilities.newBlob(form.bytes, form.mimeType, form.filename);
    var file=folder.createFile(blob); 
    return "File uploaded successfully " + file.getUrl();
}

Пример

Ссылка

Если у вас есть больше данных в форме, чем просто загрузка файла, взгляните на этот пример.

<script>
function uploadFile(form) {
    console.log('form.elements.Destination.value= %s',form.elements.Destination.value);
    console.log('format.elements.FileName.value= %s',form.elements.FileName.value);
    $('#msg').css('display','block');
    $('#msg').html('UpLoading...Please Wait');
    const file=form.File.files[0];
    const fr=new FileReader();//all this FileReader code originally came from Tanaike
    fr.onload=function(e) {
      const obj={FileName:form.elements.FileName.value,Destination:form.elements.Destination.value,mimeType:file.type,bytes:[...new Int8Array(e.target.result)]};//this allowed me to put the rest of the Form.elements back into the object before sending it to google scripts
      google.script.run
      .withSuccessHandler(function(msg){
        $('#msg').css('display','block');
        $('#msg').html(msg);//I returned a message after the download 
      })
      .uploadFile(obj);
    }
    fr.readAsArrayBuffer(file);
  }
  </script>



<form>
  <br /><select id="sel1" name="Destination"></select> Upload Destination
  <br /><input type="text" name='FileName' /> File Name
  <br /><input type="file" name='File'; />
  <br /><input type="button" value="Upload" onClick="uploadFile(this.parentNode);" />
  <br /><input type="button" value="Close" onclick="google.script.host.close();" />
  <div id="msg"></div>
</form>