Croppie image upload

croppie-image-upload

*** html

// form
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Profile picture</span>
    </div>
    <div class="custom-file">
        <input name="image" type="hidden" id="crop_img">
        <input type="file" class="custom-file-input" id="upload_image">
        <label class="custom-file-label" for="upload_image">Choose image</label>
    </div>
</div>

// modal
<div id="uploadimageModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-center">Upload & Crop Image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="image_demo"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success crop_image">Crop image</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

*** JS
$(document).ready(function(){

    $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
            width:368,
            height:245,
            type:'square' //circle
        },
        boundary:{
            width:470,
            height:350
        }
    });

    $('#upload_image').on('change', function(){
      let name = $(this).val();
      let ext = name.substring(name.lastIndexOf('.') + 1);
      let supportedFile = ['jpg', 'jpeg', 'png'];
      if(supportedFile.indexOf(ext) != -1 ){
        var reader = new FileReader();
        reader.onload = function (event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
      }else{
        alert('this file is not supported');
        $(this).closest('form').trigger("reset");
      }

    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response){
            let data = response.split(',');
            let img = data[1];
            $('#crop_img').val(img);
            console.log(img);
            $('#uploadimageModal').modal('hide');
        })
    });

});
  
  
  //laravel or php
  
  function storeImage(User $user){
        // create image
        request()->validate([
            'image' => 'required'
        ]);
        $image = base64_decode(request()->image);
        $imageName ='/uploads/'.uniqid().time().'.jpg';

        $update = $user->update([
           'image' => $imageName
        ]);

        if($update){
            file_put_contents( public_path().$imageName, $image);
            Activity::create([
                'user_name' => auth()->user()->name,
                'event_name' => 'updated',
                'event_target' => 'user image',
            ]);
            return back()->with('success', 'Image has been updated');
        }else{
            return back()->with('error', 'Something went wrong, please try again');
        }
    }