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";
}
});
Solved! Go to Solution.
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) => {
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.
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.
Thank you @ReneRubalcava - I will see if that works!
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,
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
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>
What does "applyEditsToIncidents" look like? Is it passing the options correctly?
/ 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);
});
}
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) => {
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?