ESRI Attachments with ArcServer and Javascript

Upload Image from Phone Camera

I was working on the following problem:

How can we take a photo of a GIS feature and put it on the network in a folder named after a property of the feature?

I started by creating a map that displayed the feature and grabbed the property value. I coded a popup for the feature that used a form to allow the uploading of images from a phone camera. The code for the form is below:

<form target=”_blank”‘+theaction+'” enctype=”multipart/form-data” method=”post” accept=”image/*;capture=camera”><input type=”file” name=”upload” multiple=”multiple”><br><input type=”submit” value=”Upload”></form>

The next step was handling the files the form sent on the server side. Using Node.js, I displayed the map and handled the file transfer from the form. The problem was solved.

Was it the best solution? No. Keeping the geometry and images separate means extra coordination – if a point is deleted we have to find the image as well.

The end goal was an image associated with a GIS feature. I came up with a better solution. We could just use a blob field and put the photo in the database as a field. As I was starting to work on it, I remembered ArcGIS allows attachments. It will accept a blob and handle the relation between the geometry and the point features. This would be the best solution.

I created my feature class and enabled attachments. Now, using the ESRI REST API, I can upload attachments (images) using a form with the action set to the url of the service:

http://ServerName/arcgis/rest/services/ServiceName/0/OBJECTID/addAttachment

This solution is much simpler than the Node.js solution. first, it doesn’t require a new server application – it uses our already running ArcServer. I don’t have to justify to the IT Department my use of Node.js – ArcServer is already allowed.  Finally, the relationship between the feature and the images are handled by ArcServer. If a point is deleted, so is the image.

My final application displays a map. When you click on the map a point is placed and a popup is opened. The popup contains a combo box that allows you to select the feature class for your point. Using the REST API, the point is added to the feature class. The popup content then changes to the attachment upload form. You can click the select button and the camera application is launched on your phone. Once an image is captured, you click submit and a new tab opens showing the result of the file upload. I have a separate map application that displays the points from the feature classes with a popup detailing the associated attachments for viewing and downloading.