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

Answer 1

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