Funktion Upload von Daten im Base64 oder dataURL Format
Beispiel S10UploadData(mydata, 'save_image', 'imagedata', 'invoice.jpg', mybutton);
Parameter
Nr Bedeutung
1
String in Base64-Format oder dataURL Format
Der String wird in ABAP als xstring zur Verfügung gestellt
2
Methodenname
Diese ABAP Methode wird nach dem Upload aufgerufen
3
Attributname
Name des Klassenattributs vom Typ xstring, in das der Inhalt gestellt wird
4
Zusatzinfo
Beliebig, zum Beispiel ein Dateiname.
5
Ankerelement für Nachrichten
Hier wird in der Regel der auslösende Button übergeben
Beschreibung Durch S10UploadData() können Sie beliebige binäre Daten hochladen und anschließend in ABAP verarbeiten.
Das ist insbesondere dann nützlich, wenn Sie JavaScript Bibliotheken einsetzen, die z.B. eine Bilddatei oder eine PDF-Datei erstellen.

HTML5 Standardobjekte wie <canvas> oder FileReader() können Daten als "DataURL"  bereitstellen:

FileReader.readAsDataURL()
canvas.toDataURL()

Das "DataURL" Format ist identisch mit dem "Base64" Format, hat aber zunächst einen kleinen Header, der die Art der  Daten beschreibt, zum Beispiel ob es ein .jpg Image oder ein PDF ist. Beispiel einer DataURL:

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

Der Base64 Anteil ist dabei "SGVsbG8sIFdvcmxkIQ==". Der Header wird von S10UploadData() ignoriert ; es wird nur der Base64 Datenanteil übertragen.

Nach dem Upload wird die angegebene ABAP Methode aufgerufen. Der Inhalt der Datei steht in dem xstring-Attribut zur Verfügung. Den Parameter "Zusatzinfo" können Sie in ABAP durch s10actionparameter() abrufen.

Beispiel:

ABAP

 data:     
    imagedata
type xstring.


* save uploaded image

  
method save_
image.

    
dataimagename type string,
          imagesize 
type i.

    image
name s10actionparameter( ).

    
imagesize xstrlenimagedata ).

* save image

  ......
   


endmethod
.




Hinweis zum Upload von Fotos

Falls Sie ein Foto hochladen, empfiehlt es sich, es zunächst zu verkleinern, da heutige Kameras oft große Bilddateien erzeugen von z.B. 12MB, die Sie nicht in dieser Detaillierung abspeichern möchten, wenn es sich etwa um Rechnungsbelege handelt. Der Upload würde sonst auch einige Zeit dauern. Zur Komprimierung können Sie das HTML5 <canvas> Element nutzen:

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);
}
<canvas> ELement nutzen: S10 Framework