0

I am trying to build the multipart request on client side itself because to avoid the need to send the files back to apex for processing. Also at a time 10 files needs to be sent via rest api, so sending them to apex for firing rest is another issue.

This is my remoteFunction.

$('#input-b6').on('filelock', function (event, filestack, extraData) {
            var strFiles = "";
            Object.keys(blob).forEach(function(key) {
                var r = new FileReader();
                console.log(key, blob[key]);
                sforce.connection.remoteFunction({
                    url : 'https://localrestapi.herokuapp.com/consumeFiles',
                    onSuccess : successCallBack,
                    onFailure : errorCallBack,
                    method : 'POST',
                    requestHeaders : 'Content-Type: multipart/form-data',
                    async : true,
                    requestData : 'filename: ' +r.readAsBinaryString(blob[key]),
                    timeout : 120000
                });
            });
        });

I have written and hosted a spring boot service which accepts the multipart form data, it works when i hit the service via postman. But when I try to hot it via Javascript in Visualforce page:

This is the error I get :

"{"timestamp":"2019-06-30T08:45:26.461+0000","status":500,"error":"Internal Server Error","message":"Current request is not a multipart request","path":"/consumeFiles"}"

I think I the requestData should change, but not sure what to pass there? ANy ideas?

Update

            Object.keys(filesBase64).forEach(function (key) {
                console.log(key, filesBase64[key]);

                var data = new FormData();
                data.append('filename', filesBase64[key]);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'https://localrestapi.herokuapp.com/consumeFiles', true);
                xhr.onload = function () {
                    // do something to response
                    console.log(this.responseText);
                };
                xhr.send(data);
            });

The console.log does not gets printed out. And getting this console error: Access to XMLHttpRequest at 'https://localrestapi.herokuapp.com/consumeFiles' from origin 'https://nagesingh-dev-ed--c.visualforce.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Though the files gets passed to the rest repository.

  • You are sending data to apex or some other endpoint? https://localrestapi.herokuapp.com/consumeFiles – Pranay Jaiswal Jun 30 '19 at 11:18
  • That's external endpoint, which I have hosted as a spring boot application. The endpoint wont open but I have written a RestController which accepts post method. – Nagendra Singh Jun 30 '19 at 11:29
  • 1
    cool, then, do a HttpRequest in JS then, you dont need to use remoteFunction. – Pranay Jaiswal Jun 30 '19 at 11:31
  • If I dont use remoteFucntion then the callback method of xhr request does not gets call back. Updated the question. But the files goes via rest. – Nagendra Singh Jun 30 '19 at 12:01
  • Ok, so cross origin support had to be from server side, I changed my spring boot application to support cross origin and now it works fine : @CrossOrigin(origins = "https://nagesingh-dev-ed--c.visualforce.com") @PranayJaiswal You can post answer and I can accept it. – Nagendra Singh Jun 30 '19 at 12:43
0

Visualforce remoting, remoteFunction, are used to call Apex on the Platform. If you wanna call any third party site from javascript then do a normal AJAX call.

Also, as it will be a cross-origin request from javascript so make sure the end-server supports CORS from SF domain.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.