Select to view content in your preferred language

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

03-21-2023 12:28 AM
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>
    <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="">
      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;
    <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>

    <!-- ArcGIS JavaScript API -->
    <script src=""></script>

    <!-- Your JavaScript code goes here -->
], function (
) {

  // Create a new feature layer for the hosted table with attachments enabled
  const featureLayer = new FeatureLayer({
    url: "",
    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
      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);



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