applyEdits() addAttachments - optional file/image attachments?

[luckachi]

As part of my featureForm.on(submit) event, I have a piece of code that grab files from an HTML file input, creates a blob and then adds them as attachments to the record. However, I can't seem to correctly handle the addAttachments process when no files are selected. When there are no files selected, the applyEdits() addAttachments still fires and adds 2 undefined ( dW5kZWZpbmVk) blobs that have a file size of 9, which ends up being the length of the type 'image/jpg'. When I tweak the code to be an if else statement based on the files.length, in the console log I receive an error that "Attachment should have 'data' or 'uploadId'"

/********
** Feature Form Submit Process
********/

        // Listen to the feature form's submit event. Update feature attributes shown in the form.
        featureForm.on("submit", () => {
          if (editFeature) {

            // Grab updated attributes from the form.
            const updated = featureForm.getValues();

            // Loop through updated attributes and assign the updated values to feature attributes.
            Object.keys(updated).forEach((name) => {
              editFeature.attributes[name] = updated[name];
            });

            // grabs the image file and converts it to a blob (req.) for addAttachments to process
            const blob = new Blob([document.getElementById("photo").files[0]]); // Photo 1

            const blobTwo = new Blob([document.getElementById("photoTwo").files[0]], {type: "image/jpeg"}); // Photo 2

            if (document.getElementById("photo").files.length === 0) {
              console.log("no files selected");
            }

            if (document.getElementById("photoTwo").files.length === 0) {
              console.log("no files selected");
            }

            // When you submit a record with no photos, two attachments still get loaded
            // a white square with 9 bytes?

            // // First Photo
            const attachments = {
              feature: editFeature,
              attachment: {
                globalId: editFeature.attributes.GlobalID,
                name: "attachment_OBJECTID_" + editFeature.attributes.OBJECTID,
                contentType: "image/jpeg",
                data: blob
              }
            }

            // // Second Photo
            const attachmentsTwo = {
              feature: editFeature,
              attachment: {
                globalId: editFeature.attributes.GlobalID,
                name: "attachment_OBJECTID_" + editFeature.attributes.OBJECTID,
                data: blobTwo
              }
            }

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

            const options = {
              globalIdUsed: true, // has to be true when adding, updating or deleting attachments
              rollbackOnFailureEnabled: false // has to be true or at least I think so
            };

            console.log(edits);
            applyEditsToIncidents(edits, options);
            document.getElementById("viewDiv").style.cursor = "auto";
          }
        });

[luckachi · Accepted solution]

Ended up going this route and it looks like its working just fine...

const attachmentOne = document.getElementById("photoAttach1");
 obsLayer.addAttachment(editFeature, attachmentOne).then((result) => {
   console.log("attachment added: ", result);
 }).catch(function (err) {
   console.log("no attachment found or error: ", err);
 });

const attachmentTwo = document.getElementById("photoAttach2");
 obsLayer.addAttachment(editFeature, attachmentTwo).then((result) => {
  console.log("attachment added: ", result);
 }).catch(function (err) {
  console.log("no attachment found or error: ", err);
 });