2 years ago
#57872
Natalie
Crop, upload and store images for carousel in multi input form
I'm building admin panel where the client should be able to create posts, news... The form has many inputs: title, dates, description, main image, images for carousel.... I involved the cropper so the client can specify the image display and it works properly (it uploads all images)... I can't figure out how to collect all cropped images names for carousel from one php file as an array and push them to another php file which should store datas into mySQL base. All other inputs work perfectly
The form and script from index.php file:
<form action="add_post.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-6">
<div class="row mb-3">
<label for="inputNumber" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Kategorija</label>
<div class="col-sm-10">
<select name="id_categories" class="form-control col-sm-10">
<?php
$categories = Properties::getAllCategories($mySql);
foreach ($categories as $ct) {
?>
<option value="<?= $ct['id'] ?>"><?= $ct['name'] ?></option>
<?php
};
?>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputText" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Naslov akcije</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title_sr_rs">
</div>
</div>
<div class="row mb-3">
<label for="inputText" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Naziv planine</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="location">
</div>
</div>
<div class="row mb-3">
<label for="inputText" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Vodič</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="guide">
</div>
</div>
<div class="row mb-3">
<label for="inputText" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="reservation">
</div>
</div>
<div class="row mb-3">
<label for="inputText" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Prevoz</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="transportation_sr_rs">
</div>
</div>
<div class="row mb-3">
<label for="inputNumber" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Dužina staze</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="length">
</div>
</div>
<div class="row mb-3">
<label for="inputNumber" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Uspon</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="ascent">
</div>
</div>
<div class="row mb-3">
<label for="inputDate" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Datum polaska</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="departure">
</div>
</div>
<div class="row mb-3">
<label for="inputDate" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Datum povratka</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="departure_back">
</div>
</div>
<div class="row mb-3">
<label for="inputDate" class="col-sm-2 col-form-label" style="font-size: 0.9rem; padding:0px;">Prijave do:</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="reservation_deadline">
</div>
</div>
<h5 class="card-title">Opis akcije / izvestaja</h5>
<textarea class="tinymce-editor" name="description_sr_rs">
</textarea><!-- End TinyMCE Editor -->
</div>
<div class="col-lg-6">
<div class="row mb-3">
<label class="col-form-label">Unesi glavnu sliku</label>
<div class="col-sm-10">
<input type="file" class="form-control" name="image">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label">Unesi slike za slider (max 7)</label>
<div class="col-sm-10" id="dynamic_field">
<input type="file" name="gallery_images[]" id="row" class="form-control name_list galleryimage"/>
<button type="button" name="add" id="add" class="btn btn-success" style="width:25%;">Add More</button>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10">
<button type="submit" name="addpost" class="btn btn-primary postSave" style="left:50%; bottom:0px;">SAVE</button>
</div>
</div>
</div>
</div>
</form><!-- End General Form Elements -->
</div>
</div>
</section>
<?php }
?>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop image</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<!-- default image where we will set the src via jquery-->
<img id="image">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<input type="file" id="row' + i + '" name="gallery_images[]" class="form-control name_list galleryimage"/><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove" style="width:10%;">X</button>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
$(this).remove();
});
$('#submit').click(function () {
$.ajax({
url: "index.php",
method: "POST",
data: $('#add_name').serialize(),
success: function (data)
{
alert(data);
$('#add_name')[0].reset()
}
});
});
});
var bs_modal = $('#modal');
var image = document.getElementById('image');
var cropper, reader, file;
$("body").on("change", ".galleryimage", function (e) {
var files = e.target.files;
var done = function (url) {
image.src = url;
bs_modal.modal('show');
};
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
bs_modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1 / 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$("#crop").click(function () {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160
});
canvas.toBlob(function (blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
$.ajax({
type: "POST",
url: "upload.php",
data: {gallery_images: base64data},
success: function (data) {
bs_modal.modal('hide');
alert("success upload image");
}
});
};
});
});
</script>
upload.php it uploads each image properly
if (isset($_POST['gallery_images'])) {
$data = $_POST['gallery_images'];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$base64_decode = base64_decode($image_array_2[1]);
$path_img = '../images/uploads/' . time() . '.png';
$imagename = '' . time() . '.png';
file_put_contents($path_img, $base64_decode);
}
add_post.php for storing data into mySQL database, all text and data inputs works properly... I have a problem with getting cropped images names as an array so I can store them through this file
require('../templates/db_connection.php');
if (isset($_POST['addpost'])) {
//db strings
$pcategory_id = $_POST['id_categories'];
$ptitle = mysqli_real_escape_string($mySql, $_POST['title_sr_rs']);
$plocation = mysqli_real_escape_string($mySql, $_POST['location']);
$pdescription = mysqli_real_escape_string($mySql, $_POST['description_sr_rs']);
$pguide = mysqli_real_escape_string($mySql, $_POST['guide']);
$preservation = mysqli_real_escape_string($mySql, $_POST['reservation']);
$ptransportation = mysqli_real_escape_string($mySql, $_POST['transportation_sr_rs']);
$plength = $_POST['length'];
$pascent = $_POST['ascent'];
$pdeparture = $_POST['departure'];
$pdeparture_back = $_POST['departure_back'];
$preservation_deadline = $_POST['reservation_deadline'];
//images
$pimage = $_FILES['image'];
$image_name = $_FILES['image']['name'];
$image_tmp = $_FILES['image']['tmp_name'];
foreach ($pimage as $index => $img) {
if (move_uploaded_file($image_tmp, "../images/excursion/$image_name")) {
$pimage = $image_name;
}
}
$gallery_images_name = $_FILES['gallery_images']['name'];
$gallery_images_tmp = $_FILES['gallery_images']['tmp_name'];
foreach ($gallery_images_name as $index => $gallery_img) {
if (move_uploaded_file($gallery_images_tmp[$index], "../images/excursion/$gallery_images_name[$index]")) {
$pgallery_images = implode(" ", $gallery_images_name);
}
}
//insert into db
$query = "INSERT INTO tblPosts (id_categories,title_sr_rs,location,description_sr_rs,guide,reservation,transportation_sr_rs,length,ascent,departure,departure_back,reservation_deadline,image,gallery_images) VALUES ('$pcategory_id','$ptitle','$plocation','$pdescription','$pguide','$preservation','$ptransportation','$plength','$pascent','$pdeparture','$pdeparture_back','$preservation_deadline','$pimage','$pgallery_images')";
$run = mysqli_query($mySql, $query);
$post_id = mysqli_insert_id($mySql);
header("location:index.php?managepost");
}
More details:
in my index.php
i have a form with dynamic section :
<div class="col-sm-10" id="dynamic_field">
<input type="file" name="gallery_images[]" id="row" class="form-control name_list galleryimage"/>
<button type="button" name="add" id="add" class="btn btn-success" style="width:25%;">Add More</button>
</div>
I add some script so the users can add new input files:
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<input type="file" id="row' + i + '" name="gallery_images[]" class="form-control name_list galleryimage"/><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove" style="width:10%;">X</button>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
$(this).remove();
});
$('#submit').click(function () {
$.ajax({
url: "index.php",
method: "POST",
data: $('#add_name').serialize(),
success: function (data)
{
alert(data);
$('#add_name')[0].reset()
}
});
});
});
each time users add a file the modal opens so they can crop the image
here is the modal:
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
using ajax in script I send the image data to upload.php file where the image is uploaded, you can see the upload.php above and here is the script code that send the cropped img to upload.php
$("#crop").click(function () {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160
});
canvas.toBlob(function (blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
$.ajax({
type: "POST",
url: "upload.php",
data: {gallery_images: base64data},
success: function (data) {
bs_modal.modal('hide');
alert("success upload image");
}
});
};
});
});
the form has action=“add_post.php”, as there are many inputs, in this file I send the values to mySql DB …
What I would like to get??? I would like to get all images names from inputs added in dynamic folder so I can send them to mySql data base as an array… I already did it with original (uncropped) images in multiple input, but here I have new image names for cropped images that I got from (blob) and decoded in upload.php file All images are uploading in target folder regulary but with time().png name and one at the time So, everything works great except the problem with collecting cropped files in the array
php
jquery
mysql
file-upload
crop
0 Answers
Your Answer