Page History

In order to upload files into a Servoy solution using a custom webcomponent here are the steps you should do :

• add a dataprovider type to the component spec, with 'pushToServer' support and 'ondatachange' callback:

  No Format
  "file": {"type": "dataprovider", "pushToServer": "allow", "ondatachange": { "onchange":"onDataChangeMethodID", "callback":"onDataChangeCallback"}}

• add an  'ondatachange' handler to the component spec:

  No Format
  "onDataChangeMethodID" : { "returns": "Boolean", "parameters":[ { "name":"oldValue", "type":"${dataproviderType}" }, { "name":"newValue", "type":"${dataproviderType}" }, { "name":"event", "type":"JSEvent" } ] }

• add a 'multipart/form-data' 'form' element to the component markup, that will be used to post the files to the server;
  the action of the form must be :  "resources/upload/" + $sabloApplication.getSessionId() + "/" + $scope.$parent.formname + "/" + $attrs.name + "/file" ("file" is the name of the dataprovider from the model ):
   

<form action="resources/upload/35400153-e5d3-41cb-8032-3b4f91459aca/test/fileupload/file" method="post" enctype="multipart/form-data"> 

• bind a form variable of type 'media' to the 'file' property of the component, let's say named 'm'; additionally create a form variable of type 'string' with name 'm_filename' and another of the same type named 'm_mimetype', that can be used to get the uploaded file name and mime type;
• 'ondatachange' of the component will be called with the uploaded file's byte array; if you also created the additional form variables for the file name and mime type, those are already set to the right values of the upload;