Upload form data & image using Angular JS and Cordova

Question

I have a form where a user can enter data, select an image from the camera (using the cordova-plugin-camera plugin) and submit the form.

I am not sure how to submit the form to the server so it is part of the POST request.

HTML:

<form name="recommendationForm" ng-submit="submitForm(recommendationForm.$valid)" novalidate>
  <div class="list">
    <label class="item item-input item-stacked-label">
      <span class="input-label">Recommendation</span>
      <textarea name="content" ng-model="formData.content" rows="10" required></textarea>
      <input type="hidden" name="user_id" ng-value="customer.User.id" />
      <input type="hidden" name="customer_id" ng-value="customer.Customer.id" />
      <p ng-show="recommendationForm.content.$invalid && !recommendationForm.content.$pristine" class="help-block">Please write something first ...</p>
    </label>

    <label class="item item-input item-stacked-label">
      <span class="input-label">Image</span><br>
      <img style="display:none" id="smallImage" src="" class="uploaded-image" ng-model="formData.image" />
      <button class="button button-calm" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Foto aus Bibliothek wählen</button>
    </label>
  </div>

  <button type="submit" class="button button-balanced" ng-disabled="recommendationForm.$invalid">Hinzufügen</button>
</form>

JS:

// CAMERA HANDLING
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {

    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {

    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}

// A button will call this function
//
function capturePhotoEdit() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}

// A button will call this function
//
function getPhoto(source) {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
}

// Called if something bad happens.
//
function onFail(message) {
    setTimeout(function() {
        // do your thing here!
        alert('Failed because: ' + message);
    }, 0);
}

JS Controller:

  $scope.submitForm = function(isValid) {
    // check to make sure the form is completely valid

    if (isValid) {
      $http({
        method  : 'POST',
        url     : 'https://www.something.com/api/add.json',
        data    : $('form[name="recommendationForm"]').serialize(), 
        headers : { 'Content-Type': 'multipart/form-data' }  
      })
      .success(function(data) {
        if (data.success == false) {
          $scope.error = data.message;
          $scope.message = "";
        } else {
          $scope.message =  data.message;
          $scope.error = "";
        }
      });
    }
  }

I know how to upload form data and I know how to upload a single image, but I am currently not able to combine both. How can I upload the form data along with the image?

daserge · Accepted Answer · 2015-12-25 12:25:32Z

You can try to use cordova-plugin-filetransfer:

// !! Assumes variable fileURL contains a valid URL to a text file on the device,
//    for example, cdvfile://localhost/persistent/path/to/file.txt

var win = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

var fail = function (error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

var params = {};
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

Note that in order to use multipart/form-data upload mode, options.headers["Content-Type"] should not be defined.

Collectives™ on Stack Overflow

Upload form data & image using Angular JS and Cordova

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related