Function Upload data in Base64 or dataURL format
Example S10UploadData(mydata, 'save_image', 'imagedata', 'invoice.jpg', mybutton);
Parameters
Nr Description
1
String in Base64 format or dataURL format
The string is made available in ABAP as xstring
2
Method name
This ABAP method is called after the upload
3
Attribute name
Name of the class attribute of the type xstring in which the content is placed.
4
Additional info
Any, for example a file name.
5
Anchor element for messages
As a rule, the triggering button is passed here.
Description  With S10UploadData() you can upload any binary data and then process it in ABAP.
This is particularly useful if you use JavaScript libraries, e.g. to create an image file or a PDF file.

HTML5 standard objects like <canvas> or FileReader() can provide data as a "DataURL":

FileReader.readAsDataURL()
canvas.toDataURL()

The "DataURL" format is identical to the "Base64" format, but first has a small header that describes the type of data, for example whether it is a .jpg image or a PDF. Example of a DataURL:

"data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==".

The base64 part is "SGVsbG8sIFdvcmxkIQ==". The header is ignored by S10UploadData() ; only the Base64 data part is transmitted.

After the upload, the specified ABAP method is called. The content of the file is available in the xstring attribute. You can retrieve the "additional info" parameter in ABAP by s10actionparameter().

Example:

ABAP

 data:     
    imagedata type xstring.


* save uploaded image
  method save_image.

    data: imagename type string,
          imagesize type i.

    imagename = s10actionparameter( ).
    imagesize = xstrlen( imagedata ).

* save image
  ......   


endmethod.


Note on uploading photos

If you upload a photo, it is advisable to reduce its size first, as today's cameras often produce large image files of e.g. 12MB, which you do not want to save in this level of detail, for example if they are invoice receipts. Otherwise the upload would also take some time. You can use the HTML5 <canvas> element for compression:

var data_uri = compressImage(image, 0.7);
// max 400 kb? else compress more
 if (data_uri.length > 400 * 1024) {
     data_uri = compressImage(image, 0.5);
};

 // max 400 kb? else compress more
 if (data_uri.length > 400 * 1024) {
     data_uri = compressImage(image, 0.3);
};

// upload
...


 function compressImage(image, compression) {

    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);

     return canvas.toDataURL("image/jpeg", compression);
 }
Components S10 Framework