Can someone help me out

In my console when the Upload button is not working i get 405 Method Not Allowed

What errors are you getting? You seem to be missing the CSRF token (unless you're setting it up someplace else):

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

This in turn requires that you set the following tag in your HTML head section:

<meta name="csrf-token" content="{{ csrf_token() }}">

It would be nice to have a look at the route and controller files too.

i'm getting

jquery.min.js:4 POST http://127.0.0.1:8000/profile 405 (Method Not Allowed)

Have you added the CSRF token to the Ajax request? Is the profile route configured to accept a POST request?

Yes CRSF token is set

Route::post('/profile', 'ProfilePsController@update_avatar')->middleware('auth');

Try adding it the simple way:

      $.ajax({
        url:"/profile",
        type: "POST",
        headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });

I'm getting this now

POST http://127.0.0.1:8000/profile 422 (Unprocessable Entity)

That means it's failing validation. You can check out the response with Chrome DevTools to see a detailed error:

Open DevTools (CTRL+Shift+I on PC), go to the Network tab, filter by XHR and click over the item that says "profile" (you might need to upload the file again for the message to appear). You'll get the detailed error message in JSON format.

Can I see the Controller code?

My Controller

$request->validate([
            'avatar' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $user = Auth::user();

        $avatarName = $user->id.'_avatar'.time().'.'.request()->avatar->getClientOriginalExtension();

        $request->avatar->storeAs('avatars',$avatarName);

        $user->avatar = $avatarName;
        $user->save();

        return redirect("/profile/{$user->id}/{$user->username}")
            ->with('success','You have successfully upload image.');

When i filtered the error message to XHR i got {message: "The given data was invalid.", errors: {avatar: ["The avatar field is required."]}} errors: {avatar: ["The avatar field is required."]} avatar: ["The avatar field is required."] message: "The given data was invalid."

I changed the input name to avatar and i'm still getting same error

There's no need to change the input name, you should update the AJAX call:

      $.ajax({
        url:"/profile",
        type: "POST",
        headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
        data:{"avatar": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });

You can do return $request->all(); in your controller (before validation) to check with DevTools exactly what you're sending.

Got this error message

{message: "The given data was invalid.",…}
errors: {upload_image: ["The upload image field is required."]}
upload_image: ["The upload image field is required."]
0: "The upload image field is required."
message: "The given data was invalid."

when i took out the validation, i got an error 500

Please check that the field name that you're attempting to validate ("avatar"):

$request->validate([
    'avatar' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);

Is the same as key sent in the data object of the ajax call:

$.ajax({
        url:"/profile",
        type: "POST",
        headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
        data:{"avatar": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });

If you return early in your controller you should be able to see exactly what's being sent in the request:

        // Check the request
	return $request->all();

        $request->validate([
            'avatar' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $user = Auth::user();

        $avatarName = $user->id.'_avatar'.time().'.'.request()->avatar->getClientOriginalExtension();

        $request->avatar->storeAs('avatars',$avatarName);

        $user->avatar = $avatarName;
        $user->save();

        return redirect("/profile/{$user->id}/{$user->username}")
            ->with('success','You have successfully upload image.');

Thanks, it's working but the cropped image is not saving or updating. or it's not submitting the image in the controller

Does that mean that the full-size picture is being saved? Or nothing is being saved at all?

Nothing is being saved at all

Did you remove this line?

return $request->all();

It's only meant as a temporary change to troubleshoot your code.

I think i'd have to convert from URI to save as image. Can you help?

first (in your controller method)

dd($request->avatar)  

if you get big string value then you need to decode your base64 image with php base64_decode function

base64_decode ( string $data [, bool $strict = false ] ); 

its a php function you can use in your controller...

Hope its help

Last one

I want to save the pictures in a folder called avatars

My present code, saves it directly to the public folder

if(isset($_POST["avatar"]))
        {
        $data = $_POST["avatar"];

        $image_array_1 = explode(";", $data);

        $image_array_2 = explode(",", $image_array_1[1]);

        $data = base64_decode($image_array_2[1]);

        $imageName = time() . '.png';

        file_put_contents($imageName, $data);

        $user = Auth::user();

        $user->avatar = $imageName;
        $user->save();

        return redirect("/profile/{$user->id}/{$user->username}")
            ->with('success','You have successfully upload image.');
        }

This is telling me filepath does not exist

file_put_contents('storage/public/avatars',file_get_contents($imageName, $data));

I suggest you check this link

https://stackoverflow.com/questions/44283986/how-to-upload-an-image-through-jquery

     <html>
        <head>
            <meta charset="UTF-8">
            <title>AJAX image upload with, jQuery</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function (e) {
                    $('#upload').on('click', function () {
                        var file_data = $('#file').prop('files')[0];
                        var form_data = new FormData();
                        form_data.append('file', file_data);
                        $.ajax({
                            url: 'http://localhost/ci/index.php/welcome/upload', // point to server-side controller method
                            dataType: 'text', // what to expect back from the server
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: 'post',
                            success: function (response) {
                                $('#msg').html(response); // display success response from the server
                            },
                            error: function (response) {
                                $('#msg').html(response); // display error response from the server
                            }
                        });
                    });
                });
            </script>
        </head>
        <body>
            <p id="msg"></p>

            <input type="file" id="file" name="file" multiple />
            <button id="upload">Upload</button>
        </body>
    </html>
´´´

I've done that @guybrush_threepwood and @kkhicher1 were really helpful. I just need to correct my file path

This is telling me filepath does not exist

file_put_contents('storage/public/avatars',file_get_contents($imageName, $data));

Have you tried using the Storage facade instead?

$fileName = 'public/avatars/' . $imageName;
Storage::disk('local')->put($fileName, $data);

That will put the file in the storage/app/public/avatars folder.

Remember to reference the facade at the top of your controller like this: use Illuminate\Support\Facades\Storage;

Good luck

In order to show the image later you have to create a symbolic link to your storage folder by running: php artisan storage:link.

Then you can access the file like this:

<img src="{{ asset('storage/avatars/avatar.png') }}">

If you insist in uploading the file directly to the public folder (I wouldn't recommend it), this is the correct syntax:

$fileName = 'avatars/' . $imageName;
file_put_contents($fileName, $data);

@tomasosho => as per @guybrush_threepwood it's very simple process to store file into your storage folder or public folder.... 1st you have to decide where you want to store then implement the code...