uploading file from webAppBuilder web app to portal geoprocessing service, fails on error 403

[MichaelLev]

I use WebAppBuilder 2.22 to develop 3D web apps (esri js API 4.22) with custom widgets for our portal.

I published geoprocessing service to our portal and I need to give it an input file.

I used esri/request to upload the input file to the proper url in order to be used by the geoprocessing service, but the upload failed. I think the upload url is correct -

https://<serverDomain>/arcgis/rest/services/<geoprocessingService>/GPServer/uploads/upload

but I get error 403 (that means that the authentication is OK, but there is no permission)

What should I do?

Help will be greatly appreciated.

[MichaelLev · Accepted solution]

Indeed, js API 4.* has a bug and it does not upload smoothly as js API 3.*,

but I found a solution, based on

Using JS API 4.9 and esriRequest to upload a KML file to a geoprocessing service 

I added a second special <input> in the form, then upload succeeded and returned json.

The html form looks like:

<form data-dojo-attach-point="uploadForm"
        enctype="multipart/form-data"
        method="POST"
        dir="ltr"
        data-dojo-type="dijit/form/Form"
       id="widget-gpcad2shp2-uploadForm">
  <input type="file" name="file" multiple="false"
        accept=".dwg"
        id="widget-gpcad2shp2-input"
        class="inputfile"
        title="my title"
        data-dojo-attach-point="inputFile"
       hidden />
  <label for="widget-gpcad2shp2-input">${nls.btn.inputFile.chooseFile}</label>
  <span id="widget-gpcad2shp2-file-chosen">${nls.btn.inputFile.noFileChosen}</span>
  <!-- extra input needed. see https://community.esri.com/t5/arcgis-api-for-javascript-questions/using-js-api-4-9-and-esrirequest-t... -->
  <input type="hidden" name="f" value="json" />
</form>
<span class="file-upload-status" style="opacity:1;"
data-dojo-attach-point="uploadStatus"></span>

and the js upload call looks like:

var options = {//any of the 3 ways will work. For the last 2, you have to add 'dojo/dom' in the define at top 
    //body: document.getElementById("widget-gpcad2shp2-uploadForm"),
    //body: dom.byId("widget-gpcad2shp2-uploadForm"),
    body: that.uploadForm.domNode,
    method: "post",
    responseType: "json"
};

esriRequest( that.fileUploadedUrl, options)
    .then(that.successHandler, that.errorHandler);