Add attachments from HTML File Input JS 4.20

[JoCondliffe]

I have a custom html form for users to supply information and a map for them to capture a site boundary. The form includes the option to upload file attachments. The feature layer i'm writing to has attachments enabled and is published from our enterprise geodatabase. On submitting the form I can create the new feature with attributes, but I'm struggling with how to then add the file attachments.

function submitSite(){
  const attributes = {};
  attributes["Info"] = dom.byId("Info").value;
  attributes["Info2"] = dom.byId("Info2").value;
  attributes["Info3"] = dom.byId("Info3").value;
  graphicsLayer.graphics.items[0].attributes = attributes;
  // sites = featureLayer
  sites.applyEdits({
    addFeatures:[graphicsLayer.graphics.items[0]]
  }).then((submittedResponse) => {				
    if(submittedResponse.addFeatureResults[0].error == null){
      const globId = submittedResponse.addFeatureResults[0].globalId;
      sites.definitionExpression = "GlobalID = '" + globId + "'";
      // How do i now add the attchments to this feature
    }
  });
}

<form class="attachForm" id="attachment-1" >	
  <label for="myFile" class="form-label">Attach file</label>
  <input class="form-control" type="file" name="attachment" accept=".pdf" id="myFile">
</form>

I'm not sure on how to get the file from the input form and how to add it to the new feature as the feature has not been clicked in the map. I've tried using the example provided here  https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#addAttac... but I keep getting various errors.

Any help on how the achieve this would be much appreciated.

[ReneRubalcava]

That documentation has a snippet on how to convert an HTML form to FormData and use the addAttchment method. What errors do you see and do you have a sample showing the errors?

[JoCondliffe]

Hi, I dont find the documentation snippet very help full as it defines the variable 'form' twice (throwing an error) and doesn't explain where the parameter 'file' comes from in the line form.set("attachment", file); which gives me an error - Uncaught (in promise) ReferenceError: file is not defined. I've never used file input forms before so it might be my naivety but it would be helpful if this could be explained. Thanks

[ReneRubalcava · Accepted solution]

Weird, ok. The API is even simpler as you can just pass the DOM Element for the form, and the JSAPI will take care of the rest.

https://codepen.io/odoe/pen/Pojobpe?editors=0010

view.when(function () {
  view.on("click", function (event) {
    view.hitTest(event).then((response) => {
      const feature = response.results[0].graphic;
      const attachmentForm = document.getElementById("uploadForm");
      layer.addAttachment(feature, attachmentForm).then((result) => {
        console.log("attachment added: ", result);
      })
      .catch(function (err) {
        console.log("attachment adding failed: ", err);
      });
    });
  });
});

[JoCondliffe]

That makes so much more sense! Works perfectly. Thanks very much for your help.