View Page input form. I was trying to upload a product with product images and complete the full crud operation about images and product details. This is the form for product details and image upload.
<form action="" method="post" id="product_form">
<div class="form-group">
<label for="">Subcategory</label>
<select class="form-control input-lg" id="select_subcategory">
<option value="">Choose Subcategory</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group">
<label for="">Product Title</label>
<input type="text" id="product_title" class="form-control">
</div>
<div class="form-group">
<label for="">Upload Images</label>
<input class="form-control input-lg" type="file" id="prod_img" name="prod_img[]"
multiple="multiple">
</div>
<div class="form-group">
<label for="">Brand</label>
<select class="form-control input-lg" id="select_brand">
<option value="">Choose Brand</option>
<option>One</option>
<option>Two</option>
</select>
</div>
<div class="form-group">
<label for="">Color</label>
<select class="form-control input-lg" id="product_color">
<option value="">Choose Color</option>
<option>White</option>
<option>Black</option>
</select>
</div>
<div class="form-group">
<label for="">Product Size</label>
<select class="form-control input-lg" id="product_size">
<option value="">Select Size</option>
<option>Small</option>
<option>Medium</option>
</select>
</div>
<div class="form-group">
<label for="">Product Price</label>
<input type="number" id="product_price" class="form-control">
</div>
<div class="form-group">
<label for="">Discounted Price</label>
<input type="text" placeholder="INR" class="form-control" id="prod_discount_price">
</div>
<div class="form-group">
<label for="">Description</label>
<input type="text" class="form-control" id="product_description">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="add_product">Add Data</button>
</div>
Ajax code on view page for snding data to the server.
$(document).on("click", "#add_product", function(e){
e.preventDefault();
var select_category = $("#select_category").val();
var select_subcategory = $("#select_subcategory").val();
var product_title = $("#product_title").val();
var prod_img = $("#prod_img")[0].files;
var select_brand = $("#select_brand").val();
var product_color = $("#product_color").val();
var product_size = $("#product_size").val();
var product_price = $("#product_price").val();
var prod_discount_price = $("#prod_discount_price").val();
var product_description = $("#product_description").val();
if( select_category == "" || select_subcategory == "" || product_title == "" || select_brand ==
"" || product_color == "" || product_size == "" || product_price == "" || prod_discount_price ==
"" || product_description == "" )
{
alert("All fields are required");
}
else
{
var fd = new FormData();
var ins = document.getElementById("prod_img").files.length;
for(var i=0; i< ins; i++)
{
fd.append("prod_img[]", document.getElementById("prod_img").files[i]);
}
fd.append("select_category", select_category);
fd.append("select_subcategory", select_subcategory);
fd.append("product_title", product_title);
fd.append("select_brand", select_brand);
fd.append("product_color", product_color);
fd.append("product_size", product_size);
fd.append("product_price", product_price);
fd.append("prod_discount_price", prod_discount_price);
fd.append("product_description", product_description);
$.ajax({
url: "<?php echo base_url(); ?>InsertProduct",
type: "post",
data: fd,
processData: false,
contentType: false,
dataType: "json",
success:function(data)
{
fetch();
if(data.response == "success")
{
$('#ProductModal').modal('hide');
$("#tbody").DataTable().destroy();
toastr["success"](data.message)
}
else
{
toastr["error"](data.message)
}
}
});
$("#product_form")[0].reset();
}
});
Controller Code for uploading multiple image file and product details with session check. files are uploaded successfully in the folder. all details about product are successfully submitted to the database but the image section of database is empty. I was unable to send the image file name.
public function InsertProduct()
{
if($this->session->userdata('email')=="" && $this->session->userdata('password')=="")
{
$this->load->view('Admin/index');
}
else if($this->input->is_ajax_request())
{
$this->form_validation->set_rules('select_category', 'Category', 'required|trim');
$this->form_validation->set_rules('select_subcategory', ' Subcategory', 'required|trim');
$this->form_validation->set_rules('product_title', 'Product Title', 'required|trim');
$this->form_validation->set_rules('select_brand', 'Product Brand', 'required|trim');
$this->form_validation->set_rules('product_color', 'Product Color', 'required|trim');
$this->form_validation->set_rules('product_size', 'Product Size', 'required|trim');
$this->form_validation->set_rules('product_price', 'Product Price', 'required|trim');
$this->form_validation->set_rules('prod_discount_price', 'Discount Price',
'required|trim');
$this->form_validation->set_rules('product_description', 'Product Description',
'required|trim');
if($this->form_validation->run() == FALSE)
{
$data = array('response' =>"error", 'message'=>validation_errors());
}
else
{
//$this->load->library('upload');
$img = array();
$no_of_images = count($_FILES['prod_img']['name']);
if($no_of_images > 10)
{
$data = array('response' =>"error", 'message'=>"10 Images allowed only");
}
else
{
for($i = 0; $i < $no_of_images; $i++)
{
$_FILES['img_file']['name'] = $_FILES['prod_img']['name'][$i];
$_FILES['img_file']['type'] = $_FILES['prod_img']['type'][$i];
$_FILES['img_file']['tmp_name'] = $_FILES['prod_img']['tmp_name'][$i];
$_FILES['img_file']['error'] = $_FILES['prod_img']['error'][$i];
$_FILES['img_file']['size'] = $_FILES['prod_img']['size'][$i];
$config['upload_path'] = "./ProductImages/";
$config['allowed_types'] = "jpg|jpeg|png";
$this->load->library('upload', $config);
$this->upload->initialize($config);
if($this->upload->do_upload('img_file'))
{
$img_data = $this->upload->data();
$data[$i]['prod_img'][] = $img_data['file_name'];
}
}
if(!empty($data))
{
$data = $this->input->post();
if($this->adm->InsertProduct($data))
{
$data = array('response'=>"success", 'message'=>"Data updated
successfully");
}
else
{
$data = array('response'=> "error", 'message'=> "failed");
}
}
}
}
echo json_encode($data);
}
}
Model Code for inserting data I have
public function InsertProduct($data)
{
return $this->db->insert('product',$data);
}
I have selected 4 image files to upload. Images are uploaded i get a successful message and i have checked it in the mentioned folder. But image file name is not showing in the database. Help us Thank you
Advertisement
Answer
You need to save the images name in product table as json_encode.
public function InsertProduct()
{
if($this->session->userdata('email')=="" && $this->session->userdata('password')=="")
{
$this->load->view('Admin/index');
}
else if($this->input->is_ajax_request())
{
$this->form_validation->set_rules('select_category', 'Category', 'required|trim');
$this->form_validation->set_rules('select_subcategory', ' Subcategory', 'required|trim');
$this->form_validation->set_rules('product_title', 'Product Title', 'required|trim');
$this->form_validation->set_rules('select_brand', 'Product Brand', 'required|trim');
$this->form_validation->set_rules('product_color', 'Product Color', 'required|trim');
$this->form_validation->set_rules('product_size', 'Product Size', 'required|trim');
$this->form_validation->set_rules('product_price', 'Product Price', 'required|trim');
$this->form_validation->set_rules('prod_discount_price', 'Discount Price',
'required|trim');
$this->form_validation->set_rules('product_description', 'Product Description',
'required|trim');
if($this->form_validation->run() == FALSE)
{
$data = array('response' =>"error", 'message'=>validation_errors());
}
else
{
//$this->load->library('upload');
$img = array();
$no_of_images = count($_FILES['prod_img']['name']);
if($no_of_images > 10)
{
$data = array('response' =>"error", 'message'=>"10 Images allowed only");
}
else
{
for($i = 0; $i < $no_of_images; $i++)
{
$_FILES['img_file']['name'] = $_FILES['prod_img']['name'][$i];
$_FILES['img_file']['type'] = $_FILES['prod_img']['type'][$i];
$_FILES['img_file']['tmp_name'] = $_FILES['prod_img']['tmp_name'][$i];
$_FILES['img_file']['error'] = $_FILES['prod_img']['error'][$i];
$_FILES['img_file']['size'] = $_FILES['prod_img']['size'][$i];
$config['upload_path'] = "./ProductImages/";
$config['allowed_types'] = "jpg|jpeg|png";
$this->load->library('upload', $config);
$this->upload->initialize($config);
if($this->upload->do_upload('img_file'))
{
$img_data = $this->upload->data();
$img[] = $img_data['file_name'];
}
}
if(count($img) > 0){
$data['prod_img'] = json_encode($img);
}
if(!empty($data))
{
$data = $this->input->post();
if($this->adm->InsertProduct($data))
{
$data = array('response'=>"success", 'message'=>"Data updated
successfully");
}
else
{
$data = array('response'=> "error", 'message'=> "failed");
}
}
}
}
echo json_encode($data);
}
}
public function InsertProduct($data)
{
return $this->db->insert('product',$data);
}