Попытка загрузить несколько файлов в Google Диск с помощью сценариев

Я пытаюсь изменить код ctrlq (здесь: http://ctrlq.org/code/19747-google-forms-upload-files), чтобы загрузить несколько файлов вместо 1.

Вот что у меня есть до сих пор: HTML:

    <form id="myForm">
    <input type="text" name="myName" placeholder="Name">
    <input type="password" name="psw" placeholder="Password">
    <input type="text" name="myFolder" placeholder="Folder Name">
    <input type="file" name="myFile" id="filesID" multiple>
    <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
</form>

<div id="output"></div>

<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

<style>
 input { display:block; margin: 20px; }
</style>

Скрипты Google:

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

function uploadFiles(form) {

  try {
    var input = document.getElementById('filesID');
    var dropbox = "User Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    for (var i = 0; i < input.length; i++) {
      var file = folder.createFile(input.input[i]);    
      file.setDescription("Uploaded by " + form.myName);
    }
    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

Я получаю ошибки, говоря, что функция createFile не будет работать. Я ожидаю, что это потому, что переменная myFile первоначально не является массивом. Как я могу поместить все файлы, загруженные в массив, а затем запустить createFile для каждого файла?

Спасибо

Ответ 1

Прежде всего помните, что атрибут multiple в теге HTML <input> вводится в HTML5 и поддерживается только современными браузерами (например, в случае Firefox из Gecko 1.9.2, который будет из версии 3.6)

Теперь, чтобы настроить HTML-форму для загрузки нескольких файлов, вы должны:

Явным образом укажите ваш HTML-документ HTML5. Ваш документ должен начинаться с:

<!DOCTYPE html>
Чтобы правильно загружать файлы на ваш сервер, вы должны установить enctype атрибут multipart/form-data:

<form id="myForm" enctype="multipart/form-data">
Вы также должны указать свой файл input как несколько файл input, используя атрибут . Вы, кажется, это право, но на всякий случай попробуйте:

<input type="file" name="myFile" id="filesID" multiple="multiple" />

вместо.

Есть также (по крайней мере) несколько проблем в цикле for вашего кода Javascript для обработки выбранных файлов; Вы ссылаетесь на input.length и input.input[i], когда вы должны ссылаться на input.files.length и input.files[i] вместо:

for (var i = 0; i < input.files.length; i++) {
      var file = folder.createFile(input.files[i]);    
      file.setDescription("Uploaded by " + form.myName);
}

Я настоятельно рекомендую вам ознакомиться с супер полезным полезным MDN мини-учебником по загрузке файлов для подробностей и примеров.

Кроме того, если вы хотите добавить библиотеки и плагины, bootstrap fileinput является довольно полезным, довольно простым в использовании и использовании на любом формы, которую вы хотите.

В любом случае вы получите форму, отправляющую массив файлов, которые вы также можете получить на клиенте, как FileList объект, хранящийся в файле свойства элемента ввода, содержащего File вместо одного элемента файла. Как показано в приведенном выше коде, вы можете получить доступ к любому файлу в этом объекте FileList в виде массива (input.files[i]).