Feature Layer addAttachment() Returning HTML

[AndrewLindley]

Hey there,

I'm trying to use the addAttachment method introduced in 4.9, but it always returns an error:

Unexpected token < in JSON at position 0

even if the operation is successful. That's all I get returned from the call, but if I look at the network traffic I can see that the call was successful but is returning HTML when JSON is expected. 

Here is my code for the call, basically copied from the doc:

FeatureLayer.addAttachment(feature, form).then(function (result) {
  console.log('added successfully', result)
})
.catch(function (err) {
  console.log('err', err)
});‍‍‍‍‍‍

The FeatureLayerEditResult that is returned is always an error, even though I can see that the operation was successful and can access the newly added attachment from future attachment queries.

Do I need to explicitly request a JSON response somehow or something?

[UndralBatsukh]

Hi there, 

Will you be able to share your service with me? Seems like maybe related to the feature service. 

I created a simple sample where I am using addAttachment() method. The method behaves as expected in this app. To use this app, first choose a file to attach, then click on a feature to attach the file. Please also have the browser console open.

[JoseBanuelos]

Hello Undral,

This issue is not reproducible with an ArcGIS Online hosted feature service. That is why your application is working as expected. The issue is reproducible with services published to an ArcGIS Enterprise environment. There has been a bug submitted for this, as this method works as expected in 3x. The current workaround I have found was using the esriRequest, and it has been working successfully. Here is the sample code:

const temp = document.getElementById("importFileForm");
var attachUrl = featureLayer.url + '/<feaureLayerIdNumber>/' + err.objectId + '/' + "addAttachment"
esriRequest(attachUrl,{
body: temp,
responseType: "document",
method: "post"
}).then(callback,errback);

I placed the code in the errback of featureLayer.addAttachment(), so the esriRequest executes if the addAttachment() fails. That is why the code has 'err.objectId', since the objectId is retrieved from the result of the errback.

Regards,

Jose

[UndralBatsukh · Accepted solution]

Hi there, 

So the issue is not in the implementation FeatureLayer.addAttachment. It appears that enterprise featureservices require the form have very specific inputs with certain names. 

The form needs to have file input type named "attachment" and hidden text named "f" and its value needs to be "json" as shown below:

<form id="myForm">
  Select a file: <input type="file" name="attachment">
  <input type="hidden" name="f" value="json">
</form>
‍‍‍‍

So I have updated the test app to use enterprise featureservice and updated the form. The app now works.

We will update the JS API doc for FeatureLayer.addAttachment to reflect these requirements for enterprise services.

[JoseBanuelos]

Hello Undral,

Yes, confirmed that with this code, the requests are now being returned as json and the method is working as it should be in 4.9. There is no need for the esriRequest workaround method. Appreciate your help on this!

Regards,

Jose

[AndrewLindley]

Thank you Undral Batsukh‌ and Jose Banuelos‌. I got it working using Undrals suggestion:

let form = new FormData();
form.set("attachment", file);
form.append("f","json")‍‍‍