Upload Gambar via Camera by Webcamjs, into folder and database mysql

Assalamualaikum Warahmatullahi Wabarakatuh...
 
Halo, first time posting, mohon bantuannya para mastah khususon om robby,
seperti judul, gambar yang diambil dari kamera sudah berhasil masuk folder dan database,
tapi ada masalah pada hasil gambar, tidak bisa dibuka alias empty / 0Bytes
 
ini javascriptnya
 
<!-- jquery  -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- webcamjs  -->
<script src="webcamjs/webcam.min.js"></script>
<script language="JavaScript">
// menampilkan kamera dengan menentukan ukuran, format dan kualitas 
Webcam.set({
width: 240,
height: 320,
image_format: 'png',
jpeg_quality: 90
});
Webcam.set('constraints',{
facingMode: "environment"
});
//menampilkan webcam di dalam file html dengan id my_camera
Webcam.attach('#my_camera');
</script>
 
<script type="text/javascript">
// saat dokumen selesai dibuat jalankan fungsi update
$(document).ready(function () {
update();
});
// jalankan aksi saat tombol register disubmit
$(".tombol-simpan").click(function () {
event.preventDefault();
// membuat variabel image
var image = '';
 //mengambil data uername dari form di atas dengan id name
var nama_produk = $('#nama_produk').val();
//mengambil data uername dari form di atas dengan id name
var harga = $('#harga').val();
//mengambil data uername dari form di atas dengan id name
var stok = $('#stok').val();
//mengambil data uername dari form di atas dengan id name
var detail_produk = $('#detail_produk').val();
//mengambil data uername dari form di atas dengan id name
var kategori = $('#kategori').val();
//mengambil data uername dari form di atas dengan id name
var nama_kedai = $('#nama_kedai').val();
//mengambil data uername dari form di atas dengan id name
var tanggal_input = $('#tanggal_input').val();
//memasukkan data gambar ke dalam variabel image
Webcam.snap(function (data_uri) {
image = data_uri;
});
//mengirimkan data ke file jual_2.php dengan teknik ajax
$.ajax({
url: 'jual_2.php',
type: 'POST',
data: {
nama_produk: nama_produk,
harga: harga,
stok: stok,
detail_produk: detail_produk,
kategori: kategori,
nama_kedai: nama_kedai,
 tanggal_input: tanggal_input,
},
success: function () {
alert('input data berhasil');
window.location=('kedai_saya.php')
// menjalankan fungsi update setelah kirim data selesai dilakukan 
update()
}
})
});
//fungsi update untuk menampilkan data
function update() {
$.ajax({
url: 'jual2.php',
type: 'get',
success: function (data) {
$('#data').html(data);
}
});
}
</script>
 
ini code backendnya
 
<?php
 
        //mendefinisikan folder
        define('UPLOAD_DIR', 'gambar_produk/');
		//koneksi ke database
        include 'koneksi.php';
        $img = $_POST['image'];
        //menangkap variabel
        $nama_produk    = $_POST['nama_produk'];
        $harga          = $_POST['harga'];
        $berat          = $_POST['berat'];
        $quantity       = $_POST['quantity'];
        $detail_produk  = $_POST['detail_produk'];
        $kategori       = $_POST['kategori'];
        $nama_kedai     = $_POST['nama_kedai'];
        $tanggal_input  = $_POST['tanggal_input'];
 
    	$img = str_replace('data:image/png;base64,', '', $img);
    	$img = str_replace(' ', '+', $img);
    	$data = base64_decode($img);
 
        //menamai file, file dinamai secara random dengan unik
        $file = UPLOAD_DIR . uniqid() . '.png';
 
        $success = file_put_contents($file, $data);
	print $success ? $file : 'Unable to save the file.';
 
        //memasukkan data ke dalam tabel biodata
        mysqli_query($koneksi, "insert into produk set nama_produk='$nama_produk', harga='$harga', quantity='$quantity', detail_produk='$detail_produk', kategori='$kategori', nama_kedai='$nama_kedai', tanggal_input='$tanggal_input', gambar_produk='$file'");