Как разместить изображение с другими данными в файле json, используя форму angularjs

Question

Я пытаюсь создать несколько форм на вкладках, где данные предыдущей вкладки использовались на следующей вкладке, и у каждой формы есть кнопка сохранения, которая сохраняет данные для следующей вкладки с помощью angularjs.Все отлично работает с кодом.Все данные формы добавляются в одно поле в модели, которое является JSONField.За исключением того, что у меня есть форма с полем файла, обычно изображения, которые я застрял при загрузке этих изображений в поле json.

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

это моя форма

<div class="tab-content" id="myTabContent" style="min-height:375px">
                        <div class="tab-pane active" id="environment" role="tabpanel" aria-labelledby="environment-tab">
                            <div class="form-group col-lg-5">
                                <label class="form-control-label">Title </label>
                                <input type="text" class="form-control" ng-model="env.title" required />
                            </div>
                            <div class="form-group col-lg-5">
                                <label class="form-control-label">Department</label>
                                <select class="form-control" ng-model="env.department"
                                    ng-options="c.id as c.name for c in departments" required>
                                </select>
                            </div>
                            <div class="form-group col-lg-5">
                                <label class="form-control-label" for="appname">App Name</label>
                                <select class="form-control" ng-model="env.app_name"
                                    ng-options="c.id as c.name for c in app_name" required>
                                </select>
                            </div>
                        </div>
                        <div class="tab-pane" id="room" role="tabpanel" aria-labelledby="room-tab">
                            <div class="row">
                                <div class="form-group col-lg-4">
                                    <label class="form-control-label">Name</label>
                                    <input type="text" class="form-control" ng-model="env.json_data1.room.name" />
                                </div>
                                <div class="form-group col-lg-4">
                                    <label class="form-control-label">Height </label>
                                    <input type="text" class="form-control" ng-model="env.json_data1.room.height" />
                                </div>
                                <div class="form-group col-lg-4">
                                    <label class="form-control-label">Width </label>
                                    <input type="text" class="form-control" ng-model="env.json_data1.room.width" />
                                </div>
                                <div class="form-group col-lg-5">
                                    <label class="form-control-label">Length </label>
                                    <input type="text" class="form-control" ng-model="env.json_data1.room.length" />
                                </div>
                                <div class="form-group col-lg-5">
                                    <label class="form-control-label">Texture </label>
                                    <input type="text" class="form-control" ng-model="env.json_data1.room.texture" />
                                </div>
                                <div class="form-group col-lg-5">
                                    <label class="form-control-label">Room Image </label>
                                    <input type="file" class="dropify"
                                        file-model="env.json_data1.room.room_floorplan" accept="image/*" />
                                </div>
                                <div class="form-group col-lg-5">
                                    <label class="form-control-label">Floorplan </label>
                                    <input type="file" class="dropify"
                                         accept="image/*" />
                                </div>
                                <div class="form-group col-lg-2 p-4">
                                    <label class="form-control-label">&nbsp;</label>
                                    <button type="button" ng-click="addRoom(env.json_data1.room)"
                                        class="btn btn-primary">{{env.json_data1.room.stage||'Add'}}</button>
                                </div>
                                <table class="table">
                                    <tr>
                                        <th>Name</th>
                                        <th>Texture</th>
                                        <th>Size</th>
                                        <th>Actions</th>
                                    </tr>
                                    <tr ng-repeat="room in env.json_data1.rooms">
                                        <td>{{room.name}}</td>
                                        <td>{{room.texture}}</td>
                                        <td>{{room.height}} x {{room.width}} x {{room.length}}</td>
                                        <th><button type="button" ng-click="editRoom(room)">Edit</button></th>
                                    </tr>
                                </table>
                            </div>
                        </div>

$scope.addRoom = function (rec) {
            if (!rec.stage) {
                rec.stage = 'Update';
                $scope.env.json_data1.rooms.push(rec);
            }
            $scope.env.json_data1.room = {};
        }