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

BramantiyoMarjuki — Tue, 21 Mar 2023 07:28:25 GMT

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>  <script src="https://js.arcgis.com/4.9/"></script>  <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.

topic Uploading Image Attachments to Hosted Table Layer in ArcGIS Online using JS API in ArcGIS JavaScript Maps SDK Questions

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