0

I am creating a simple upload files web application using laravel in the backend and I am trying to print the response that is sent from the server -which is supposed to be informed about the uploaded file- in the console, but it shows me an empty string. here is my controller:

<?php
namespace App\Http\Controllers;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Storage;
class UploadsController extends Controller
{
    public function getUpload(){
        return view('upload');
    }
    public function postUpload(request $request){
// //        
       $result = print_r($request,true); 
        $time = Carbon::now();
        if ($request->hasFile('file')) {
            $file = $request->file('file');

            $extension = $file->getClientOriginalExtension();
            $fileName = $file->getClientOriginalName();

            //$upload_success = $file->storeAs('public',$file->getClientOriginalName());

            $upload_success=Storage::disk('local')->put($fileName, fopen($file, 'r+'));


            if ($upload_success) {

                return response()->json(['request'=>$request->getContent()], 200);
            }

            else {
                return response()->json('error', 400);
            }
        }
        return response()->json('no file to upload', 400);


    }

}

and my view where I am printing the response:

<html>
   <head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
      <title>upload</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="/js/xhr2.js"></script>


      <script type="text/javascript">
         $(function(){
               $('#upload').on("click",function(){
                     $.ajaxSetup({
                         headers: {
                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                         }
                     });
                     $("#file").upload("/upload",function(data){
                       $('#spin').css('display','none');
                        $('#msg').css('display','block');
                        console.log(data);


                     },function(prog,val){
                      $('#prog').html(val+"%");
                      $('#prog').width(''+val+'%');
                      if(val == 100){
                        $("#prog").html('Completed');
                        $('#spin').css('display','block');
                      }


                     });
               });
         });

      </script>
   </head>
   <body>
    <div class="container">
    <div style="margin-top:5px"><input type="file" id="file" name="file" ></div>
    <div style="margin-top:5px;margin-bottom: 5px">
    <input type="button" id="upload" value="upload" class="btn btn-success btn-lg">
   </div>

    <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;"  aria-valuemin="0" aria-valuemax="100" id="prog"></div>
</div>
<div id="spin" style="display:none">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
</div>
<div class="alert alert-success" style="display: none" id="msg" style="text-align: center">
  <strong>Success!</strong>You have uploaded the file successfully
</div>
  </div>
   </body>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

and here is a sample of what I get: empty response

I would know if I am doing it wrong, and if not, why it is empty, Thanks.

Faysal Ahmed
  • 7,501
  • 5
  • 28
  • 50
Khaled Rimawi
  • 115
  • 1
  • 6
  • User http://php.net/manual/en/function.error-log.php (error_log) to track whats going on. like error_log($file) to see file object. You can get error_log file in PHP log directory or you can see this post https://stackoverflow.com/questions/37535315/where-are-logs-located – Ali Exalter Mar 08 '18 at 10:58

1 Answers1

0

You're not using a form element. Wrap your inputs in a basic html form:

<form method="POST" action="#">
    @csrf
    ...
</form>

Then use jquery to post the form to the laravel route.

Mkk
  • 433
  • 3
  • 8
  • i don't think this is the problem, the request is sent normally without the form tag and file is stored also. – Khaled Rimawi Mar 08 '18 at 11:12
  • Why do you assume this is not a problem? In most cases you shouldn't use inputs without a form. Laravel request input body will be empty without 'multipart/form-data' header. Then you can also just use the standard Laravel method for adding csrf instead of tags (this can also cause an empty body) – Mkk Mar 08 '18 at 12:01