Setting field value in onChange event function

[joelguittet]

Hello

Title saying everything but here is my example:

I have the following field in my jsonform schema:

"server":{
  "title":"Server",
  "type":"object",
  "properties":{
    "certificate":{
      "title":"Certificate",
      "type":"string"
    }
  }
}

I would like to set this certificate field from a certificate file which is uploaded by the user so I have written in the form:

{
  "key":"server.certificate",
  "type":"file",
  "onChange":"function (evt) { var reader = new FileReader(); reader.onload = function(event) { alert(event.target.result); }; reader.readAsText(evt.target.files[0]); }"
}

The event.target.result witch is displayed calling the alert() function contain the content of the file which has been uploaded.

From this point, how to set the server.certificate value that will then be reported when the form is submitted ?

Thanks

Joel

PS : of course this is an example with a certificate file but any text file is working.

[tchapi]

Hello
Can you post your complete JSONForm object so I can test it in the playground and fiddle with it ?

[joelguittet]

Hello @tchapi

Sure, it looks like:

{
  "schema":{
    "type":"object",
    "properties":{
      "service":{
        "title":"Service",
        "type":"object",
        "properties":{
          "name":{
            "title":"Name",
            "type":"string",
            "required":true
          }
        }
      },
      "server":{
        "title":"Server",
        "type":"object",
        "properties":{
          "certificate":{
            "title":"Certificate",
            "type":"string"
          }
        }
      }
    }
  },
  "form":[
    {
      "key":"service.name",
      "htmlClass":"jsonform-hide"
    },
    {
      "key":"server.certificate",
      "type":"file",
      "onChange":"function (evt) { var reader = new FileReader(); reader.onload = function(event) { alert(event.target.result); }; reader.readAsText(evt.target.files[0]); }"
    }
  ]
}

My application parse this and retrieve schema and form objects to create a jsonform.

Joel

[tchapi]

Is this what you're looking for ? (I'm not sure I've understood your problem TBH)

function (evt) {
  var reader = new FileReader();
  reader.onload = function(event) {
    document.getElementsByName('service.name')[0].value = event.target.result;
  };  
  reader.readAsText(evt.target.files[0]); 
}

[joelguittet]

This is a workaround I have used, creating a field for the value and a field for the button. But it's a bit ugly. I would like to set the value of 'server.certificate'. I should simplify the example to better show you waht I would like:

{
  "schema":{
    "type":"object",
    "properties":{
      "server":{
        "title":"Server",
        "type":"object",
        "properties":{
          "certificate":{
            "title":"Certificate",
            "type":"string"
          }
        }
      }
    }
  },
  "form":[
    {
      "key":"server.certificate",
      "type":"file",
      "onChange":"function (evt) { var reader = new FileReader(); reader.onload = function(event) { /* Here I want to set 'server.certificate' */ alert(event.target.result); }; reader.readAsText(evt.target.files[0]); }"
    }
  ]
}

When submit is done I would like to have 'server.certificate' value with the content of the file uploaded.

[joelguittet]

@tchapi my workaround (the same you just proposed too) is proposed at #379 to have a playground example of file upload.