RESTLET - Загрузка файла Angular.JS на стороне клиента

Question

Мы используем Restlet для нашего API на стороне клиента, вся серверная сторона написана в Laravel 5. У нас возникают проблемы с одной порцией. У нас есть несколько конечных точек, которые требуют загрузки файла. В Угловом, я только получил, что работать, используя следующий метод до сих пор:

var fd = new FormData(); 
fd.append('image', $scope.file); 
$http.post(apiURL + "/upload", fd, { 
     transformRequest: angular.identity, 
     headers: { 
       'Content-Type': undefined 
     } 
}).then(function(response) { 
     //yay it worked 
}, function(response) { 
     //try again 
}); 

Я не знаю, почему это единственный способ, которым я был успешным, но я хотел бы изменить его на к Конечная точка восстания я создал. Для большинства моих звонков, это так просто, как это:

$rootScope.restlet.getCompanyAll().then(function(response) { 
     $scope.companies = response.data; 
}); 

и

var config = { 
    params: { 
     start: "2016-01-01", 
     end: "2016-01-31" 
    } 
}; 
var id = 1; 
$rootScope.restlet.getCompanyStatsCompany_id(id, config).then(function(response) { 
     $scope.companies = response.data; 
}); 

Довольно простой, но когда я пытаюсь реализовать пост образа, он не признает, и оставляет изображение полностью. Вот код, который я пытаюсь использовать, он работает с не-рестлетом, но не работает с Restlet.

var config = { 
    params: { 
     name: $scope.newCompany.name, 
     rep_id: $scope.newCompany.rep_id, 
     image: $scope.image_input 
    } 
}; 
var id = 1; 
$rootScope.restlet.postCompanyCreate(config).then(function(response) { 
     $scope.companies = response.data; 
}); 

Неужели кто-то получил что-то подобное, чтобы работать? И если да, то как это работает? Благодаря! :)

EDIT 1:

Вот HTML страницы я настроил. У него есть вход для файла, но по какой-то причине ему не нравится файл Restlet. Я попробовал простой файл ввода, а также ввод с директивой на нем. Текущей версией, которую я использую, является изображение, которое при щелчке связано с скрытым вводом файла. В настоящее время я также использую пользовательскую директиву.

HTML:

<div class="modal-body"> 
    <form ng-submit="createCompany()"> 
    <!-- OTHER FORM STUFF GOES HERE --> 
      <div class="col-sm-12"> 
       <img src="" id="imagePreview" onClick="$('#imageUpload').trigger('click');" style="max-width: 100%;" /> 
       <input type="file" style="display: none;" id="imageUpload" file="file" /> 
      </div> 
    <!-- FORM SUBMIT AND RESET BUTTONS HERE --> 
    </form> 
</div> 

Пользовательские Директива:

app.directive('file', function() { 
     return { 
       scope: { 
         file: '=' 
       }, 
       link: function(scope, el, attrs) { 
         el.bind('change', function(event) { 
           var file = event.target.files[0]; 
           scope.file = file ? file : undefined; 
           scope.$apply(); 
         }); 
       } 
     }; 
}); 

Answer 1

Вы не отправлял свой HTML, но я предполагаю, что вы используете вход с типом файла, чтобы указать файл для загрузки и связывание с ним с ng-моделью или некоторым собственным механизмом углового связывания. Я понятия не имею, почему, но Angular не поддерживает это. Существует два распространенных способа реализации этого.

Первый должен использовать директиву, которая работает вокруг этой проблемы. Здесь есть одно: https://github.com/danialfarid/ng-file-upload.

2-й, и, по крайней мере, где я начну, вы можете просто использовать document.getElementById для получения имени файла с входа в контроллере. IOW, $scope.file = document.getElementById("myFileThingy").value.