Search code examples
cordovacordova-pluginssapui5

Cannot Upload to SAP Content Server using Cordova File Transfer plugin


I'm trying to upload an image to SAP Http Content Server from my SAPUI5 application using Cordova FileTransfer plugin. So far when I upload, it returns success code (200) and a message below:

Component img1 in Document 0000000018 updated

The plugins also gives response with the success code with the bytesent which is the same with the image's size, so I was assuming that the image is uploaded.

But when I use get function to retrieve my image, nothing's there. The body was empty. When I use web browser, it makes me download an empty ContentServer.dll file, and when I use Postman, the response body is empty. AFAIK, in such successful cases, the body is the image, and for Postman, it gives binary form of the image in the response's body.

For my code, I used Cordova Camera (I tried Media Capture but same problem) plugins to take the photo as below:

takePhoto: function() {
navigator.camera.getPicture(onCapturePhoto, onFail, {
            quality: 100,
            destinationType: destinationType.FILE_URI
        });
}

When the photo is successfully taken, it calls onCapturePhoto function:

        function onCapturePhoto(fileURI) {

            var options = new FileUploadOptions();
            options.fileKey = "file";
            options.httpMethod = "PUT";
       ** This line below solved my first problem but still cannot solve the 
              original problem as my Update1 mentioned**
            options.chunkedMode = false;
            options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
            options.mimeType = "image/jpeg";
            options.params = {}; // if we need to send parameters to the server request

            var win = function(r) {
                console.log(r);
                console.log(fileURI);
            };

            var fail = function(error) {
                console.log(error);
                alert('Ups. Something wrong happens!');
            };
            var ft = new FileTransfer();
            var url = "http://serverIP:1090/ContentServer/ContentServer.dll?update&pVersion=0046&contRep=Z1&docId=0000000018&compId=img1";
            ft.upload(fileURI, url, win, fail, options);
}

I guess somehow the data was not transferred to the server, that's why the body is always empty. But i'm pretty sure the syntax is correct, at least not to give any errors. Therefore, I'm totally confused. Any suggestions, please?

Update1: So far I found the problem: it was the options.chunkedMode that give empty response body. Now I can see my response body. But the problem is my body is not rendered as an image but ContentServer.dll. I guess my upload code is responsible for this. Somehow the data doesn't have the right image format when being uploaded. Any suggestion?


Solution

  • So I finally found myself an answer for this. By adding some customer headers (in my case, I'll add Content-Type), I've disabled the multipart/form-data which cause the Content-Disposition appears in the response body, lead to the problem that the response is harmed and cannot be opened. Now everything seems to be pretty good. So I would summarize some points if someone want to upload to SAP Content Server using Cordova FileTransfer plugin:

    • set chunkedMode in FileTransferOption to false. SAP Content Server does NOT accept chunked data, at least with httpMethod = "PUT" AFAIK.
    • You may want to set trustAllHosts = true depending on how your BASIS team install the SAPCS. I'm not sure about this part, but anyway, the SAPCS is mostly for internal usage, so trustAllHosts = true just makes things easier. Please fix me if I understand the problem wrong!
    • By default, the Content-Type of the request would be multipart/form-data which cause the SAPCS store some headers data to the response body. This will lead to the problem that the stored data become inconsistent and harmed. To fix this and be able to store your data properly, you should add

      headers = {
       "Content-Type": "image/jpg" //This is equivalent to mimeType so you can put that option here, in my case "image/jpg"
      }
      

      This will work in my case. I have not tested the performance in term of slow network connection yet, so there may be some performance enhancement I should make in the future.