358 lines
12 KiB
PHP
358 lines
12 KiB
PHP
@extends('layouts.backendTemplate')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
#progressBar {
|
|
display: none;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
appearance: none;
|
|
}
|
|
|
|
.progress-bar::-webkit-progress-value {
|
|
background-color: #4CAF50;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.progress-text {
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|
|
<!--begin::Main-->
|
|
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
|
|
|
|
<div class="d-flex flex-column flex-column-fluid">
|
|
|
|
|
|
@include('uc.admin.breadcrumb', [
|
|
'title' => 'Video Add',
|
|
'pageName' => 'Add',
|
|
'pageParent' => 'Video Management',
|
|
'pageParentLink' => url('video'),
|
|
])
|
|
|
|
<div id="kt_app_content" class="app-content flex-column-fluid">
|
|
<div id="kt_app_content_container" class="app-container container-xxl">
|
|
|
|
|
|
|
|
<form id="frmAdd" class="form d-flex flex-column flex-lg-row" method="post"
|
|
enctype="multipart/form-data">
|
|
|
|
<input type="hidden" name="_method" value="POST">
|
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
|
|
|
|
|
<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
|
|
|
|
<div class="card card-flush py-4">
|
|
|
|
|
|
@if (Session::has('messageSuccess'))
|
|
<div class="card-body">
|
|
@include('uc/messageSuccess')
|
|
</div>
|
|
@endif
|
|
|
|
@if (Session::has('messageFail'))
|
|
<div class="card-body">
|
|
@include('uc/messageFail')
|
|
</div>
|
|
@endif
|
|
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<h2>Overview</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body pt-0">
|
|
|
|
<div class="mb-10">
|
|
<label class="form-label required">File Video</label>
|
|
|
|
<input class="fileInput file-input" type="file" id="fileInput" name="fileInput"
|
|
multiple accept=".MP4, .MOV">
|
|
|
|
<progress id="progressBar" class="progress-bar" value="0"
|
|
max="100"></progress>
|
|
<div id="progressText" class="progress-text">0%</div>
|
|
|
|
<div class="text-muted fs-7">Allowed Types .MP4, .MOV</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
|
|
<a href="{{ url('video') }}" id="kt_ecommerce_add_product_cancel"
|
|
class="btn btn-light me-5">Cancel</a>
|
|
|
|
<button type="button" id="btn_submit" class="btn btn-primary">
|
|
<span class="indicator-label">Save</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
@stop
|
|
|
|
|
|
@section('script')
|
|
|
|
<script>
|
|
const baseApiUrl = "{{ env('API_URL') }}";
|
|
|
|
|
|
$(document).on("click", "#btn_submit", async function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
alertLoading("Loading")
|
|
|
|
await uploadFile();
|
|
|
|
});
|
|
|
|
|
|
// Step 1
|
|
async function uploadFile() {
|
|
|
|
const fileInput = document.getElementById("fileInput");
|
|
|
|
const progressBar = document.getElementById("progressBar");
|
|
const progressText = document.getElementById("progressText");
|
|
|
|
if (!fileInput || fileInput.files.length === 0) {
|
|
alertFail("Notice", "Please select one or more files.");
|
|
hideLoading();
|
|
return;
|
|
}
|
|
const files = Array.from(fileInput.files); // Get all selected files
|
|
|
|
$("#progressBar").show();
|
|
|
|
// Upload all files sequentially (or use Promise.all for parallel uploads)
|
|
for (const file of files) {
|
|
await uploadSingleFile(file, progressBar, progressText);
|
|
}
|
|
alertSuccessWithUrl("Notice", "All files uploaded successfully", "{{ url('video') }}");
|
|
|
|
}
|
|
|
|
async function uploadSingleFile(file, progressBar, progressText) {
|
|
const uploadId = await initiateMultipartUpload(file.name);
|
|
const partSize = 500 * 1024 * 1024; // 500 MB per part
|
|
const parts = [];
|
|
let uploadedSize = 0;
|
|
|
|
const uploadPromises = Array.from({
|
|
length: Math.ceil(file.size / partSize)
|
|
},
|
|
(_, index) => {
|
|
const partNumber = index + 1;
|
|
const chunk = file.slice(index * partSize, (index + 1) * partSize);
|
|
|
|
return (async () => {
|
|
const presignedUrl = await getPresignedUrl(uploadId, partNumber, file.name);
|
|
const etag = await uploadPartToS3(presignedUrl, chunk);
|
|
|
|
parts.push({
|
|
PartNumber: partNumber,
|
|
ETag: etag
|
|
});
|
|
|
|
uploadedSize += chunk.size;
|
|
const finalPercent = Math.floor((uploadedSize / file.size) * 100);
|
|
await animateProgress(progressBar, progressText, finalPercent);
|
|
})();
|
|
}
|
|
);
|
|
|
|
await Promise.all(uploadPromises);
|
|
await completeMultipartUpload(uploadId, parts, file.name);
|
|
await saveFileNameToDB(file.name);
|
|
}
|
|
|
|
// Step 2
|
|
async function initiateMultipartUpload(fileName) {
|
|
const urlUploadImage = `${baseApiUrl}/initiate-multipart-upload`;
|
|
const response = await fetch(
|
|
urlUploadImage, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
fileName
|
|
}),
|
|
}
|
|
);
|
|
|
|
const {
|
|
uploadId
|
|
} = await response.json();
|
|
|
|
return uploadId;
|
|
}
|
|
|
|
// Step 3
|
|
async function getPresignedUrl(uploadId, partNumber, fileName) {
|
|
|
|
const urlPresigned = `${baseApiUrl}/get-presigned-url`
|
|
const response = await fetch(
|
|
urlPresigned, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
uploadId,
|
|
partNumber,
|
|
fileName
|
|
}),
|
|
}
|
|
);
|
|
const {
|
|
url
|
|
} = await response.json();
|
|
return url;
|
|
}
|
|
|
|
// Step 4
|
|
async function uploadPartToS3(url, chunk) {
|
|
const response = await fetch(url, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/octet-stream",
|
|
},
|
|
body: chunk,
|
|
});
|
|
if (!response.ok) {
|
|
alertFail("Notice", "Failed to upload part")
|
|
hideLoading();
|
|
//throw new Error("Failed to upload part");
|
|
}
|
|
|
|
const etag = `${response.headers.get("ETag")}`.replace(/"/g, "");
|
|
|
|
if (!etag) {
|
|
throw new Error("Failed to retrieve ETag from the response.");
|
|
}
|
|
|
|
return etag;
|
|
}
|
|
|
|
// Step 5
|
|
async function completeMultipartUpload(uploadId, parts, fileName) {
|
|
const urlUploadComplete = `${baseApiUrl}/complete-multipart-upload`;
|
|
const response = await fetch(urlUploadComplete, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
uploadId,
|
|
parts,
|
|
fileName
|
|
}),
|
|
});
|
|
if (response.ok) {
|
|
//window.location.href = "{{ url('image') }}";
|
|
} else {
|
|
alertFail("Notice", "Failed to upload part");
|
|
hideLoading();
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Smoothly animates the progress bar and percentage text.
|
|
*/
|
|
async function animateProgress(progressBar, progressText, targetPercent) {
|
|
const currentPercent = parseInt(progressBar.value) || 0;
|
|
// Increment the percentage smoothly
|
|
for (let percent = currentPercent + 1; percent <= targetPercent; percent++) {
|
|
progressBar.value = percent;
|
|
progressText.textContent = `${percent}%`;
|
|
|
|
// Add a small delay to make the increment visible (10ms delay)
|
|
await new Promise((resolve) => setTimeout(resolve, 10));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sends the uploaded file name to the server using AJAX.
|
|
*/
|
|
function saveFileNameToDB(fileName) {
|
|
initAjaxSetupToken();
|
|
|
|
const folderId = "{{ $folderIdView }}";
|
|
const url = "{{ url('') }}";
|
|
|
|
return $.ajax({
|
|
url: `${url}/video/insert`,
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
fileName,
|
|
folderId
|
|
}),
|
|
success: (response) => {
|
|
console.log('File name saved:', response);
|
|
},
|
|
error: (err) => {
|
|
console.error('Error saving file name:', err);
|
|
alertFail("Notice", "There was an error saving the file name.");
|
|
hideLoading();
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
$('.file-input').fileuploader({
|
|
extensions: ['MP4', 'mp4', 'MOV', 'mov'],
|
|
limit: null,
|
|
fileMaxSize: null,
|
|
changeInput: '<div class="fileuploader-input">' +
|
|
'<div class="fileuploader-input-inner">' +
|
|
'<p><i class="fileuploader-icon-main"></i></p>' +
|
|
'<h6>Drag and drop files here</h6>' +
|
|
'<p>or</p>' +
|
|
'<br>' +
|
|
'<button type="button" class="fileuploader-input-button"><span>${captions.button}</span></button>' +
|
|
'</div>' +
|
|
'</div>',
|
|
theme: 'dragdrop',
|
|
});
|
|
</script>
|
|
|
|
@endsection
|