javascript - no resources with given url found 500 (internel server error)

Question

while uploading an image its gives an error of 500 internal server errors. couldn't get through how to resolve this. this is the code to add the cover photo like Facebook where we can adjust the position of the picture.is there any issue with jquery? below is the complete code. any help would be appreciated.

HTML:

<div id="bgimage" class="hovercover text-center">
      <img class="img-responsive"  src="https://cdn.pixabay.com/photo/2017/08/06/21/01/louvre-2596278_960_720.jpg"> 
      <div class="hover-div">
      <form id="hoverform" action="{{url('/upload')}}" enctype="multipart/form-data" method="post">
    {{ csrf_field() }}
      <label class="custom-file-upload" title="Change Cover Image" for="file-upload"> <i class="fa fa-file-image-o"></i> Change Cover </label>
      <input id="file-upload" name="file" type="file">
    </form>
    </div>
    </div>
    <div id="adjimage" class="hovercover1 text-center" style="display: none;"></div>
    <script  type="text/javascript"  
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> 
    <script type="text/javascript" src="https://www.scoopism.com/try/js/jquery.wallform.js"></script>
    <script type="text/javascript" src="https://www.scoopism.com/try/js/jwincrop.js"></script> 
     <script type="text/javascript"> 
       // submit the form soon after change image
       $('#file-upload').on('change',function(){ 
        $("#hoverform").ajaxForm({target: '#adjimage',
            success:function(){
            $(".hover-div").hide(); 
                $("#bgimage").hide();
                $("#adjimage").show(); 
            }}).submit();
     });
      
    $('.hovercover').each(function() {
    //set size
    var th = $(this).height(),//box height
        tw = $(this).width(),//box width
        im = $(this).children('img'),//image
        ih = im.height(),//inital image height
        iw = im.width();//initial image width
    if (ih>iw) {//if portrait
        im.addClass('ww').removeClass('wh');//set width 100%
    } else {//if landscape
        im.addClass('wh').removeClass('ww');//set height 100%
    }
    //set offset
    var nh = im.height(),//new image height
        nw = im.width(),//new image width
        hd = (nh-th)/2,//half dif img/box height
        wd = (nw-tw)/2;//half dif img/box width
    if (nh<nw) {//if portrait
        im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
    } else {//if landscape
        im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
    }
}); 
</script>

ROUTE:

Route::get('/upload', 'ImageprocessController@upload');
Route::post('/upload', 'ImageprocessController@postupload');
Route::post('/cover-image-save', 'ImageprocessController@postimgAdjustpostion');

Controller:

    class ImageprocessController extends Controller
    {
      public function upload()
       {
         $image=Image::select('image','position')->first();
         return view('user.employeeforms.img')->with('image',$image);
       }
    public function postupload(Request $request)
    {
      
      $file         = $request->file('file');
      $rules = array('file' => 'required|mimes:png,gif,jpeg,jpg'); //'required|mimes:png,gif,jpeg,txt,pdf,doc'
      $validator = Validator::make(array('file'=> $file), $rules);
      if($validator->passes()){
                 
                 $image = $file->move( 'img', sprintf('%s-%s.%s', time(), str_random(), explode('/', $file->getMimeType())[1]));
                    $img            = Image::where('id','=',1)->first();
                    
                    $img->image     = $image->getFilename();
                    $img->save(); 
                     $bgSave='<img id="timelineBGload" class="headerimage ui-corner-all " style="top: 0px; width: 100%;" src="'.\App::make('url')->to('/'). '/img/'.$image->getFilename().'">';
                    $bgSave .= '<div class="btn-save-drag"><p style="background-color: white; font-size: 0.8em;">Drag and adjust the image</p><button class="bgSave btn btn-info bg-lg">Save</button></div> ';
                    $bgSave .= "<script>
                    $('.headerimage').on('mouseover',function()
                      { 
                        var y1 = $('#adjimage').height();
                        var y2 =  $('.headerimage').height(); 
                        $(this).draggable({ 
                          scroll: false,
                          axis: 'y',
                          drag: function(event, ui) {
                            if(ui.position.top >= 0)
                            {
                            ui.position.top = 0;
                            }
                            else if(ui.position.top <= y1 - y2)
                            {
                            ui.position.top = y1 - y2;
                            }
                        },
                        stop: function(event, ui)
                        {
                        }
                      });
                      });
                      $('.bgSave').on('click',function ()
                          {
                            var p = $('#timelineBGload').attr('style');
                            var Y =p.split('top:');
                            var Z=Y[1].split(';');
                            var dataString ='position='+Z[0];
                            $.ajax({
                              type: 'POST',
                              url: '"; //is there any need to add url ?
                             $bgSave .= url('/cover-image-save');
                             $bgSave .="',
                              data: dataString,
                              cache: false,
                               headers: {
                                'X-CSRF-TOKEN': '". csrf_token() ."'
                                },
                              success: function(html)
                              {
                                if(html)
                                {
                                   location.reload();
                                  
                                  return false;
                                }
                              }
                            });
                          return false;
                          }); 
                      </script>";
                    return $bgSave; 
      }
    }
    public function postimgAdjustpostion(Request $request)
    {
 
      $usr            = Image::where('id','=',1)->first();
      $usr->position  = $request->get('position');
      $usr->save();
      return redirect()->back();
    }
}


 

 

标签： javascriptjquerylaravel-4draggable