title: How to post an image with other data in the json file using angularjs form
body: <p>I'm trying to create multiple form under tabs with previous tab data been used in the next tab and each form has a save button which saves the data for the next tab using angularjs. Everything is working fine with code. All of the form data is added to single field in the model which is a JSONField. Except I have a form which has a file field usually images I am stuck with the upload of these images to the json field.</p>
  
  <pre><code>var app = angular.module('app', []);
  app.controller('enviromentController', function ($scope, $http) {
  $scope.saveEnvironment = function () {
  
              $http({
                  method: 'PUT',
                  "url": "{% url 'core:api:edit-environement' env_id=env_id %}",
                  "data": angular.copy($scope.env),
                  "headers": {
                      "accept": "application/json",
                      "content-type": "application/json",
                      "Authorization": "Token " + localStorage.getItem('token')
                  }
              }).then(function () {
                  inform("Saved", "Published data");
              });
  </code></pre>
  
  <h1>this is my form</h1>
  
  <pre><code>&lt;div class="tab-content" id="myTabContent" style="min-height:375px"&gt;
                          &lt;div class="tab-pane active" id="environment" role="tabpanel" aria-labelledby="environment-tab"&gt;
                              &lt;div class="form-group col-lg-5"&gt;
                                  &lt;label class="form-control-label"&gt;Title &lt;/label&gt;
                                  &lt;input type="text" class="form-control" ng-model="env.title" required /&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-lg-5"&gt;
                                  &lt;label class="form-control-label"&gt;Department&lt;/label&gt;
                                  &lt;select class="form-control" ng-model="env.department"
                                      ng-options="c.id as c.name for c in departments" required&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-lg-5"&gt;
                                  &lt;label class="form-control-label" for="appname"&gt;App Name&lt;/label&gt;
                                  &lt;select class="form-control" ng-model="env.app_name"
                                      ng-options="c.id as c.name for c in app_name" required&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tab-pane" id="room" role="tabpanel" aria-labelledby="room-tab"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="form-group col-lg-4"&gt;
                                      &lt;label class="form-control-label"&gt;Name&lt;/label&gt;
                                      &lt;input type="text" class="form-control" ng-model="env.json_data1.room.name" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-4"&gt;
                                      &lt;label class="form-control-label"&gt;Height &lt;/label&gt;
                                      &lt;input type="text" class="form-control" ng-model="env.json_data1.room.height" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-4"&gt;
                                      &lt;label class="form-control-label"&gt;Width &lt;/label&gt;
                                      &lt;input type="text" class="form-control" ng-model="env.json_data1.room.width" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-5"&gt;
                                      &lt;label class="form-control-label"&gt;Length &lt;/label&gt;
                                      &lt;input type="text" class="form-control" ng-model="env.json_data1.room.length" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-5"&gt;
                                      &lt;label class="form-control-label"&gt;Texture &lt;/label&gt;
                                      &lt;input type="text" class="form-control" ng-model="env.json_data1.room.texture" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-5"&gt;
                                      &lt;label class="form-control-label"&gt;Room Image &lt;/label&gt;
                                      &lt;input type="file" class="dropify"
                                          file-model="env.json_data1.room.room_floorplan" accept="image/*" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-5"&gt;
                                      &lt;label class="form-control-label"&gt;Floorplan &lt;/label&gt;
                                      &lt;input type="file" class="dropify"
                                           accept="image/*" /&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-lg-2 p-4"&gt;
                                      &lt;label class="form-control-label"&gt;&amp;nbsp;&lt;/label&gt;
                                      &lt;button type="button" ng-click="addRoom(env.json_data1.room)"
                                          class="btn btn-primary"&gt;{{env.json_data1.room.stage||'Add'}}&lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;table class="table"&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;Name&lt;/th&gt;
                                          &lt;th&gt;Texture&lt;/th&gt;
                                          &lt;th&gt;Size&lt;/th&gt;
                                          &lt;th&gt;Actions&lt;/th&gt;
                                      &lt;/tr&gt;
                                      &lt;tr ng-repeat="room in env.json_data1.rooms"&gt;
                                          &lt;td&gt;{{room.name}}&lt;/td&gt;
                                          &lt;td&gt;{{room.texture}}&lt;/td&gt;
                                          &lt;td&gt;{{room.height}} x {{room.width}} x {{room.length}}&lt;/td&gt;
                                          &lt;th&gt;&lt;button type="button" ng-click="editRoom(room)"&gt;Edit&lt;/button&gt;&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  $scope.addRoom = function (rec) {
              if (!rec.stage) {
                  rec.stage = 'Update';
                  $scope.env.json_data1.rooms.push(rec);
              }
              $scope.env.json_data1.room = {};
          }
  </code></pre>