OlivierJazz's avatar

Ajax upload image

Hello.

I have a problem on an Ajax request for image upload. I can not get through. I am therefore posting my form to you:

@section('content')
{!! Form::model($user, ['route' => ['user.update', $user->id], 'method' => 'put', 'files' => true]) !!}
<div class="row content">
  @if(session()->has('ok'))
    <div class="col-lg-12">
      <div class="alert alert-success alert-dismissible">{!! session('ok') !!}</div>
    </div>
  @endif
  <div class="col-lg-10">
    <div class="panel panel-primary">
      <div class="panel-heading">Informations sur le compte
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-2 col-sm-12">
            <img src="../img/unknown.jpg" alt="..." class="img-thumbnail" id="result">
            <div class="input-file-container">
              {!! Form::file('profilImage', ['class' => 'input-file', 'id' => 'file']) !!}
              <!-- <input class="input-filegfd" id="file" type="file"> -->
              <label for="file" class="input-file-trigger" tabindex="0"><span class="ion-edit" aria-hidden="true"></span></label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg-12 col-md-6 col-sm-6">
        {!! Form::button('<span class="ion-checkmark" aria-hidden="true"></span> Valider', ['class' => 'btn btn-success content-botton', 'type' => 'submit']) !!}
      </div>
  </div>
</div>
</div>
{!! Form::close() !!}
@endsection

And my javascript :

var formData = new FormData();// get the form data
    formData = {
    'image_nom'     : ($('input[type=file]')[0].files[0]).name,
    'image_size'    : ($('input[type=file]')[0].files[0]).size,
    'image_type'    : ($('input[type=file]')[0].files[0]).type
};

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('[name="_token"]').val()
        }
});

$.ajax({
    url: 'UserController@uploadImage',
    type: 'PUT',
    data:  'formData',
    contentType: false,
    cache: false,
    processData:false,
})
.done(function(data) {
    alert("cest bon !");
})
.fail(function(data) {
    alert("pas bon !!!");
});

And my controller :

  public function uploadImage()
  {
    return true;
  }

Under chrome the debug tool returns an error 500 (Internal Server Error). I can not find a solution.

Thanks in advance for your feedback

0 likes
4 replies
OlivierJazz's avatar

I have no more information about this bug in the logs of laravel.

tomopongrac's avatar
Level 51

You must create route and put url this

url: 'UserController@uploadImage',
1 like
OlivierJazz's avatar

Thank you. With a road it works perfectly. I do not see why we should use a road in this case. But thank you very much.

Please or to participate in this conversation.