Hey there, I'm trying to use the addAttachment method introduced in 4.9, but it always returns an error: Unexpected token . 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?

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.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addAttachment</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">,</SPAN> form<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'added successfully'</SPAN><SPAN class="punctuation token">,</SPAN> result<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'err'</SPAN><SPAN class="punctuation token">,</SPAN> err<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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?

Encuentra más publicaciones etiquetadas con

Accepted answers

UndralBatsukh

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:

<SPAN class="operator token"><</SPAN>form id<SPAN class="operator token">=</SPAN><SPAN class="string token">"myForm"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; Select a file<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"file"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"attachment"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"f"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"json"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>form<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

All comments

AndrewLindley

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

<SPAN class="keyword token">let</SPAN> form <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FormData</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
form<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"attachment"</SPAN><SPAN class="punctuation token">,</SPAN> file<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
form<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"f"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"json"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

UndralBatsukh

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:

<SPAN class="operator token"><</SPAN>form id<SPAN class="operator token">=</SPAN><SPAN class="string token">"myForm"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; Select a file<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"file"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"attachment"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"f"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"json"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>form<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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,

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

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.