AtNotes Übersicht Willkommen Gast. Bitte einloggen oder registrieren.
18.07.19 - 16:02:42
Übersicht Hilfe Regeln Glossar Suche Einloggen Registrieren
News:
Schnellsuche:
+  Das Notes Forum
|-+  Lotus Notes / Domino 9
| |-+  ND9: Entwicklung (Moderatoren: Axel, eknori, Thomas Schulte, koehlerbv, m3)
| | |-+  Fileupload mit Custom REST und AngularJS
« vorheriges nächstes »
Seiten: [1] Nach unten Drucken
Autor Thema: Fileupload mit Custom REST und AngularJS  (Gelesen 343 mal)
platzebo
Frischling
*
Offline Offline

Beiträge: 49



« am: 16.01.19 - 13:34:38 »

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

« Letzte Änderung: 16.01.19 - 13:36:51 von platzebo » Gespeichert

Ein König Mann ist, das Kindsein nicht vergisst
oliK
Aktives Mitglied
***
Offline Offline

Beiträge: 226


« Antworten #1 am: 16.01.19 - 14:20:23 »

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.
Gespeichert
Seiten: [1] Nach oben Drucken 
« vorheriges nächstes »
Gehe zu:  


Einloggen mit Benutzername, Passwort und Sitzungslänge

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006, Simple Machines Prüfe XHTML 1.0 Prüfe CSS
Impressum Atnotes.de - Powered by Syslords Solutions - Datenschutz | Partner: