This is my modal
<div id="fileModal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">{{trans('core.adddata')}}</h4>
</div>
<div class="modal-body" id="info">
{{-- Add name Field --}}
<div class="form-group">
<label for="name">{{trans('core.name')}}</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
</div>
{{-- Add file Field --}}
<div class="form-group">
<label for="file">{{trans('core.file')}}</label>
<!-- <input type="file" class="form-control" id="file" name="file" require> -->
<input type="file" class="form-control" id="file" name="file">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" id="cancelfileBtn">{{trans('core.btnCancel')}}</button>
<button type="button" data-dismiss="modal" class="btn blue" id="saveFiledata">{{trans('core.btnSave')}}</button>
</div>
</div>
</div>
</div>
This is my js code
function saveFiledata() {
try {
// Open the modal
$('#fileModal').modal('show');
// Clear previous error messages
$('.validation-error').remove();
// Attach a click event handler to the "Save" button
$('#saveFiledata').off().on('click', function (e) {
// Validate fields before making the AJAX request
e.preventDefault();
var name = $('#name').val();
var fileInput = $('#file');
// console.log('Before AJAX - name:', fileInput);
// Check if files property exists and has a length greater than 0
var fileName = fileInput.val();
// Log the files directly
console.log('Before AJAX - name:', name);
console.log('Before AJAX - files:', fileInput[0].files);
// Clear validation errors
$('.validation-error').remove();
// Validate quantity
if (!name) {
console.log('Name validation error - Name is required');
$('#name').after('<span style="color:red;" class="validation-error">Name field is required *</span>');
}
// Validate file
if (!fileName) {
console.log('File validation error - File is required');
$('#fileModal #file').after('<span style="color:red;" class="validation-error">File is required *</span>');
} else {
// Additional file type validation
var allowedExtensions = /.(jpeg|jpg|png|pdf|doc|docx|xls|xlsx)$/i;
fileName = fileInput[0].files[0].name;
if (!allowedExtensions.test(fileName)) {
console.log('File validation error - Invalid file type');
$('#fileModal #file').after('<span style="color:red;" class="validation-error">Invalid file type. Allowed types: jpeg, jpg, png, pdf, doc, docx, xls, xlsx *</span>');
}
}
// Check if any validation errors exist
if ($('.validation-error').length > 0) {
return;
}
console.log('File Name:', fileName);
console.log('Validation passed. Proceeding with AJAX request...');
// Make an AJAX request here
var url = "{{ route('admin.ajax_component_file_data') }}"; // Replace 'your.ajax.route' with your actual route name
var token = "{{ csrf_token() }}";
$.ajax({
type: 'POST',
url: url,
data: {
'_token': token,
'name': name,
'file': fileName,
// Add other data as needed
},
success: function(response) {
// Handle the response as needed
console.log('AJAX request successful:', response);
if (response && response.status === 'success') {
// Clear individual form fields
$('#name').val('');
$('#file').val('');
// Close the modal after AJAX request success
$('#fileModal').modal('hide');
Swal.fire({
title: 'Data Saved Successful!',
text: 'Your Form data has been Saved successfully.',
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: 'OK',
// ... (additional Swal settings if needed)
}).then((result) => {
// ... (additional logic after successful checkout)
setTimeout(() => {
console.log('Form cleared successfully.');
location.reload();
}, 100);
});
} else if (response && response.status === 'error') {
// Handle the case where checkout is not allowed
// ... (additional logic for error handling)
} else {
// Handle other response cases
console.error('Unexpected response from server:', response);
// ... (additional logic for unexpected responses)
}
},
error: function(error) {
console.error('AJAX request error:', error);
// ... (additional logic for AJAX error handling)
}
});
});
// Attach a click event handler to the "Cancel" button
$('#fileModal').on('click', '#cancelfileBtn', function (e) {
// Clear validation errors
$('.validation-error').remove();
// Close the modal
$('#fileModal').modal('hide');
});
// Prevent the modal from closing if there are validation errors
$('#fileModal').on('hide.bs.modal', function (e) {
if ($('.validation-error').length > 0) {
e.preventDefault();
}
});
} catch (error) {
console.error('Error:', error);
}
}
im getting the undefined output in the console like this Before AJAX – name: swamy deshetty
1:1401 Before AJAX – files x : undefined
1:1414 File validation error – File is required how to solve this issue how to get the file data from the file input into the js please help me to complete this task!..