I’m a learning student who is making a picture upload feature with HTML, CSS, JS, and PHP.
My final goal is to make a profile picture upload feature with cropping.
I found cropper.js would be a good tool for my idea, so I decided to use this.
And also, I found cropper.js is available to use with sweetalert2 that I’ve used to. official document(Sweetalert2 + cropper.js)
So I built the code that inspects file validity and uploads the raw file and loads that again to crop. But I couldn’t use the feature of cropper.js and received a strange warning from the browser console that is SweetAlert2: Unknown parameter "willOpen".
(Every valid image could be uploaded without any error, but the image was shown but the draggable cropping bar did not show so I couldn’t crop any image.)
Here is my code that the problem has occurred.
This code inspects whether the uploaded file is allowable and uploads that, and loads that file again to crop with cropper.js(now problem has occurred at that point.).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change profile picture</title>
<link rel="stylesheet" href="../../../css/font.css">
<link rel="shortcut icon" href="../../../favicon/favicon.ico">
<link rel="stylesheet" href="./css/uploadProfilePicture.css">
<?php include('../../../common/resource.html'); ?>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cropper.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cropper.css" rel="stylesheet">
</head>
<body>
</body>
</html>
<style>
#cropperjs {
display: block;
max-width: 100%;
}
#preview {
width: 200px;
height: 200px;
margin-bottom: 10px;
border-radius: 100%;
}
</style>
<?php
session_start();
header('Content-Type: text/html; charset=utf-8');
if(!isset($_FILES)) {
?>
<script>
Swal.fire({
icon: 'error',
title: ':/',
footer: 'The file did not uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
die();
}
$tempFile = $_FILES['profileImage']['tmp_name'];
$fileTypeExtension = explode("/", $_FILES['profileImage']['type']);
$fileType = $fileTypeExtension[0];
$fileExtension = $fileTypeExtension[1];
$isExtensionAllowable = false;
switch($fileExtension){
case 'jpeg':
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
$isExtensionAllowable = true;
break;
default:
?>
<script>
Swal.fire({
icon: 'error',
title: 'error',
footer: 'Only pictures(jpeg, jpg, gif, bmp, png) can be uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
exit;
die();
}
if($fileType === "image"){
if($isExtensionAllowable === true) {
// allowable
try {
$savePath = "../../../asset/userdata/profilePicture/{$_SESSION['id']}.png";
move_uploaded_file($tempFile, $savePath);
// cropper.js ?
} catch (Exception $err) {
die($err -> getMessage());
}
?>
<script>
Swal.fire({
title: 'edit profile picture',
html: `
<img id="preview" src="<?php echo $savePath ?>">
<div>
<img id="cropperjs" src="<?php echo $savePath ?>">
</div>
`,
willOpen: () => {
const image = Swal.getPopup().querySelector('#cropperjs')
const cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
crop: throttle(function () {
const croppedCanvas = cropper.getCroppedCanvas()
const preview = Swal.getHtmlContainer().querySelector('#preview')
preview.src = croppedCanvas.toDataURL()
}, 25)
});
},
preConfirm: () => {
return Swal.getHtmlContainer().querySelector('#preview').src
}
})
</script>
<?php
}
} else {
?>
<script>
Swal.fire({
icon: 'error',
title: 'not image!!',
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
}
?>
In addition, the content of resource.html is here. It contains some external JS/CSS links to use at my page and there was no problem to load.
<!-- bootstrap -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<!-- end of bootstrap-->
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- end of Bootstrap icon -->
<!-- toastr.js -->
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- end of toastr.js -->
<!-- sweetalert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<!-- end of sweetalert -->
I need help to figure out the point to be fixed or what I have to do to reach my goal(I think my thought to implement my goal might be wrong.).
Do you have any ideas? It hasn’t been long since I’ve experienced this part, so it’s very hard to me.
Thanks in advance.