Update FeatureLayer using applyEdits() - working with attachments?

[luckachi]

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

[luckachi]

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

[ReneRubalcava]

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

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

[luckachi]

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

[luckachi]

@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> -->