Fileupload mit Custom REST und AngularJS

[platzebo]

Hallo zusammen,

ich habe eine Adressbuchanwendung die ins Web soll.
Dazu wurde ein AngularJS Frontend  (1.4.8 ) gezimmert und als Backend kommen customRest zum Einsatz.
Das Lesen und Schreiben der Textfelder habe ich schon hinbekommen.
Jetzt fehlt noch ein Fileupload

XPage oder NotesForms im Web sollen nicht zum Einsatz kommen.

Mein Code sieht wie folgt aus

HTML:
         ...
   <input type="file" id="file1" name="file" multiple ng-files="getTheFiles($files)" />  
       <input type="button" ng-click="doUpload()" value="Upload" />        
         ...

Java Script Teil:

         app.directive('ngFiles', ['$parse', function ($parse) {

              function fn_link(scope, element, attrs) {  
                  var onChange = $parse(attrs.ngFiles);
                  element.on('change', function (event) {
                      onChange(scope, { $files: event.target.files });
                  });
              };

              return {
                   link: fn_link
              }
          } ]);

app.controller('MyCtrl', function ($scope, $routeParams, $http) {

     var origin = window.location.origin;
     var werte = window.location.pathname.split(".nsf");
     var base = origin + werte[0] + ".nsf";

          var formdata = new FormData();
     $scope.getTheFiles = function ($files) {           
               angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
               });        
           };


      $scope.doUpload = function() {
         
         var daten = {
          bild : formdata
         };              
         
         var req = {
                 method: 'POST',                 
               url: base + '/api.xsp/fileUpload',               
               data: daten,
               headers: {
                           'Content-Type': undefined
                       }
        };
         
         $http(req).then(function(response) {
           // success  
            alert('hurra');
           }, function(error) {
              // error
              alert('error');
           });
         
      };

Java Custom Rest Service:

 @Override
    public void renderService(CustomService service, RestServiceEngine engine) throws ServiceException {
        try {
            //Create a JSONObject from the incoming data
            System.out.print("UploadService");
                   
            JSONArray jsonResponse = new JSONArray();
           
            String json_string = IOUtils.toString(engine.getHttpRequest().getInputStream(), "UTF-8");            
            JSONObject json = new JSONObject(json_string);            

             Database thisdb = ExtLibUtil.getCurrentDatabase();
            Document doc = null;
 
            //Check, if a universal id is provided
            if (json.has("universalID")) {
                //Search document by ID
                String universalID = json.getString("universalID");
                doc = thisdb.getDocumentByUNID(universalID);
                //TODO: Do some checks and errorhandling
            } else {
                //Create a new document if no universal ID has been provided
                doc = thisdb.createDocument();
                doc.replaceItemValue("Form", "Adresse");
            }

            if (json.has("titel")) doc.replaceItemValue("titel", json.getString("titel"));
            if (json.has("vorname")) doc.replaceItemValue("vorname", json.getString("vorname"));
            if (json.has("nachname")) doc.replaceItemValue("nachname", json.getString("nachname"));
            if (json.has("strasse")) doc.replaceItemValue("strasse", json.getString("strasse"));
            if (json.has("plz")) doc.replaceItemValue("plz", json.getString("plz"));
            if (json.has("ort")) doc.replaceItemValue("ort", json.getString("ort"));

            if (json.has("bild")) {
               System.out.print("Bild");
               Object obj = json.getJSONObject("bild");
               System.out.print("Bild1");
               System.out.print(obj.toString()); // hier wird in der log.nsf {} ausgegeben
               System.out.print("Bild2");
               
            }
...

Das custom rest Service ist als application/json definiert

Kann mir jemand helfen wie man das hin bekommt?

Vielen Dank

[oliK]

Ich habe bei uns eine Lösung gebastelt mit jQuery Uploadifive und XPages.
Die jQuery-Bibliothek kostet ein wenig, dafür sieht sie schön aus und ermöglicht Multiupload von Dateien.