PHP file upload - Dynamically Add Remove input fields using JQuery and PHP.
Paste in View
<style>
.file {
visibility: hidden;
position: absolute;
}
.btn.btn-primary {
background-color: #007bff;
border-color: #007bff;
outline: none;
color: #fff;
}
.multi-cus-filed{
position:relative;
}
.remove-cus-filed {
background: #007bff;
border-radius: 200%;
padding: 4px 13px;
border: none;
color: white;
font-size: 19px;
position: absolute;
top: 32px;
right: -40px;
}
.multi-cus-filed{
position:relative;
}
.remove-cus-filed {
background: #007bff;
border-radius: 200%;
padding: 4px 13px;
border: none;
color: white;
font-size: 19px;
position: absolute;
top: 32px;
right: -40px;
}
</style>
<form role="form" action="" method="POST" enctype="multipart/form-data">
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field multi-cus-filed">
<label for="ReportName">Name</label>
<input type="text" class="form-control " name="title[]" placeholder="Enter Report name" >
</div>
</div>
</div>
<label for="ReportFile">File</label>
<input type="file" name="report[]" class="file">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-paperclip"></i></span>
</div>
<input type="text" class="form-control" disabled placeholder="Upload File" aria-label="Upload File" aria-describedby="basic-addon1">
<div class="input-group-append">
<label class="browse input-group-text btn btn-primary" id="basic-addon2"><i class="fas fa-search"></i> Choose</label>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="remove-field remove-cus-filed">X</button>
</div>
</div>
<button type="button" class="add-field btn btn-primary">Add field</button>
<button type="submit" name="uploadreport" value="uploadreport" class="btn btn-outline-primary">Submit</button>
</div>
</form>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
$(document).on("click", ".browse", function() {
var file = $(this)
.parent()
.parent()
.parent()
.find(".file");
file.trigger("click");
});
$(document).on("change", ".file", function() {
$(this)
.parent()
.find(".form-control")
.val(
$(this)
.val()
.replace(/C:\\fakepath\\/i, "")
);
});
</script>
<script>
$(function () {
bsCustomFileInput.init();
});
</script>
Paste in Controller
<?php
$user_id = $this->session->userdata('user_id');
$doc_patients = $this->User_Model->get_single_appointments($appointment_id);
$Patient_id = $doc_patients[0]->uid;
//$json_arr = json_decode($Patient_his_titles, true);
//print_r($json_arr);
// die();
if($this->input->post('uploadreport')=='uploadreport' || $this->input->post('uploadprescription')=='uploadprescription' ){
$report_type = 'testreport';
$title = $this->input->post('title');
$files = $_FILES['report']['name'];
$total_reports = count($files);
$file = array();
$upload_name = array();
$report_title = array();
for($i=0; $i<$total_reports; $i++){
//echo $i.'jassi <br>';
$report_name = $title[$i];
$file_name = $_FILES['report']['name'][$i];
if(!empty($file_name) || !empty($report_name)){
$_FILES['file']['name'] = $_FILES['report']['name'][$i];
$_FILES['file']['type'] = $_FILES['report']['type'][$i];
$_FILES['file']['tmp_name'] = $_FILES['report']['tmp_name'][$i];
$_FILES['file']['error'] = $_FILES['report']['error'][$i];
$_FILES['file']['size'] = $_FILES['report']['size'][$i];
$config['upload_path'] = 'assets/new-template/patient-reports';
//$config['allowed_types'] = '*';
$config['allowed_types'] = 'docx|doc|DOC|DOCX|rtf|pdf|gif|jpg|png|jpeg';
//$config['max_width'] = 128;
//$config['max_height'] = 128;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('file'))
{
$error = $this->upload->display_errors();
}
else
{
$data = array('upload_data' => $this->upload->data());
$upload_name[] = $this->upload->data('file_name');
$report_title[] = $report_name;
}
}
}
$title = $report_title;
$files = $upload_name;
if($total_reports==$i){
$patient_history = $this->User_Model->patient_reports($appointment_id,$user_id,$report_type);
if(count($patient_history)>0){
$Patient_his_id = $patient_history[0]->id;
$Patient_his_titles = $patient_history[0]->title;
$Patient_his_reports = $patient_history[0]->doc;
$oldtitle = json_decode($Patient_his_titles,true);
$oldreport = json_decode($Patient_his_reports,true);
$titleresult = array_merge($title, $oldtitle);
$filesresult = array_merge($files, $oldreport);
$newtitle = json_encode($titleresult);
$newreport = json_encode($filesresult);
$data = array(
'title' => $newtitle,
'doc' => $newreport
);
$update = $this->User_Model->update_patient_report($data,$Patient_his_id);
}
else{
$titles = json_encode($title);
$reports = json_encode($files);
$data = array(
'appointment_id' => $appointment_id,
'doc_id' => $user_id,
'Patient_id' => $Patient_id,
'title' => $titles,
'doc' => $reports,
'type' => $report_type,
'status' => 1
);
$update = $this->User_Model->insert_patient_report($data);
}
if($this->db->affected_rows()){
$this->session->set_flashdata('success', 'The report has been updated successfully.');
header('Location: ' . $_SERVER['HTTP_REFERER']);
}
}
//die();
}
?>
In Model
Create function according to you.
