We are using Restlet for our API on the client side, everything server side is written in Laravel 5. We are having trouble in one portion. We have a couple endpoints that require you to upload a file. In Angular, I have only gotten that to work using the following method thus far:
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 }); I don't know why that is the only way I have been successful, but I would like to change it over to the Restlet endpoint I have created. For most of my calls, it is as simple as this:
$rootScope.restlet.getCompanyAll().then(function(response) { $scope.companies = response.data; }); and
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; }); Pretty simple, but when I try to implement the post of an image, it doesn't recognize it, and leaves the image out completely. Here is the code I am attempting to use, it works with the non-Restlet way, but doesn't work with 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; }); Has anyone gotten something like this to work? And if so, how does it work? Thanks! :)
EDIT 1:
Here is the HTML of the page I have set up. It does have a file input, but for some reason it Restlet doesn't like the file. I have tried a plain file input, along with an input with a directive on it. The current version I am using is an image, that when clicked is linked to an file input that is hidden. I am also using a custom directive on it currently.
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> Custom Directive:
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(); }); } }; }); 1 Answers
Answers 1
You didn't post your HTML but I assume that you are using an input with a type of file to specify the file to upload and binding to it with ng-model or some native Angular binding mechanism. I have no idea why, but Angular doesn't support this. There are 2 common ways to implement this.
The 1st is to use a directive that works around this issue. There's one here: https://github.com/danialfarid/ng-file-upload.
The 2nd, and at least where I would start, is you can simply use document.getElementById to retrieve the file name from the input in your controller. IOW, $scope.file = document.getElementById("myFileThingy").value.
0 comments:
Post a Comment