Laravel storing only one file from multiple file upload file using AngularJS

Question

Good morning or good evening (it depends whenever you read this topic).

I wrote this code using angular and laravel to upload multiple files, but what i get from the request is only one file object, and all others are discharged, for this reason in laravel controller doesn't loop in foreach and return undefined.

Please leave me a feedback

HTML

<input ng-file-model = "files" value="Seleziona file" type="file"
       name = "file[]" class="btn btn-info btn-s" multiple />

Controller (AngularJS)

$scope.upload = function(){
    var obj = {};
    obj.pratica = $scope.pra.id;
    obj.cliente = $scope.cliente.id;
    obj.tipoDoc = $scope.getTipoDoc;
    obj.file = $scope.files;
    dati.uploadFile(obj)
        .success(function(result){
            $rootScope.stampaGritter(result.message, "success");
        })
        .error(function(result){
            $rootScope.stampaGritter(result.message, "error");
        });
};

app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                angular.forEach(element[0].files, function (item) {
                    scope.files.push(item);
                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, scope.files);
                    } else {
                        modelSetter(scope, scope.files[0]);
                    }
                });
            });
        }
    };
}]);

uploadFile: function(obj) {
    var fd = new FormData();
    angular.forEach(obj.file, function(item) {
        fd.append('file', item);
    });
    fd.append('tipo_doc', obj.tipoDoc);
    fd.append('cliente', obj.cliente);
    fd.append('pratica', obj.pratica);
    $http.post(
        "api/storeFile",
        fd,
        {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined
        }
    })
},

Controller (Laravel)

public function storeFile(Request $request) {
    /*$file = $request->file('file');
    $filename = $file->getClientOriginalName();
    $guid = $this->getGUID();
    $file->move(storage_path()."\\app\\file", $guid);
    $response = [
        "file" => $filename,
        "GUID" => $guid
    ];
    $file = new Documenti($response);
    $file->save();*/
    $cli = $request->input('cliente');
    $pra = $request->input('pratica');
    $tipoDoc = $request->input('tipo_doc');
    $files = $request->file('file');
    dd($files);
    foreach($files as $file) {
        $guid = $this->getGUID();
        $file->move(storage_path()."\\app\\file", $guid);
        $response = [
            'cliente_id' => $cli,
            'pratica_id' => $pra,
            'tipo_id' => $tipoDoc,
            'file' => $file->getClientOriginalName(),
            'GUID' => $guid
        ];
        $file = new Documenti($response);
        $file->save();
    }
    return response()->json($response);
}

When dd($files) it prints

preview

Request Payload:

------WebKitFormBoundary1yzFmBAy2rTa73eV
Content-Disposition: form-data; name="file"; filename="autorizzazioni2.CSV"
Content-Type: application/octet-stream


------WebKitFormBoundary1yzFmBAy2rTa73eV
Content-Disposition: form-data; name="file"; filename="bustapaga.pdf"
Content-Type: application/pdf


------WebKitFormBoundary1yzFmBAy2rTa73eV
Content-Disposition: form-data; name="tipo_doc"

7
------WebKitFormBoundary1yzFmBAy2rTa73eV
Content-Disposition: form-data; name="cliente"

2
------WebKitFormBoundary1yzFmBAy2rTa73eV
Content-Disposition: form-data; name="pratica"

2
------WebKitFormBoundary1yzFmBAy2rTa73eV--

Don't use the ng- prefix for custom directives. The ng- prefix is reserved for core AngularJS directives. — georgeawg
– georgeawg, Commented Jun 20, 2018 at 12:57

rkj · Accepted Answer · 2018-06-20 13:03:07Z

2

Laravel has store function use this

foreach ($request->file as $file) {
  $filename = $file->store('folder');
}

Here folder is storage/app/folder

You need to change in FormData like this, you have to add file[] array in FormData

for (let i = 0; i < obj.file.length; i++) {
     let f = obj.file[i];
     fd.append('file[]', f);
 }

edited Jun 20, 2018 at 13:03

answered Jun 20, 2018 at 12:42

rkj

8,3172 gold badges30 silver badges35 bronze badges

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

5 Comments

Simone Battiato Over a year ago

the storage system works, the problem is that on the $request->file i get only one file, even if multiple files are uploaded in the request

rkj Over a year ago

did you try $request->file

Simone Battiato Over a year ago

Yes, i obtain always the same result

rkj Over a year ago

@SimoneBattiato i have updated answer, you need to do some changes in javascript side

rkj Over a year ago

Glad, it helps you

Collectives™ on Stack Overflow

Laravel storing only one file from multiple file upload file using AngularJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related