- Added DocumentController for handling document uploads and management. - Created Document model with necessary attributes and relationships. - Implemented DocumentService for business logic related to documents. - Set up routes for document management in both web and API contexts. - Developed views for document upload using Dropzone for file handling. - Included necessary assets and styles for the Document module. - Created migration for documents table with appropriate fields. - Added configuration and service provider for the Document module.
89 lines
3.6 KiB
PHP
89 lines
3.6 KiB
PHP
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<form method="POST" action="{{ route('documents.dropzone.upload') }}" class="dropzone" id="mainForm"
|
|
enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<div class="mb-3">
|
|
{{ html()->label('Title')->for('title') }}
|
|
{{ html()->span('*')->class('text-danger') }}
|
|
{{ html()->text('title')->id('docTitle')->class('form-control')->placeholder('Enter Title')->required() }}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ html()->label('Select Model')->class('form-label')->for('model') }}
|
|
{{ html()->span('*')->class('text-danger') }}
|
|
{{ html()->select('model')->id('modelSelect')->class('form-select')->required()->options(['' => '-- Select --'] + $modelOptions->toArray()) }}
|
|
</div>
|
|
|
|
<div class="dropzone-previews mb-3"></div>
|
|
|
|
<div class="dz-message mb-3">
|
|
<p class="fs-14">Drop files here or click to upload.</p>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary" id="submitAll">Submit</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@push('js')
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
Dropzone.autoDiscover = false;
|
|
|
|
const myDropzone = new Dropzone("#mainForm", {
|
|
url: "{{ route('documents.dropzone.upload') }}",
|
|
autoProcessQueue: false,
|
|
uploadMultiple: true,
|
|
parallelUploads: 5,
|
|
maxFilesize: 5,
|
|
addRemoveLinks: true,
|
|
acceptedFiles: ".pdf,.doc,.docx,.jpg,.png",
|
|
paramName: "file[]",
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
|
|
},
|
|
init: function() {
|
|
const dz = this;
|
|
|
|
document.getElementById("submitAll").addEventListener("click", function(e) {
|
|
const title = document.getElementById('docTitle').value;
|
|
const model = document.getElementById('modelSelect').value;
|
|
|
|
if (!title || !model) {
|
|
alert("Please fill in both Title and Model.");
|
|
return;
|
|
}
|
|
|
|
if (dz.getQueuedFiles().length > 0) {
|
|
dz.processQueue();
|
|
} else {
|
|
alert("Please select at least one file.");
|
|
}
|
|
});
|
|
|
|
dz.on("sending", function(file, xhr, formData) {
|
|
formData.append("title", document.getElementById('docTitle').value);
|
|
formData.append("model", document.getElementById('modelSelect').value);
|
|
});
|
|
|
|
dz.on("successmultiple", function(files, response) {
|
|
alert("Files uploaded successfully.");
|
|
dz.removeAllFiles();
|
|
document.getElementById('mainForm').reset();
|
|
});
|
|
|
|
dz.on("errormultiple", function(files, response) {
|
|
alert("An error occurred during upload.");
|
|
console.error(response);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|