example on moving fengyuanchen cropper image to local file system - php

Question

I tried multiple ways to do it. I have tech stack as bootstrap /php/ mysql. I need to store profile images of user in file system or database. Can anyone help me with a sample code?
I could bring myself to level that cropped file is generated and can be downloaded. But further I am stuck in saving them to file system or database.
<!-- Content -->
<!-- Default box -->
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Family Details</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="collapse" title="Collapse">
<i class="fa fa-plus"></i></button>
<!--<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>-->
</div>
</div>
<div class="box-body">
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3 class="page-header">Demo:</h3> -->
<div class="img-container">
<img id="image" src="" alt="Picture">
</div>
</div>
<div class="col-md-3">
<!-- <h3 class="page-header">Preview:</h3> -->
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
</div>
<div class="docs-buttons">
<div class="btn-group">
<!-- upload -->
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
<span class="fa fa-upload"></span>
Browse Image
</span>
</label>
</div>
<div class="btn-group btn-group-crop">
<!-- <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>-->
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 320 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 320, height: 320 })">
Preview
</span>
</button>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Save</a>
</div>
</div>
</div>
</div><!-- /.modal -->
</div><!-- /.docs-buttons -->
</div>
</div>
</div>
<!-- add photo ends -->
==== PHP code
$target_dir = "../apppage/memImage/";
$target_file = $target_dir . basename($_FILES["fileToUpload"][$filename]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
?>