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; } } }

Add attachment without form node

IsaiahAguilera

I have a mobile phonegap application that has access to the devices camera. I am trying to take a photo and use the addAttachments method to upload the selected captured image. My problem is this method only allows for a input type file as the source. Unfortunately phonegap does not support input file types and I have to upload the captured image directly. Is there a way to add attachments without using the form type input. Any help would be greatly appreciated.

Find more posts tagged with

Accepted answers

JohnGrayson

Actually, a jsfiddle might not be appropriate for this use case. Below is some code that may work:

var imageName = "someImageFilename";
var imageFormat = "png";
var arrayBufferView = new Uint8Array(imageAsArrayBuffer);
var blobImg = new Blob([ arrayBufferView ], { type: "image/" + imageFormat });
var formNode = put("form", {
  "method": "post",
  "enctype": "multipart/form-data"
});
var formData = new FormData(formNode);
formData.append("attachment", blobImg, imageName+"."+imageFormat));

esriRequest({
  url: "http://[server]/[instance]/rest/services/[folder]/[name]/FeatureServer/[layerid]/[oid]/addAttachment",
  form: formData,
  content: { f: "json" },
  handleAs: "json"
}).then(lang.hitch(this, function(response){

  alert("Attachment Success: " +response.addAttachmentResponse.success)

}), lang.hitch(this, function(error){
  console.warn(error);
}));

All comments

MichaelKefahuchi

I just wish to express my thanx as well, this discussion helped me incredibly.

Wee_LikLau

HI Isaiah,

I manage to get the solution work in phonegap.

But in order to get it work with older webkit such as Jelly bean & before, I have to switched to blobbuilder instead of blob construct.

And replacing blobbuilder to blob, I keep getting "internal server error" log from my arcgis server manager when attempting to addattahcment.

I checked the files in arcgisuploads > scratch folder and fould out that the file size is 0KB, with name of {fileid}.uploads.

Anyone got any ideas on this?

Does this mean the files is corrupted ?

I can still see/view the files that are uploaded successfully with blob construct.

thanks,

JohnGrayson

Isaiah,

glad to hear you got it working. I believe some of these classes are newer functionality that might not be available on older browsers, so please make sure your target browser(s) will support them.

good luck,

John

Anonymous User

John passing on my thanks as well. I was not aware of these two JavaScript classes, nor would of seen the context on how they are helpful for uploading files. This was a good post.

Blob - Web API Interfaces | MDN

Uint8Array Object

-Doug

IsaiahAguilera

John,

Your help was invaluable in getting this done! It is now working beautifully and I am very grateful! The hardest part was getting the actual file converted into a blob but I was able to do so with the below code I am posting to help anyone else with this issue.

function onSuccess(fileURI) {

                window.resolveLocalFileSystemURL(fileURI, function (entry) {
                    var reader = new FileReader();
                    reader.onloadend = function (evt) {
                        var imageName = "someImageFilename";
                        var imageFormat = "jpg";
                        var arrayBufferView = new Uint8Array(evt.target.result);

                        var blobImg = new Blob([arrayBufferView], {
                            type: "image/jpeg"
                        });
                        var formNode = put("form", {
                            "method": "post",
                            "enctype": "multipart/form-data"
                        });
                        var formData = new FormData(formNode);
                        formData.append("attachment", blobImg, imageName + "." + imageFormat);
                        console.log("worked");


                        esriRequest({
                            url: "http://[server]/[instance]/rest/services/[folder]/[name]/FeatureServer/[layerid]/[oid]/addAttachment",
                            form: formData,
                            content: {
                                f: "json"
                            },
                            handleAs: "json"
                        }).then(lang.hitch(this, function (response) {
                            console.log("Attachment Success: " );
                        }), lang.hitch(this, function (error) {
                            console.warn(error);
                        }));
                    };
                    entry.file(function (s) {
                        reader.readAsArrayBuffer(s);
                    }, function (e) {
                        console.log('Error');
                    });
                });

Once other thing that is not a huge issue but the

 response.addAttachmentResponse.success

function you had in the success call for addAttachment was coming back undefined. This didn't effect the actual addAttachment function though so I just removed it. Not sure if there was a typo or something. Anyways thank you for your help!

JohnGrayson

Actually, a jsfiddle might not be appropriate for this use case. Below is some code that may work:

var imageName = "someImageFilename";
var imageFormat = "png";
var arrayBufferView = new Uint8Array(imageAsArrayBuffer);
var blobImg = new Blob([ arrayBufferView ], { type: "image/" + imageFormat });
var formNode = put("form", {
  "method": "post",
  "enctype": "multipart/form-data"
});
var formData = new FormData(formNode);
formData.append("attachment", blobImg, imageName+"."+imageFormat));

esriRequest({
  url: "http://[server]/[instance]/rest/services/[folder]/[name]/FeatureServer/[layerid]/[oid]/addAttachment",
  form: formData,
  content: { f: "json" },
  handleAs: "json"
}).then(lang.hitch(this, function(response){

  alert("Attachment Success: " +response.addAttachmentResponse.success)

}), lang.hitch(this, function(error){
  console.warn(error);
}));

JohnGrayson

Isaiah, depending on how you get the 'image' we might be able to do this.

create Blob form image
- type = "image/png" - use correct type here based on image...
- Can you get an array buffer from image?
- I have not tried base64 but maybe it will work...
create 'form' html dom node
- method = post
- enctype = multipart/form-data
create FormData using 'form' from previous step
append Blob to FormData
- use 'attachment' as the name
call 'addAttachment' REST endpoint of feature

If you setup a small jsfiddle with a test service we might be able to try some of this out...

IsaiahAguilera

Doug,

Thanks for your reply. Yes I am using Phone Gap to build this application. The issue with Phone Gap is that it does not support input file type. It relies on its plugins to access the file system and camera. This wouldn't be an issue except for the addAttachments only taking a form node. One possible solution that comes to mind is creating a second method that works similar to the old Flex API's addAttachment. This would allow you to send a base64-encoded string as the argument and would then get encoded to an image. Or just simply allow the addAttachments method to accept a direct URL to an image file. Both of these would allow for a more versatile and universally useful addAttachments method.

Unfortunately because of other applications we have set up for viewing these attachments I would not be able to use your suggestion of using related tables. I do however appreciate the help. Is there any other work around you can think of that I could use to add an attachment. Like I mentioned earlier I can either produce a base64-encoded string of the image or I can access the image directly I just cannot use the input file type.

Thanks,

Isaiah Aguilera

Anonymous User

Hi Isaiah, You are 100% correct the ArcGIS API for JavaScript requires a form node to achieve adding attachments. It sounds like you may be implementing something like Phone Gap. Since I am not all that knowledgeable with Phone Gap what could we do different?

Thinking more about this you may just want to set up a related table (not enable attachments). Then upload items to ArcGIS Online using addItem and then store off the item id or item url into the related table. Please if you have time, share recommendations regarding how you would want addAttachment to work or how it could be different.

-Doug

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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