Select to view content in your preferred language

Uploading Image Attachments to Hosted Table Layer in ArcGIS Online using JS API

353
0
03-21-2023 12:28 AM
BramantiyoMarjuki
New Contributor II

Hi, I have tried to write a simple HTML form to add a new record/feature as well as Image Attachment upload into a hosted table layer in ArcGIS Online using ArcGIS JS API, the code as follow:

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Feature Form</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #form-container {
        padding: 16px;
      }
      #form-container label {
        display: block;
        margin-bottom: 8px;
      }
      #form-container input[type="text"],
      #form-container input[type="number"],
      #form-container textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 16px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }
      #form-container input[type="file"] {
        margin-top: 16px;
      }
      #form-container button[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        float: right;
      }
      #form-container button[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div id="form-container">
      <form id="feature-form">
       <label for="id" class="input-label">ID Rusun:</label>
     <input type="text" id="id" name="id" value="JTGRSN22-04" readonly><br>

         <label for="total_wakt">Total Waktu:</label>
			<input type="text" id="total_wakt" name="total_wakt"><br>


        <label for="file-input">Attach Image:</label>
        <input type="file" id="file-input" name="file-input">

        <button type="submit" id="submit-button">Submit</button>
      </form>
    </div>

    <!-- ArcGIS JavaScript API -->
    <script src="https://js.arcgis.com/4.9/"></script>

    <!-- Your JavaScript code goes here -->
    <script>
	require([
  "esri/layers/FeatureLayer",
  "esri/Graphic",
  "esri/widgets/Popup",
  "esri/PopupTemplate",
  "esri/widgets/FeatureForm",
  "dojo/dom",
  "dojo/domReady!"
], function (
  FeatureLayer,
  Graphic,
  Popup,
  PopupTemplate,
  FeatureForm,
  dom
) {

  // Create a new feature layer for the hosted table with attachments enabled
  const featureLayer = new FeatureLayer({
    url: "https://services-ap1.arcgis.com/p2UXWyaOSPcjxuJd/arcgis/rest/services/progres_tes/FeatureServer/1",
    outFields: ["*"],
    visible: false,
    supportsAttachments: true
  });

  // Create a new popup template for the feature layer
  const popupTemplate = new PopupTemplate({
    title: "{id}",
    content: [
      {
        type: "fields",
        fieldInfos: [
          { fieldName: "id", label: "ID Rusun" },
          { fieldName: "total_wakt", label: "Total Waktu" }
         
        ]
      },
      {
        type: "attachments"
      }
    ]
  });

  // Attach the popup template to the feature layer
  featureLayer.popupTemplate = popupTemplate;

  // Create a new feature form to handle form inputs
  const featureForm = new FeatureForm({
    container: "form",
    layer: featureLayer
  });
  
  
 // Handle form submission
  const submitButton = dom.byId("submit-button");
  submitButton.addEventListener("click", function (event) {
    event.preventDefault(); // Prevent form submission
    // Get the feature form's values
    const values = featureForm.getValues();
   
    // Create a new graphic with the form values
    const graphic = new Graphic({
      geometry: null,
      attributes: values
    });
    // Add the graphic to the feature layer
    featureLayer.applyEdits({
      addFeatures: [graphic]
    }).then(function (addResults) {
      // Get the object ID of the newly added feature
      const objectId = addResults[0].objectId;
      // Get the file input element and the selected file
      const fileInput = dom.byId("file-input");
      const file = fileInput.files[0];
      // Use the addAttachment method to add the attachment to the feature
      featureLayer.addAttachment(objectId, file).then(function () {
        alert("Feature added successfully");
      }).catch(function (error) {
        alert("Error adding attachment: " + error.message);
      });
    }).catch(function (error) {
      alert("Error adding feature: " + error.message);
    });
  });
});

	</script>
  </body>
</html>

 



When I tried to run the code, I got error message: : "The table feature service type is not yet supported" in the browser console, 

I am not sure if the operation performed in the code is really not supported because I can edit the feature and upload image attachment directly inside the ArcGIS Online Map Viewer, 

any helps or hints would be appreciated, thank you so much. 


0 Kudos
0 Replies