topic Re: Update FeatureLayer using applyEdits() - working with attachments? in ArcGIS JavaScript Maps SDK Questions

Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Tue, 14 Jun 2022 14:18:09 GMT

Working with the Update FeatureLayer using applyEdits() sample code I have added a button in attributeArea div to select an image file to add (update) the point that is currently selected.

I've updated the featureform.on submit process (below - lines 6 and 17) but it seems to be throwing an error that "When 'addAttachments', 'updateAttachments' or 'deleteAttachments' is specified, globalIdUsed should be set to true"

I am not quite sure how to exactly handle attachments in this situation.

featureForm.on("submit", () => { if (editFeature) { // Grab updated attributes from the form. const updated = featureForm.getValues(); const attachmentForm = document.getElementById("photo"); // Loop through updated attributes and assign // the updated values to feature attributes. Object.keys(updated).forEach((name) => { editFeature.attributes[name] = updated[name]; }); // Setup the applyEdits parameter with updates. const edits = { updateFeatures: [editFeature], addAttachments: [attachmentForm] }; console.log(edits); applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; } });

Re: Update FeatureLayer using applyEdits() - working with attachments?

ReneRubalcava — Tue, 14 Jun 2022 15:17:19 GMT

Looking at the doc, the attachmentForm should be an object with feature and attachment, not just a form, so it knows which feature to attach it.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#AttachmentEdit

I think you need to do this after you do addFeature, because it looks like you need the objectId or globalId to add the attachment. So you would do your edit in two steps.

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Tue, 14 Jun 2022 17:48:43 GMT

Thank you @ReneRubalcava - I will see if that works!

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Tue, 14 Jun 2022 20:05:07 GMT

So just in testing I added the following to the featureform.on Submit (which is after the feature is created and the attributes are brought into the feature form.

const attachments = [{ editFeature, attachment: { globalId: editFeature.attributes.GlobalID, data: photo } }]; // Setup the applyEdits parameter with updates. const edits = { updateFeatures: [editFeature], addAttachments: attachments };

My HTML button is

Select a file: <input type="file" class="esri-button" id="photo">

I am not exactly sure if I making any progress with this but it does show up in the console and the globalId matches

but I am receiving an error

In my feature layer JSON it does say

  "supportsApplyEditsWithGlobalIds" : true,

Re: Update FeatureLayer using applyEdits() - working with attachments?

ReneRubalcava — Tue, 14 Jun 2022 20:07:54 GMT

Ah, if you're using the globalId, you need to pass the globalIdUsed property as true in the options. There's a snippet in the doc here further down the page

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#applyEdits

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Wed, 15 Jun 2022 19:14:13 GMT

so at the moment, I have this set up during the featureForm.on("submit") process. Everything seems to be okay, but then I receive an error message that reads error = l details: undefined message: "When 'addAttachments', 'updateAttachments' or 'deleteAttachments' is specified, globalIdUsed should be set to true" name: "feature-layer:invalid-parameter" [[Prototype]]: c

HTML form looks like this:

<form id="myForm1"> Please include a photo: <input type="file" name="attachment"/> <input type="hidden" name="f" value="json"> </form>

Re: Update FeatureLayer using applyEdits() - working with attachments?

ReneRubalcava — Wed, 15 Jun 2022 19:28:23 GMT

What does "applyEditsToIncidents" look like? Is it passing the options correctly?

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Wed, 15 Jun 2022 19:29:50 GMT

/ Call FeatureLayer.applyEdits() with specified params. function applyEditsToIncidents(params) { document.getElementById("btnUpdate").style.cursor = "progress"; obsLayer.applyEdits(params).then((editsResult) => { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if (editsResult.addFeatureResults.length > 0 || editsResult.updateFeatureResults.length > 0) { unselectFeature(); let objectId; if (editsResult.addFeatureResults.length > 0) { objectId = editsResult.addFeatureResults[0].objectId; } else { featureForm.feature = null; objectId = editsResult.updateFeatureResults[0].objectId; } selectFeature(objectId); if (addFeatureDiv.style.display === "block") { toggleEditingDivs("none", "block"); } else if (addFeatureDiv.style.display === "none") { toggleEditingDivs("block", "none"); } } // show FeatureTemplates if user deleted a feature else if (editsResult.deleteFeatureResults.length > 0) { toggleEditingDivs("block", "none"); } }) .catch((error) => { console.log("error = ", error); }); }

Re: Update FeatureLayer using applyEdits() - working with attachments?

ReneRubalcava — Wed, 15 Jun 2022 19:34:34 GMT

That's not passing the options. You can update it like this.

function applyEditsToIncidents(params, options) { document.getElementById("btnUpdate").style.cursor = "progress"; obsLayer.applyEdits(params, options).then((editsResult) => {

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Wed, 15 Jun 2022 19:41:48 GMT

Doh! Thank you @ReneRubalcava . That did the trick...however, I do have one last question. I looked at the attachment that was uploaded and it looks like just one pixel square versus the full image?

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Thu, 16 Jun 2022 14:34:13 GMT

This is what ends up being the attachment, even though a .jpg file is selected. Everything comes through as 50 B ?

Re: Update FeatureLayer using applyEdits() - working with attachments?

ReneRubalcava — Thu, 16 Jun 2022 16:12:58 GMT

What is your attachmentForm? Is it a form or just the image? You need to make it a Blob or FormData to upload it. There's a snippet in the FeatureLayer addAttachment doc that shows how you can do it.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#addAttachment

view.when(function () { view.on("click", function (event) { view.hitTest(event).then(function (response) { const feature = response.results[0].graphic; // The form is defined as below in the html. // For enterprise services: // 1. File input name must be "attachment" // <form id="attachmentForm"> // Select a file: <input type="file" name="attachment"> // </form> const attachmentForm = document.getElementById("attachmentForm"); const formData = new FormData(attachmentForm); // For enterprise services - add input with name:f and value:json formData.append("f","json"); const form = new FormData(); form.set("attachment", file); form.append("f","json") let form = document.getElementById("myForm"); // Add an attachment to the clicked feature. // The attachment is taken from the form. layer.addAttachment(feature, form).then(function (result) { console.log("attachment added: ", result); }) .catch(function (err) { console.log("attachment adding failed: ", err); }); }); }); });

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Thu, 16 Jun 2022 16:33:34 GMT

Hi @ReneRubalcava , I appreciate the help with this - I am still learning all the ins and outs of Javascript.

It is just an image that I would like to be able to upload with the record. I have been working with this code snippet but with no success, it still comes through as just a small white square with a size of 50., sometimes 25.

<form id="myForm1"> Please include a photo: <input type="file" name="attachment" accept="image/jpeg"> <input type="hidden" name="f" value="json"> </form>

Re: Update FeatureLayer using applyEdits() - working with attachments?

luckachi — Thu, 16 Jun 2022 17:35:00 GMT

@ReneRubalcava - Looks like I got it - I added .files[0] to the blob line and changed the HTML section to just have the input line. Seems to be working at the moment!

const blob = new Blob([document.getElementById("photo").files[0]], { type: "image/jpeg" }) //console.log(blob); const attachments = { feature: editFeature, attachment: { globalId: editFeature.attributes.GlobalID, name: "attachment_" + Date.now(), data: blob } }

Please include a photo: <input type="file" id="photo" name="attachment" accept="image/jpeg">