feat: Implement Document Module with Dropzone file upload functionality
- 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.
This commit is contained in:
88
Modules/Document/resources/views/document/form.blade.php
Normal file
88
Modules/Document/resources/views/document/form.blade.php
Normal file
@@ -0,0 +1,88 @@
|
||||
<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
|
||||
50
Modules/Document/resources/views/document/index.blade.php
Normal file
50
Modules/Document/resources/views/document/index.blade.php
Normal file
@@ -0,0 +1,50 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<x-dashboard.breadcumb :title="$title" />
|
||||
@if ($errors->any())
|
||||
<x-flash-message type="danger" :messages="$errors->all()" />
|
||||
@endif
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-xl-6">
|
||||
<div class="card profile-card">
|
||||
@include('document::document.form')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- <div class="col-lg-xl-8 col-lg-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@php
|
||||
$columns = [
|
||||
[
|
||||
'title' => '<input type="checkbox" id="select-all">',
|
||||
'data' => 'checkbox',
|
||||
'name' => 'checkbox',
|
||||
'orderable' => false,
|
||||
'searchable' => false,
|
||||
'printable' => false,
|
||||
'exportable' => false,
|
||||
],
|
||||
['title' => 'Document', 'data' => 'name', 'name' => 'name'],
|
||||
['title' => 'Type', 'data' => 'type', 'name' => 'type'],
|
||||
['title' => 'Size', 'data' => 'size', 'name' => 'size'],
|
||||
['title' => 'Upload Date', 'data' => 'created_at', 'name' => 'created_at'],
|
||||
[
|
||||
'title' => 'Action',
|
||||
'data' => 'action',
|
||||
'orderable' => false,
|
||||
'searchable' => false,
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<x-data-table-script :route="route('gallery.index')" :reorder="route('gallery.reorder')" :columns="$columns" />
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user