Error while uploading blob using JS in mobile app

Hi..i am working on mobile application. i have created an endpoint for uploading image on oracle cloud . when i am uploading images using Action chain it is working fine but i have to upload file using JS . These are the details of endpoint Screenshot 2020-03-09 at 7 09 44 PM Screenshot 2020-03-09 at 7 10 19 PM

i have to make POST request using JS . for making request i am using following code.

function readBinaryFile(filename) {
//fetching blob using
 var reader = new FileReader();
 reader.onloadend = function () {
var blob = dataURItoBlob(reader.result);
//Sending Post request on oracle visual builder endpoint using fetch
const response = await fetch(url, {
      method: 'POST',
      body: blob,
      headers: {
        'content_type': 'image/jpg',
        'title':filename
      }
      });
      if(response.ok){
        confirm("Response Ok");
        confirm(response.text());
       }else{
         confirm("Blob resquest result : ",response.text());
       }
//Sending Post request on oracle visual builder endpoint using httprequest
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {       
            if (httpRequest.readyState == 4)
            {  
              confirm(JSON.stringify(httpRequest));
            }else{
              confirm(JSON.stringify(httpRequest));
              return false;
            }

        }

    var beartoken="bear-token";

    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Authorization', 'Bearer '+beartoken);
    httpRequest.setRequestHeader('content-type', 'image/jpg');
    httpRequest.send(blob);
}
 reader.readAsDataURL(file);
    }, onErrorReadFile);
}
function dataURItoBlob(dataURI) {
     var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
     return new Blob([atob(arr[1])], {type:mime});
}

Output of blob data is :

Response Received

I have also tried to write code in html for sending post request but i am getting following error but getting following error :

Access to XMLHttpRequest at 'https://url/test/gallery/images' from origin 'null' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

i am using following code for making request using javascript in html page

Html
<input type='file' accept='image/*' onchange='openFile(event)'><br>
    <img id='output'>
Javascript
var openFile = function(event) {
            var input = event.target;

            var reader = new FileReader();
            reader.onload = function(){
              var dataURL = reader.result;
              var output = document.getElementById('output');
              output.src = dataURL;

              var blob = dataURItoBlob(reader.result);
              var filename = "testing_blob";

              var beartoken = "token";

              const response = fetch('url', {
              method: 'POST',
              body: blob, // string or object
              headers: {
                'content_type': 'image/png',
                'title':filename,
                'Access-Control-Allow-Origin':'*',
                'Authorization': 'Bearer '+beartoken
              }
              });
              sendImageRequest("url",blob);

            };
            reader.readAsDataURL(input.files[0]);
          };
          function dataURItoBlob(dataURI) {
                var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
                return new Blob([atob(arr[1])], {type:mime});
        }
function sendImageRequest(url="",datatosend){

  var httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = function() { 

            if (httpRequest.readyState == 4)
            {
                console.log(JSON.stringify(httpRequest));  
              return true;
            }else{
              console.log(JSON.stringify(httpRequest));  
              return false;
            }

        }
    var beartoken="xx";
    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Authorization', 'Bearer '+beartoken);
    httpRequest.setRequestHeader('content-type', 'image/jpg');
    httpRequest.setRequestHeader('Access-Control-Allow-Origin','*');
    httpRequest.send(datatosend);

}

Question : 1) How can i upload blob or .png on above endpoint (endpoint in first url) using JS in mobile application ?

oracle-samples / vbcs-samples

Error while uploading blob using JS in mobile app #4