Upload multiple files in angularjs and backend using laravel (without form tag)

Question

I want to upload multiple files without using form tag and using angular js and i am using laravel 5.2. Below code i tried sending only 1 file it works but on multiple files it fails.

HTML Code

<input type="file" class="upload_file pull-right" multiple />

JQuery Code

$(".upload_file").change(function ()
{
    if (this.files && this.files.length > 0)
    {
         scope.uploadFile(this.files);
    }
});

AngularJs Code

scope = $scope;

$scope.uploadFile = function(files)
{
    var fd = new FormData();
    fd.append("file", files);
    $http.post(API_URL + '/offline_upload/file/?token=' + token,fd,
    {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    })
    .success(function(data)
    {
        alert('Done');
    });
 };

Laravel PHP Code

$files = $request->file('file');
Log::info(count($files));

Here the count is always 0

In angularjs instead of files if i send files[0] then only 1 file is sent. But how to send multiple files and retrieve it.

Can someone please help me solve this issue.

I have few questions. What is the reason not to use form tag? Does it break on client or server side? — boroboris
– boroboris, Commented Oct 15, 2016 at 15:28
I have multiple images to upload so using form might delay the response from server — Sharath
– Sharath, Commented Feb 5, 2017 at 15:45

cssBlaster21895 · Accepted Answer · 2016-10-11 19:18:22Z

1

You can try that with https://github.com/nervgh/angular-file-upload, it supports input type file with multiple parameter and you don't need jquery.

You just instate new uploader object: $scope.uploader = new FileUploader({var options;}); and put directive into upload form <input type="file" nv-file-select uploader="uploader"/> inside your html.

answered Oct 11, 2016 at 19:18

cssBlaster21895

3,70022 silver badges33 bronze badges

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

3 Comments

Sharath Over a year ago

is it possible within a form

cssBlaster21895 Over a year ago

yes it is, you have to prepare api route and pass also csrf token

Sharath Over a year ago

i'll check and get back to you

Collectives™ on Stack Overflow

Upload multiple files in angularjs and backend using laravel (without form tag)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related