Create remove and add more inputs functionality with input type file and text in Laravel
Blade file code <form action="{{ route('storeDocuments') }}" method="post" enctype="multipart/form-data">
@csrf
<div id="inputFields">
@if(!empty($documents[0]))
@php $counter = 1000; @endphp
@foreach($documents as $document)
<input type="hidden" id="document_id" name="documents[{{$counter}}][document_id]" value="{{$document->id}}">
<div class="field">
<label for="title">Title:</label>
<input type="text" id="title" class="title_input" name="documents[{{$counter}}][title]" value="{{$document->title}}" required>
<label for="description">Description:</label>
<textarea id="description" class="description_input" name="documents[{{$counter}}][description]">{{$document->description}}</textarea>
<label for="file">File:</label>
@if(!empty($document->file_path))
<a href="{{$document->file_path}}" class="doc_file">Download</a>
@endif
<input type="file" id="file" class="file_input" name="documents[{{$counter}}][file]" required>
<button class="remove">Remove</button>
</div>
@php $counter++ @endphp
@endforeach
@endif
<div class="field">
<label for="title">Title:</label>
<input type="text" id="title" class="title_input" name="documents[0][title]" required>
<label for="description">Description:</label>
<textarea id="description" class="description_input" name="documents[0][description]"></textarea>
<label for="file">File:</label>
<input type="file" id="file" class="file_input" name="documents[0][file]" required>
<button class="remove">Remove</button>
</div>
</div>
<button id="addButton">Add More</button>
<div class="col-sm-12">
<div class="form-group mt-3">
<div class="form-group submit">
<div class="form-submit">
<input type="submit" value="Submit" class="btn btn-success btn-lg" />
</div>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
function removeButton(){
var removeButtons = $(".remove");
if (removeButtons.length == 1) {
removeButtons.hide();
}
else{
removeButtons.show();
}
console.log(removeButtons.length);
}
removeButton();
$(".field").find('.remove').click(function() {
$(this).parent().remove();
removeButton();
});
let documentIndex = 1; // Initialize the document index
$('#addButton').click(function(e) {
documentIndex++;
e.preventDefault();
var newField = $('.field:last').clone();
newField.find('.title_input').attr('name', 'documents[' + documentIndex + '][title]');
newField.find('.description_input').attr('name', 'documents[' + documentIndex + '][description]');
newField.find('.file_input').attr('name', 'documents[' + documentIndex + '][file]');
newField.find('input').val('');
newField.find('textarea').val('');
$('#inputFields').append(newField);
removeButton();
// Add event listener for remove button
newField.find('.remove').click(function() {
$(this).parent().remove();
removeButton();
});
});
});
</script>
Controller file
public function store(Request $request,BaseHttpResponse $response)
{
$customer = auth('customer')->user();
if(!empty($request->documents)){
$documents = $request->documents;
$insert_data = [];
foreach($documents as $document){
if(empty($document["title"]) && empty($document["description"]) && empty($document["file"])){
continue;
}
if(!empty($document["file"])){
// Accessing uploaded file from the request
$uploadedFile = $document["file"];
// Check if a file was uploaded
if ($uploadedFile && $uploadedFile->isValid()) {
// Get the original file name
$originalFileName = $uploadedFile->getClientOriginalName();
// Generate a unique filename
$uniqueFileName = pathinfo($originalFileName, PATHINFO_FILENAME) . '_' . time() . '.' . $uploadedFile->getClientOriginalExtension();
// Store the file in the storage disk with a unique filename
$storagePath = "documents" . "/" . $uniqueFileName;
$filePath = Storage::disk('uploads')->putFileAs('documents', $uploadedFile, $uniqueFileName);
$insert_data["file_path"] = $storagePath;
}
}
if(!empty($document["title"])){
$insert_data["title"] = $document["title"];
}
if(!empty($document["description"])){
$insert_data["description"] = $document["description"];
}
if(!empty($document["document_id"])){
$document_id = $document["document_id"];
$document = Document::find($document_id)->update($insert_data);
}
else{
$document = Document::create($insert_data);
}
}
}
$message = '';
if(!empty($document->id)){
$message = 'Documents data has been uploaded successfully';
}
return $response
->setNextUrl(url()->previous())
->setMessage(__($message));
}
