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.
This is what ends up being the attachment, even though a .jpg file is selected. Everything comes through as 50 B ?
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.
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);
});
});
});
});
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>
const blob = new Blob(document.getElementById("myForm1"), { type: "image/jpeg" })
// console.log(selectedFile);
const attachments = {
feature: editFeature,
attachment: {
globalId: editFeature.attributes.GlobalID,
name: "attachment_" + Date.now(),
contentType: "image/jpeg",
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);
@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
}
}
<!-- <form id="myForm1"> -->
Please include a photo: <input type="file" id="photo" name="attachment" accept="image/jpeg">
<!-- <input type="hidden" name="f" value="json">
</form> -->