Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm developer and I try to learn some of AngularJs, now i try to do a form, and is necessary send a file from input[file] to php, but when I click the buttom the file is not sended to this php, Try with some examples, but none worked.

Regards!!

my code:

<form>
    <input type="file" file-model="csvFile" name="contactFile" on-read-file="showContent($fileContent)" class="filestyle glyfecha glyphicon input-sm" />
    <button type="submit" class="btn btn-success btn-block" ng-click="sendForm()" style="margin-top: 10px;margin-bottom: 10px;">Guardar contactos</button>
</form>


app.directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                console.log(element[0].files[0]);     //this work
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file){
    var fd = new FormData();
    fd.append('file', file);
    $http.post('v1/contact/upload/0', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .then(function(response){
        console.log(response.data);
    })
}
}]);

app.controller('addcontacto', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.sendForm = function() {
    var file = $scope.csvFile;
    fileUpload.uploadFileToUrl(file);
};
}]);
share|improve this question
    
(1) Put a console.log('hello') inside your app.controller code. Does it appear when you load the web page? (2) Is there more this file you haven't shown? Eg, I don't see ng-app or ng-controller anywhere, I wanted to confirm if you omitted them from the example intentionally. – therobinkim Dec 29 '16 at 21:44
    
@therobinkim thank, but i can see the "hello" , I omitted intentionally the files ,ng-app and ng-controller – Jarek C. Sour Dec 29 '16 at 21:51
    
What is purpose of headers: {'Content-Type': undefined}? – guest271314 Dec 29 '16 at 21:53
    
@guest271314 I copy it directly from tutorials, in several I have seen that write it like this – Jarek C. Sour Dec 29 '16 at 21:56
    
Can you include php at Question? – guest271314 Dec 29 '16 at 21:59

If the API accepts Content-Type:multipart/form-data, use the example in how to upload file using Angularjs, multipart/form-data.

If the API accepts Content-Type:application/octet-stream or some other binary format, just post the file object directly:

app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file){
    //var fd = new FormData();
    //fd.append('file', file);
    //$http.post('v1/contact/upload/0', fd, {
    //POST file object directly
    $http.post('v1/contact/upload/0', file, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .then(function(response){
        console.log(response.data);
    })
}
}]);

The reason the the headers property needs to be {'Content-Type': undefined} is to override the AngularJS default of {'Content-Type': application/json}.

When no content type is defined, the browser sets the content type based on the type of the object being posted.

For more information see, MDN Web API Reference -- XMLHttpRequest.send(). The file object is a special type of blob.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.