Crop image before uploading to s3

I need the functionality where a user uploads an image and then is presented with a UI of some sort where they can choose an area of the image and crop it - the crop then gets uploaded to s3.

Right now I have the image selection and upload process working fine using the AWS SDK.

I have no idea where to begin with injecting the cropping process.

Do I somehow need to catch the image after it's been selected by the user, present them with the cropper tool, catch the crop and then pass that into my image upload controller?

I don't know where to start and it's highly frustrating. JS isn't my thing.

Here's my code

BLADE

<form class="account-form"
                              action="/uploadimage"
                              method="post"
                              enctype="multipart/form-data">
                            {{csrf_field()}}
                            <div id='button1' style='display:block' class="col-12 col-sm-12 pad5">
                                <input type="hidden" name='id' value='{{$id}}'>
                                <label class="btn btn-block mt-4 btn-brand2"
                                       onclick="ga('send','event','button-select-profile-image','click','account-page');">
                                    <span class="change">Select Profile Image</span><span><input
                                                id="profilePic"
                                                type="file"
                                                name="image"
                                                style="display: none;"></span>
                                </label>

                            </div>
                            <div id='button2' style='display:none' class="col-12 col-sm-12 pad5">
                                <button class="btn btn-brand mt-4 btn-block"
                                        type="submit"
                                        onclick="ga('send','event','button-upload-profile-image','click','account-page');">
                                    Upload
                                    <i class="fa fa-cloud-upload"
                                       aria-hidden="true"></i>
                                </button>

                            </div>
                        </form>

CONTROLLER

 public function uploadFileToS3(Request $request)
    {

        $user = User::findOrFail($request->id);
        $oldpicture = $user->picsource;

        if ($oldpicture != "default.jpg")
        {
            Storage::disk('s3')->delete('/teamtastic-images/'.$oldpicture);
        };


        $userID = $user->id;
        $image = $request->file('image');
        $imageFileName = $userID.'-'.time() . '.' . $image->getClientOriginalExtension();

        $s3 = \Storage::disk('s3');
        $filePath = '/teamtastic-images/' . $imageFileName;
        $s3->put($filePath, file_get_contents($image), 'public');


        $user->picsource = $imageFileName;
        $user->save();

        return back()->with('success', 'Your profile image has been updated');

    }