topic Add attachments from HTML File Input JS 4.20 in ArcGIS JavaScript Maps SDK Questions

Add attachments from HTML File Input JS 4.20

JoCondliffe — Mon, 23 Aug 2021 09:02:51 GMT

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.

<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#addAttachment but I keep getting various errors.

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

Re: Add attachments from HTML File Input JS 4.20

ReneRubalcava — Mon, 23 Aug 2021 14:40:40 GMT

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?

Re: Add attachments from HTML File Input JS 4.20

JoCondliffe — Mon, 23 Aug 2021 16:22:27 GMT

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

Re: Add attachments from HTML File Input JS 4.20

ReneRubalcava — Mon, 23 Aug 2021 16:53:05 GMT

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); }); }); }); });

Re: Add attachments from HTML File Input JS 4.20

JoCondliffe — Tue, 24 Aug 2021 09:47:04 GMT

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