PostSparrow

View Code

<!-- Css code -->

<style>
#uploadForm {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
#uploadForm label {margin:2px; font-size:1em; font-weight:bold;}
.demoInputBox{padding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;}
#progress-bar {background-color: #12CC1A;height:20px;color: #FFFFFF;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;}
.btnSubmit{background-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
#progress-div {border:#0FA015 1px solid;padding: 5px 0px;margin:30px 0px;border-radius:4px;text-align:center;}
#targetLayer{width:100%;text-align:center;}
</style>

<!-- Form Code -->

<form method="post" id="upload_form" enctype="multipart/form-data">
  {{ csrf_field() }}
                 
     <input type="file" class="form-control" name="picture" >
                     
     <div id="progress-div" style="display: none;">
        <div id="progress-bar"></div>
     </div>
     <div id="targetLayer"></div>

  <input type="submit" name="upload" id="upload" value="submit"> 
</form>

<!-- Javascript Code -->

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
 $(document).ready(function(){
      $('#upload_form').on('submit', function(event){
         event.preventDefault();
         $("#progress-div").show();
         $("#progress-bar").width('0%');

         var data = new FormData(this);

         $.ajax({
            xhr: function() {
                 var xhr = new window.XMLHttpRequest();
                 xhr.upload.addEventListener("progress", function(evt) {
                     if (evt.lengthComputable) {
                         var percentasect = (evt.loaded / evt.total) * 100;
                         var percentComplete = Math.round(percentasect);
                        $("#progress-bar").width(percentComplete + '%');
                        $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                     }
                }, false);
                return xhr;
             },
            url:'{{url("/store-api")}}',
            method:"POST",
            data:data,
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,
            target:   '#targetLayer', 
               success:function (data){
                  window.location.assign(data.url);
               },
         });
      });
   });
</script>

Controller Code

function store_api(Request $request)
{
    if(isset($request->picture) && !empty($request->picture)) 
    {
        $files = $request->picture;
        $name = $files->getClientOriginalName();  
        $files->move('public/uploads',$name);  
        $image_data['picture'] = $name;  
        ModelName::create($image_data); 
    }

    echo json_encode(['status'=>'Upload Successfull.','url'=>url('/')]);
}

Route Code

Route::post('/store-api', 'Controller@store_api');
or
Route::post('/store-api', [Controller::class, 'store_api']);