Get File Input Value in Laravel Via AngularJS form

Question

I want to get value from file input from angularjs form in laravel, but i can't get the value.

why?

angularjs:

<div ng-controller="UploadImgController" >
    <div ng-repeat="image in images">
        <img ng-src="{{image.image}}" />
    </div>
    <form ng-submit="uploadImg()" method="post" enctype="multipart/form-data">
        Select image to upload:
        <input type="file" name="path" id="path" ng-model="addimages.path" accept="image/*" app-filereader>
        <input type="text" name="propertyid" ng-model="addimages.propertyid">
        <input type="submit" value="Upload Image" name="submit" class="btn btn-primary" >
    </form>
</div>

laravel (UploadImgController.php):

public function store()
{

    $file = Input::file('path');
    echo "file: ".$file;
}

(routes.php):

Route::resource('img','UploadImgController');

I got no value. What should I do? Thank you. :)

Check if the file is getting uploaded Input::hasFile('path'). If not, check the contents of $_FILES — Swaraj Giri
– Swaraj Giri, Commented Apr 9, 2015 at 9:39

Nay Zaw Oo · Accepted Answer · 2015-04-10 04:41:03Z

1

I recommend using ng-file-upload.

View

<button ng-file-select ng-model="myFiles" ng-file-change="upload($files)">Upload</button>

Angular JS

var app = angular.module('fileUpload', ['angularFileUpload']);

app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {
        $scope.upload = function (files) {
            if (files && files.length){
                for (var i = files.length - 1; i >= 0; i--) {
                    var file = files[i];
                    $upload.upload({
                        url: '/upload',
                        fields: {key: 'value'},
                        file: file
                    })
                    .progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        console.log('File upload ' + progressPercentage + "% complete.");
                    })
                    .success(function (data, status, headers, config) {
                        console.log(data);
                    })
                    .error(function(data, status, headers, config) {
                        console.log(data);
                    });
                }
            } 
        };
    }
]);

Laravel Route

Route::post('upload', [
    'uses'    => 'FileUploadController@upload'
]);

Laravel Controller

public function upload() {
    $file = \Input::file('file');
    return $file;
}

answered Apr 10, 2015 at 4:41

Nay Zaw Oo

5115 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hahahaha Over a year ago

so that button replace the input file button?

Cengkuru Michael · Accepted Answer · 2017-03-11 02:33:14Z

You can pull that off without a plugin actually. I did face a similar problem once and this is how I went about it.

View

<input type="file" name="file" onchange="angular.element(this).scope().uploadImage(this.files)"/>

Angularjs Controller

$scope.uploadavtar = function (files) {
                var fd = new FormData();
                //Take the first selected file
                fd.append("file", files[0]);

                $http.post("/upload-url" + $scope.school.profile.id, fd, {
                    withCredentials: true,
                    headers: {'Content-Type': undefined},
                    transformRequest: angular.identity
                }).then(function successCallback(response) {
                    $scope.result = response;
                    // this callback will be called asynchronously
                    // when the response is available
                }, function errorCallback(response) {
                    console.log(response);
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
            }

Routes.php

Route::post('/upload-url', 'UsersController@uploadFile');

Laravel Controller

// Upload files
    public function uploadFile(Requests\UpdateuploadfileRequest $request, $id)
    {

        $extension = Input::file('file')->getClientOriginalExtension(); 
        $fileName = time().'.'.$extension; // renameing image
        $destination = 'uploads/img'. $fileName;

        move_uploaded_file($_FILES['file']['tmp_name'], $destination);

    }
}

Request validation file (UpdateuploadfileRequest.php)

/**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        $rules = [

        ];

        return $rules;
    }

Collectives™ on Stack Overflow

Get File Input Value in Laravel Via AngularJS form

2 Answers 2

View

Angular JS

Laravel Route

Laravel Controller

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

View

Angular JS

Laravel Route

Laravel Controller

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related