View Source

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:

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

add an 'ondatachange' handler to the component spec:

"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/application_session_id/form_name/element_name/property_name", this can be build up in the component's controller code like : "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;