Changing user avatar problem

Hello guys, I’m trying to create an account page where the user is able to change his avatar photo(this photo must be saved in some directory and in my database). This is my code:

main.js :

var	loadFile = function (event) {
	var output = document.getElementById('change-profile-pic');
	output.src = URL.createObjectURL([0]);

	var $previews = $('.preview');
		ready: function () {
			var $clone = $(this).clone().removeClass('cropper-hidden');
				display: 'block',
				width: '100%',
				minWidth: 0,
				minHeight: 0,
				maxWidth: 'none',
				maxHeight: 'none'
				width: '100%',
				overflow: 'hidden'
		crop: function (e) {
			var imageData = $(this).cropper('getImageData');
			var croppedCanvas = $(this).cropper('getCroppedCanvas');
			$('#profile-result').html('<img src="' + croppedCanvas.toDataURL() + '" class="thumb-lg img-circle" style="width:100px; height:100px;">');
			$('#save-profile').click(function() {
					type: 'POST',
					url: 'set-profile.php',
					data: {
						url: croppedCanvas.toDataURL()
					success: function(response) {

						if (response == "success") {
							$('#loading').html("Profile picture successfuly updated");
							}, 2000);

			var previewAspectRatio = e.width / e.height;
			$previews.each(function () {
				var $preview = $(this);
				var previewWidth = $preview.width();
				var previewHeight = previewWidth / previewAspectRatio;
				var imageScaledRatio = e.width / previewWidth;
					width: imageData.naturalWidth / imageScaledRatio,
					height: imageData.naturalHeight / imageScaledRatio,
					marginLeft: -e.x / imageScaledRatio,
					marginTop: -e.v / imageScaledRatio



function save_image($inPath, $outPath){
	$in = fopen($inPath, "rb");
	$out = fopen($outPath, "wb");
	while ($chunk = fread($in, 8192)) {
		fwrite($out, $chunk, 8192);

if (isset($session_username)) {
	$url = $_POST['url'];
	save_image($url, 'accounts/images/' . $session_username . '.jpg');
	echo "success";
} else {


and my form in account.php

<a href="#" data-toggle="modal" data-target="#change-profile">
      <div id="profile-result">
           <?php if (file_exists('accounts/images/' . $session_username . '.jpg')): ?>
                 <img src="<?php echo 'accounts/images/' . $session_username . '.jpg'; ?>" alt="" class="thumb-lg img-circle" style="width: 100px; height: 100px;">
            <?php else: ?>
                   <img src="accounts/images/default.png" alt="" class="thumb-lg img-circle">
            <?php endif ?>

                                                        <div class="modal fade" id="change-profile">
                                                            <div class="modal-dialog">
                                                                <div class="" style="background: #fff; padding: 10px;">
                                                                    <div class="ajax-response" id="loading"></div>
                                                                    <h4 class="m-t-5 m-b-5 ellipsis">Change profile</h4>
                                                                    <div class="profile-pic-wraper col-sm-8">
                                                                        <?php if (file_exists('accounts/images/' . $session_username . '.jpg')): ?>
                                                                            <img src="<?php echo 'accounts/images/' . $session_username . '.jpg'; ?>" alt="" id="change-profile-pic" style="width: 40%;">
                                                                        <?php else: ?>
                                                                            <img src="accounts/images/default.png" alt="" id="change-profile-pic"  style="width: 40%">
                                                                        <?php endif ?>
                                                                    <div class="preview-wrapper">
                                                                        <div class="preview"></div>
                                                                        <form action="" enctype="multipart/form-data">
                                                                            <input type="file" accept="image/*" id="profile-file-input" onchange="loadFile(event)" name="">
                                                                            <div style="position: absolute; right: 20px; bottom: 20px;">
                                                                                <button href="#" class="btn btn-primary" data-dismiss="modal" style="background: #8fcb62;"> Close</button>
                                                                                <input type="button" value="Save" class="btn btn-primary" id="save_profile" name="">

I dont know where is my mistake, is not showing my preview image, and is not saving it. I’am using js cropper cropper-github. Or if anyone have some better solution please help. Thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.