Passing null values

[W0lfbane]

I have a form:

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <form ng-submit="save(job)" 
          accept-charset="UTF-8" 
          enctype="multipart/form-data" 
          role="form"
          name="form"
          novalidate>
      <div ng-include="'shared/error_messages.html'"></div>

      <div class="form-group">
        <label for="title">Title</label>
        <input ng-model="job.title" 
               class="form-control" 
               id="title" 
               name="title" 
               type="text" 
               ng-minlength="6"
               required />
        <div ng-class="{'alert alert-danger':form.title.$invalid}" 
             ng-show="form.$submitted || form.title.$touched">
          <div ng-show="form.title.$error.required">Title can't be blank.</div>
          <div ng-show="form.title.$error.minlength">Title is too short (minimum is 6 characters).</div>
        </div>
      </div>

      <div class="form-group">
        <label for="company">Company</label>
        <input ng-model="job.company" 
               class="form-control" 
               id="company" 
               name="company" 
               type="text" 
               ng-minlength="6"
               required />
        <div ng-class="{'alert alert-danger':form.company.$invalid}" 
             ng-show="form.$submitted || form.company.$touched">
          <div ng-show="form.company.$error.required">Company can't be blank.</div>
          <div ng-show="form.company.$error.minlength">Company is too short (minimum is 6 characters).</div>
        </div>
      </div>

      <div class="form-group">
        <label for="years">Years</label>
        <input ng-model="job.years" 
               class="form-control" 
               id="years" 
               name="years" 
               type="text" />
      </div>

      <div class="form-group">
        <label for="manager">Manager</label>
        <input ng-model="job.manager" 
               class="form-control" 
               id="manager" 
               name="manager" 
               type="text" />
      </div>

      <div class="form-group">
        <label for="contact">Contact</label>
        <input ng-model="job.contact" 
               class="form-control" 
               id="contact" 
               name="contact" 
               type="text" />
      </div>

      <div class="form-group">
        <label for="address">Address</label>
        <input ng-model="job.address" 
               class="form-control" 
               id="address" 
               name="address" 
               type="text" />
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <textarea ng-model="job.description" 
                  class="form-control" 
                  id="description" 
                  name="description"
                  minlength="6"
                  required>
        </textarea>
        <div ng-class="{'alert alert-danger':form.description.$invalid}" 
             ng-show="form.$submitted || form.description.$touched">
          <div ng-show="form.description.$error.required">Description can't be blank.</div>
          <div ng-show="form.description.$error.minlength">Description is too short (minimum is 6 characters).</div>
        </div>
      </div>

      <div class="form-group">
        <label for="skills">Skills</label>
        <input ng-model="job.skills" 
               class="form-control" 
               id="skills" 
               name="skills" 
               type="text" />
      </div>

      <label for="job_references">References</label>

      <input ng-model="job.references[0].reference"
             class="form-control"  
             type="text" />

      <input ng-model="job.references[1].reference"
             class="form-control" 
             type="text" />

      <input ng-model="job.references[2].reference"
             class="form-control" 
             type="text" />

      <input ng-model="job.references[3].reference"
             class="form-control" 
             type="text" />

      <input ng-model="job.references[4].reference"
             class="form-control" 
             type="text" />

      <div class="form-group">
        <label for="image">Image</label>
        <input ng-model="job.image" 
               class="width-100" 
               id="image" 
               name="image" 
               type="file"
               ngf-select
               accept="image/*" 
               ngf-max-size="5MB" />
      </div>

      <div class="center">
        <div class="btn-group">  
          <input class="btn btn-large btn-primary" 
                 name="commit" 
                 type="submit" 
                 value="Submit"
                 ng-disabled="message.id || form.$invalid" />
        </div>
        <div class="btn-group">
          <a ui-sref="^" href class="btn btn-large btn-default">&larr; Cancel</a>
        </div>
      </div>
    </form>  
  </div>
</div>

When sending null attributes to the server, it is parsed as a string literal "null".

I've tested the requested using a factory:

(function() {
  'use strict';

  angular
    .module('services.jobs', [])
    .factory('JobFactory', ['$resource', function($resource) {
      return $resource('/api/jobs/:id', {id: '@id'}, {
        'update': { method:'PUT' },
      });
    }]);
})();

When using the factory (JobFactory(formData).$update) I get the correct & expected request being sent to the server:

(Some of this has been redacted to save reading space)

Parameters: {"id"=>"6", "title"=>"Example Job 6", "company"=>"Example Corporation 6", "description"=>"This was hard.", "years"=>nil, "manager"=>nil, "contact"=>nil, "skills"=>nil, "address"=>nil}

When using ng-file-upload, I get this and then values are literally assigned as strings with value "null":

(Some of this has been redacted to save reading space)

{"job"=>{"title"=>"Example Job 6", "company"=>"Example Corporation 6", "description"=>"This was hard.", "years"=>"null", "manager"=>"null", "contact"=>"null", "skills"=>"null", "address"=>"null"}

I'm using Rails on the back end, but I'm having trouble finding anyone else experiencing this issue. Is this a potential bug or would it be an issue with Rails? Before form submission, the items will show as "attribute":null, but only when using angularjs-file-upload does it seem to become a string.

For posterity I will include how I have angularjs-file-upload configured:

$scope.save = function(fd) {
        var file = fd.image;
        if (file == null) {
          var Job = new JobFactory(fd);
          Job.$update(function(success) {
            console.log("success!")
          });
        } else {
          Upload.upload({
            url: '/api/jobs/' + $stateParams.id,
            method: 'PUT',
            fields: {
            'job[title]': fd.title,
            'job[company]': fd.company,
            'job[description]': fd.description,
            'job[years]': fd.years,
            'job[manager]': fd.manager,
            'job[contact]': fd.contact,
            'job[skills]': fd.skills,
            'job[address]': fd.address,
            'job[references_attributes][0]': fd.references[0],
            'job[references_attributes][1]': fd.references[1],
            'job[references_attributes][2]': fd.references[2],
            'job[references_attributes][3]': fd.references[3],
            'job[references_attributes][4]': fd.references[4] },
            file: {'job[image]': file}
          }).success(function (data, status, headers, config) {
            $scope.job = data;
            $state.go('^', {id: $stateParams.id})
          }).error(function (data, status, headers, config) {
            console.log('Error status: ' + status);
            $scope.errors = data;
          });
        }
      }

[danialfarid]

multipart form data request can send the data in plain text type that's why it is a null string. So there is no difference between null and 'null' in plain text format. For a workaround you can use the sendFieldsAs: json-blob or 'json' and then on the server deserialize the json blob or string into object.

[danialfarid]

In version 8.0.1 you can instead of fields have data and make it a proper json object. It would automatically build the keys for you: {job: {tile:xxx, comany: yyy} and you can specify file inside data.
To send them as json or jsonBlob you can use Upload.json(data) or Upload.jsonBlob(data).
See readme for samples.

[W0lfbane]

Danialfarid, your new update has resolved many of the issues I was having, thank you.

In addition, I'd like to add a resolution I had found with your new update for passing the null values. My Rails server is not properly setup to deserialize json data, while I plan to implement this in the future, I've found a pretty easy workaround to use. I'll post it just in case any other users need to see this any time later. Here is the solution that I'm using, Rails is handling perfectly (and it fits the PUT HTTP verb, as it sends the value of every attribute unlike only partial info as expected in PATCH):

To parse null values on client side (without any further server configuration), use the "data" field as per the readme and add an if statement to check for null values, example below:


          data: {
            job: {
              image: file,
              title: (fd.title == null) ? "" : fd.title,
              company: (fd.company == null) ? "" : fd.company,
              description: (fd.description == null) ? "" : fd.description,
              years: (fd.years == null) ? "" : fd.years,
              manager: (fd.manager == null) ? "" : fd.manager,
              contact: (fd.contact == null) ? "" : fd.contact,
              skills: (fd.skills == null) ? "" : fd.skills,
              address: (fd.address == null) ? "" : fd.address,
              references_attributes: fd.references
            }
          }

[gronel]

Thanks danialfarid