How to attach a local image file as a multipart-form-request part in a $.ajax POST request?

Question

I'm trying to build a mobile app (hybrid app with cordova and html5, not native, this is javascript code!) that allow to take picture and search for the content of the picture using an external service API like cloudsight (docs here: https://cloudsight.readme.io/docs/testinput). According to their docs a request should be done either with a remote image via URL (which works perfectly) or a local image attached as a multipart-form-request part, since I want to do this with a picture taken from my phone I want to attach my local image but I can't find out how to do that! This is my jQuery Ajax call code, $scope.lastPhoto is a string with my local picture file URI location (as "file://asdasd/asdsad/dsa/pic.jpg"), how can I send it as a multipart-form-request part?

$.ajax({
        method: "POST",
        url: "https://api.cloudsightapi.com/image_requests",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "CloudSight mykeywhichiwontshowtoyou");
        },
        data: {
            //I've tried this syntax but doesnt work
            'image_request[image]': new FormData().append('file', $scope.lastPhoto),

            //This doesnt work neither since it's just my local pic address
            //'image_request[image]': $scope.lastPhoto,

            //request with a remote image that actually works
            //"image_request[remote_image_url]": "http://pf.pfgcdn.net/sites/poltronafrau.com/files/styles/scheda_prodotto_gallery/public/content/catalogo/any_case/immagini/anycase.jpg",
            "image_request[locale]": "en-US"
        },
        success: function (msg) {
            $scope.token = msg.token;
        },
        error: function (msg) {
            console.log(msg.responseText);
        }
    });

Didn't you mixed angular and Jquery together ....you should have used $http instead of $ajax — Rajat Bhadauria, Mar 05 '16 at 10:51
I used angual service $http at first but couldnt make it work for some reason so i tried this ajax call and worked perfectly, but that's not the point here: I just need to understand how to attach my local file properly then i will try to make it work with angular $http instead, this is just an API test code for now... — Diego, Mar 05 '16 at 11:20

score -1 · Answer 1 · answered Mar 07 '16 at 11:28

You can send the Image with form data as a multi-part.

You need to use FileTransferPlugin. it sends image data with form data as multipart form.

first thing is to capture file from camera / gallery and on success ,save it:

         fileURL=imageData;

Then, To submit the form to server, here is the code snippet.

        var params = {};
        params.username= "coolUser";
        params.userage = 12;

        var uploadOptions = new FileUploadOptions();
        var ft = new FileTransfer();

        uploadOptions.fileKey = "expectedNameOUploadFile";
        uploadOptions.fileName = fileName; // name of the file
        uploadOptions.mimeType = "image/jpeg"; 
        uploadOptions.httpMethod = "POST";
        uploadOptions.params = params;

        ft.upload(fileURL,
            serviceURL,
            photoSuccess,
            photoFail,
            uploadOptions,
            true
        );

This actually may work but how do i attach the needed parameters? I mean the data is not just the image file alone but it has 2 fields required: {'image_request[image]': imageFile, "image_request[locale]": "en-US"}... How do i properly send this with the upload method from Cordova File Transfer plugin? — Diego, Mar 08 '16 at 21:59

How to attach a local image file as a multipart-form-request part in a $.ajax POST request?

1 Answers1