google.script.run and form with input type=file produce string "FileUpload" not a blob

Question

I use HTMLServices with google.script.run calls with form in args and i try to get the image from my form input file field and store it in my drive.

I get the value of all the fields correctly except the photodata field. photodata contain the string "FileUpload" instead of a blob.

I have tested with .getBlob for the same result.

Server Side :

function setUsager(form) {
  var blob = form.photodata;
  Logger.log(Utilities.jsonStingify(blob);
  DriveApp.getFolderById('0B2DdOMvW2Q84N0s4a21LM05wbms').createFile(form.usagerId,blob);
  obj = new {};
  obj.photo = file.getUrl();
  return obj;
}

on click Handler

  function onUsagerEditFormSubmit() {
    loading(true);
    var form = this.parentNode;
    google.script.run.withSuccessHandler(showUsager)
        .withFailureHandler(showError)
        .setUsager(form);      
   
  }

And the form :

<form name="usager-edit" id="usager-edit" method='post' enctype="multipart/form-data">
  <div class="hidden">
    <input type="text" name="type" id="type" value="USAGER" readonly="readonly" />
    <input type="text" name="usagerId" id="usagerId" readonly="readonly" />
  </div>
  <div class="field-container">      
    <label for="nom">Nom</label>
    <input type="text" name="nom" id="nom">
  </div>
  <div class="field-container">
    <label for="prenom">Prenom</label>
    <input type="text" name="prenom" id="prenom">
  </div>
  <div class="field-container">
    <label for="photo">Photo</label>
    <input class="file" type="file" name="photodata" id="photodata" accept='image/*'>
    <div id="prev-photo" name="prev-photo"></div>
    <div class="clear"></div>
  </div>
  <input class="myButton" onClick="onUsagerEditFormSubmit" type="button" name="save" id="save-button" value="Sauvegarder" />
</form>

Answer 1

You are using the wrong createFile method overload.

You are using createFile(name, content), when you should use createFile(blob).

...
var file = DriveApp.getFolderById('****************************').createFile(blob);
...

You must define file in order to make: obj.photo = file.getUrl();.

Also you can change the following:

...
<input class="myButton" onClick="onUsagerEditFormSubmit" type="button" name="save" id="save-button" value="Sauvegarder" />
...

by:

...
<input class="myButton" onClick="onUsagerEditFormSubmit(this.parentNode)" type="button" name="save" id="save-button" value="Sauvegarder" />
...

and

  function onUsagerEditFormSubmit() {
    loading(true);
    var form = this.parentNode;
    google.script.run.withSuccessHandler(showUsager)
        .withFailureHandler(showError)
        .setUsager(form);    
  }

by:

  function onUsagerEditFormSubmit(form) {
    loading(true);
    google.script.run.withSuccessHandler(showUsager)
        .withFailureHandler(showError)
        .setUsager(form);    
  }

Slight changes:

...
Logger.log(Utilities.jsonStingify(blob);
...
obj = new {};
...

by:

...
Logger.log(Utilities.jsonStringify(blob));
...
var obj = {};
...