current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

Im trying to upload files using angularJs and PHP.

Im using angular-file-upload, https://github.com/danialfarid/angular-file-upload.

The problem seems to be in my PHP-code, because it want move the file to the target directory.

Here is my angular:

$scope.onFileSelect = function($files) { //Vi har valt en eller flea filer //$files är en array innehållande de valda filerna att ladda upp. Dess namn, storlek och typ

for(var i = 0; i < $files.length; i++)
{
    var file = $files[i];
    $scope.upload = $upload.upload({
        url: 'lib/actions.php',
        data: {myObj: $scope.myModelObj},
        file: file

    }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
    }).success(function(data, status, headers, config) {
        console.log(data);
    });
}

};

This works great. A POST is made to my PHP-file:

if(isset($_FILES['file']))
{
    $target_dir = "books/";
    $target_file = $target_dir . basename($_FILES["file"]["name"]);

    if(move_uploaded_file($_FILES['file']['tmp_name'], $target_file))
    {
        echo "YES";
    }
    else
    {
        echo "wrong";
    }
}

This always prints "wrong". I can't understand why. Anyone who can help me?

share|improve this question
    
I think, this is an issue about the path. Let's var_dump(getcwd()) to see, what is your current directory, and is that has a books subdirectory –  lolka_bolka Nov 21 '14 at 13:36
    
@lolka_bolka The output of that is: string(21) "/var/www/cryptlib/lib" –  user500468 Nov 21 '14 at 13:37
    
And where is the books directory? /var/www/cryptlib/lib/books or /var/www/cryptlib/books? –  lolka_bolka Nov 21 '14 at 13:38
    
@lolka_bolka: Yes, it is inside the lib directory. –  user500468 Nov 21 '14 at 13:39
    
And all the permissions are right? Test with 777, but don't forget to set back to 775 or 755. –  lolka_bolka Nov 21 '14 at 13:41

1 Answer 1

up vote 0 down vote

Try using multipart POST type instead of $_FILES, and here is an elegant way to post your files: http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs . This worked for me.

EDIT

Better I wrote down here the elegant way, if something happens with the linked site.

You need to create a directive what is attached to your controller, so you can handle the current scope, the directive can looks like this:

.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(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};

}]);

Once you've created your directive you can use in your html section like this:

<input type="file" file-model="myFile"/>

Okay, now we have my own directive what can handle your file, we need to send to server (localhost in your case). So we make a service for that:

.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });
}

}]);

Just like that, you can give this service any url, not just your localhost, and the file, what you want to upload.

But how we do that? Just copy this to your controller:

var file = $scope.myFile;
var uploadUrl = 'http://www.example.com/images';
fileUpload.uploadFileToUrl(file, uploadUrl);

This should work. :)

share|improve this answer
    
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. –  Andy Korneyev Nov 27 '14 at 9:32

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.