Update FeatureLayer using applyEdits() - working with attachments?

1226
13
Jump to solution
06-14-2022 07:18 AM
luckachi
Occasional Contributor II

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

 

 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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) => {

View solution in original post

0 Kudos
13 Replies
ReneRubalcava
Frequent Contributor

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#Attachme...

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.

0 Kudos
luckachi
Occasional Contributor II

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

0 Kudos
luckachi
Occasional Contributor II

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

luckachi_0-1655236719935.png

but I am receiving an error

luckachi_1-1655236758844.png

In my feature layer JSON it does say 

  "supportsApplyEditsWithGlobalIds" : true, 
0 Kudos
ReneRubalcava
Frequent Contributor

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#applyEdi...

0 Kudos
luckachi
Occasional Contributor II

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

 

            const blob = new Blob(document.getElementById("myForm1"), { type: "image/jpeg" })
            const attachments = {
              feature: editFeature,
              attachment: {
                globalId: editFeature.attributes.GlobalID,
                data: blob
              }
            }

            // Setup the applyEdits parameter with updates.
            const edits = {
              updateFeatures: [editFeature],
              addAttachments: [attachments]
            };

            const options = {
              // globalIdUsed has to be true when adding, updating or deleting attachments
              globalIdUsed: true
            };

            console.log(edits);
            applyEditsToIncidents(edits, options);

 

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>

 

0 Kudos
ReneRubalcava
Frequent Contributor

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

0 Kudos
luckachi
Occasional Contributor II
/ 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);
            });
        }
0 Kudos
ReneRubalcava
Frequent Contributor

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) => {
0 Kudos
luckachi
Occasional Contributor II

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?

0 Kudos