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.