Laravel Image Upload using ajax 500 Internal Server Error

Question

I am trying to upload image using ajax in laravel 5.2.but still i am getting error 500 Internal Server Error in route. when i am trying to upload image using ajax request the browser shown correct route path but still i am not getting reason why it still showing error to me.

HTML

<!-- CHANGE AVATAR TAB -->
                        <div class="tab-pane" id="tab_1_2">

                            <div class="uploadimagediv"></div> 
                                {{ Form::open(array('url' => 'admin/avatar','method'=>'post','files'=>'true','id'=>'updateprofileimage'))  }}

                                <div class="form-group">
                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt=""/>
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            Select image </span>
                                            <span class="fileinput-exists">
                                            Change </span>
                                            <p class="text-danger" id="error_image"></p>
                                            <input type="file" id="picture" name="picture"/>
                                            {{--{{ Form::file('picture') }}--}}
                                            </span>
                                            <span class="error alert-danger">{{ $errors->first('picture') }}</span>
                                            <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput">
                                            Remove </a>
                                        </div>
                                    </div>
                                    <div class="clearfix margin-top-10">

                                    </div>
                                </div>
                                <div class="margin-top-10">
                                    {{Form::hidden('id', 2, ["id"=>"id"])}}
                                    {{ Form::button('Upload',['id'=> 'updatepicture','class'=>'btn green-haze']) }}

                                    {{--{{ Form::submit('Submit',['class' => 'btn green-haze','name'=>'changeImage']) }}--}}
                                    <a href="javascript:;" class="btn default">
                                    Cancel </a>
                                </div>
                            {{ Form::close() }}
                        </div>
                        <!-- END CHANGE AVATAR TAB -->

Route

Route::group(['prefix' => 'admin'], function ()
{
    Route::controller('/','DashboardController');
});

Ajax

$(document).on('click', '#updatepicture', function($e)
{
    $e.preventDefault();
    // send an ajax request
    $("#error_image").empty();
    $.ajax(
    {

        url: 'avatar',
        processData: false,
        contentType: false,
        type: "post",//use for update
        data: new FormData($("#updateprofileimage")[0]),
        success: function(data)
        {
            if(data.status)
            {           
                $("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
                window.setTimeout(function()
                {
                    $(".alert").fadeTo(500, 0).slideUp(500, function()
                    {
                        $(this).remove(); 
                    });
                }, 5000);
                $('.alert .close').on("click", function(e)
                {
                    $(this).parent().fadeTo(500, 0).slideUp(500);
                });
                //console.log(data);
                //$("#updateprofileimage")[0].reset();
                //window.location.href = "http://localhost/laravel/admin/profile";
            }
            else
            {
                errors = data.errors;

                for(error in errors)
                {
                    $("#error_"+error.title).html(error.message);
                }
            }
        },
        error: function(xhr)
        {
            if(xhr.status == 422)
            {
                errors = xhr.responseJSON;
                for(error in errors)
                {
                    $("#error_"+error).html(errors[error][0]);
                }
            }
        }
    });
});

Error is :"NetworkError: 500 Internal Server Error - http://localhost/laravel/admin/avatar"

please suggest me where i am getting wrong.

Controller is

public function postAvatar(ImageUploadRequest $request)
{
  ---
}

Nirbhay Kularia · Accepted Answer · 2017-04-01 10:51:59Z

1

Add the below line inside <head>
<meta name="csrf-token" content="{{ csrf_token() }}">

And add the below lines before your ajax call in javascript function
$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
});

And don't forget to give permission to your storage folder
sudo chmod -R 777 storage

answered Apr 1, 2017 at 10:51

Nirbhay Kularia

1016 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ashish bansal Over a year ago

i am still getting error "NetworkError: 500 Internal Server Error - localhost/laravel/admin/avatar"

Nirbhay Kularia Over a year ago

looks like you have not correctly put your route in ajax url , near $.ajax( { url: 'avatar', it must be url: '{{route('name')}}'

Rahman Qaiser · Accepted Answer · 2017-04-01 12:04:25Z

In your ajax setup you have to provide x-csrf-token with the request. For your ajax request , also there is a problem with your url:

 $(document).on('click', '#updatepicture', function($e)
    {
        $e.preventDefault();
        // send an ajax request
        $("#error_image").empty();
        $.ajax(
        {

            url: "{{url('avatar')}}",
            processData: false,
            contentType: false,
            type: "post",//use for update
            data: new FormData($("#updateprofileimage")[0]),
            headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(data)
            {
                if(data.status)
                {           
                    $("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
                    window.setTimeout(function()
                    {
                        $(".alert").fadeTo(500, 0).slideUp(500, function()
                        {
                            $(this).remove(); 
                        });
                    }, 5000);
                    $('.alert .close').on("click", function(e)
                    {
                        $(this).parent().fadeTo(500, 0).slideUp(500);
                    });
                    //console.log(data);
                    //$("#updateprofileimage")[0].reset();
                    //window.location.href = "http://localhost/laravel/admin/profile";
                }
                else
                {
                    errors = data.errors;

                    for(error in errors)
                    {
                        $("#error_"+error.title).html(error.message);
                    }
                }
            },
            error: function(xhr)
            {
                if(xhr.status == 422)
                {
                    errors = xhr.responseJSON;
                    for(error in errors)
                    {
                        $("#error_"+error).html(errors[error][0]);
                    }
                }
            }
        });
    });

i am still getting error "NetworkError: 500 Internal Server Error - localhost/laravel/admin/avatar"

wang wang · Accepted Answer · 2023-03-11 13:18:29Z

0

Anyone with 500 server error, remember to turn on phpinfo in php.ini (of xamp), and on cpanel hosting, go to php select version -> extensitons -> check phpinfo is ok

answered Mar 11, 2023 at 13:18

wang wang

1

Collectives™ on Stack Overflow

Laravel Image Upload using ajax 500 Internal Server Error

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related