File Upload with Angular 2 and Laravel 5

Ok the latest hurdle was handling File uploads via Angular JS 2, and receiving it on the API end in Laravel 5.

I realised there wasn’t a lot of resources on the internet about this, and earlier reports shown that file uploading was not supported in Angular JS 2. Thankfully, this is now possible and quite easy.

First to set up the file upload on Angular JS 2.

Simply set up a file input component, you can wrap it in a directive, but for simplicity’s purposes, I am simply listening to a generic input here.

In the view,

In the component, we have a fileUpload method which listens on any changes to the input, if so, we upload the file to the API.

And on the receiving controller in Laravel, it’s as simple as:


Next Article

Laravel 5.3 Passport Oauth woes



  1. Hi, I am looking for this for so long. Thanks.
    However, my file is not able to upload.

    Can I pm you for fore details ?

    • Hi JLee,
      Sure, I’ll try to help if I can. Shoot me an email at

      • I cant catch te request on laravel, I’m sending well the data from Angular 4.4.3 but when I ask for File I never recieve answer . Here is my code

        public function asd(Request $request){
        if($request->hasFile(‘uploaded0’)) {
        return response(‘true’, 200);
        else {
        return response(‘false’, 200);


        i’m sending an image called uploaded0, and angular works fine, because I check on the Chrome’s network tab. Thanks

  2. Why my comment is gone ?

    I just want to ask the details .