187 lines
10 KiB
PHP
187 lines
10 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Radio';
|
|
$subTitle = 'Components / Radio';
|
|
$script = '<script>
|
|
// =============================== Upload Single Image js start here ================================================
|
|
const fileInput = document.getElementById("upload-file");
|
|
const imagePreview = document.getElementById("uploaded-img__preview");
|
|
const uploadedImgContainer = document.querySelector(".uploaded-img");
|
|
const removeButton = document.querySelector(".uploaded-img__remove");
|
|
|
|
fileInput.addEventListener("change", (e) => {
|
|
if (e.target.files.length) {
|
|
const src = URL.createObjectURL(e.target.files[0]);
|
|
imagePreview.src = src;
|
|
uploadedImgContainer.classList.remove("d-none");
|
|
}
|
|
});
|
|
removeButton.addEventListener("click", () => {
|
|
imagePreview.src = "";
|
|
uploadedImgContainer.classList.add("d-none");
|
|
fileInput.value = "";
|
|
});
|
|
// =============================== Upload Single Image js End here ================================================
|
|
|
|
// ================================================ Upload Multiple image js Start here ================================================
|
|
const fileInputMultiple = document.getElementById("upload-file-multiple");
|
|
const uploadedImgsContainer = document.querySelector(".uploaded-imgs-container");
|
|
|
|
fileInputMultiple.addEventListener("change", (e) => {
|
|
const files = e.target.files;
|
|
|
|
Array.from(files).forEach(file => {
|
|
const src = URL.createObjectURL(file);
|
|
|
|
const imgContainer = document.createElement("div");
|
|
imgContainer.classList.add("position-relative", "h-120-px", "w-120-px", "border", "input-form-light", "radius-8", "overflow-hidden", "border-dashed", "bg-neutral-50");
|
|
|
|
const removeButton = document.createElement("button");
|
|
removeButton.type = "button";
|
|
removeButton.classList.add("uploaded-img__remove", "position-absolute", "top-0", "end-0", "z-1", "text-2xxl", "line-height-1", "me-8", "mt-8", "d-flex");
|
|
removeButton.innerHTML = "<iconify-icon icon=\'radix-icons:cross-2\' class=\'text-xl text-danger-600\'></iconify-icon>";
|
|
|
|
const imagePreview = document.createElement("img");
|
|
imagePreview.classList.add("w-100", "h-100", "object-fit-cover");
|
|
imagePreview.src = src;
|
|
|
|
imgContainer.appendChild(removeButton);
|
|
imgContainer.appendChild(imagePreview);
|
|
uploadedImgsContainer.appendChild(imgContainer);
|
|
|
|
removeButton.addEventListener("click", () => {
|
|
URL.revokeObjectURL(src);
|
|
imgContainer.remove();
|
|
});
|
|
});
|
|
|
|
// Clear the file input so the same file(s) can be uploaded again if needed
|
|
fileInputMultiple.value = "";
|
|
});
|
|
// ================================================ Upload Multiple image js End here ================================================
|
|
|
|
// ================================================ Upload image & show it\'s name js start ================================================
|
|
document.getElementById("file-upload-name").addEventListener("change", function(event) {
|
|
var fileInput = event.target;
|
|
var fileList = fileInput.files;
|
|
var ul = document.getElementById("uploaded-img-names");
|
|
|
|
// Add show-uploaded-img-name class to the ul element if not already added
|
|
ul.classList.add("show-uploaded-img-name");
|
|
|
|
// Append each uploaded file name as a list item with Font Awesome and Iconify icons
|
|
for (var i = 0; i < fileList.length; i++) {
|
|
var li = document.createElement("li");
|
|
li.classList.add("uploaded-image-name-list", "text-primary-600", "fw-semibold", "d-flex", "align-items-center", "gap-2");
|
|
|
|
// Create the Link Iconify icon element
|
|
var iconifyIcon = document.createElement("iconify-icon");
|
|
iconifyIcon.setAttribute("icon", "ph:link-break-light");
|
|
iconifyIcon.classList.add("text-xl", "text-secondary-light");
|
|
|
|
// Create the Cross Iconify icon element
|
|
var crossIconifyIcon = document.createElement("iconify-icon");
|
|
crossIconifyIcon.setAttribute("icon", "radix-icons:cross-2");
|
|
crossIconifyIcon.classList.add("remove-image", "text-xl", "text-secondary-light", "text-hover-danger-600");
|
|
|
|
// Add event listener to remove the image on click
|
|
crossIconifyIcon.addEventListener("click", (function(liToRemove) {
|
|
return function() {
|
|
ul.removeChild(liToRemove); // Remove the corresponding list item
|
|
};
|
|
})(li)); // Pass the current list item as a parameter to the closure
|
|
|
|
// Append both icons to the list item
|
|
li.appendChild(iconifyIcon);
|
|
|
|
// Append the file name text to the list item
|
|
li.appendChild(document.createTextNode(" " + fileList[i].name));
|
|
|
|
li.appendChild(crossIconifyIcon);
|
|
|
|
// Append the list item to the unordered list
|
|
ul.appendChild(li);
|
|
}
|
|
});
|
|
// ================================================ Upload image & show it\'s name js end ================================================
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Basic Upload</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<label for="basic-upload" class="border border-primary-600 fw-medium text-primary-600 px-16 py-12 radius-12 d-inline-flex align-items-center gap-2 bg-hover-primary-50">
|
|
<iconify-icon icon="solar:upload-linear" class="text-xl"></iconify-icon>
|
|
Click to upload
|
|
</label>
|
|
<input type="file" class="form-control w-auto mt-24 form-control-lg" id="basic-upload">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Image Upload</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="upload-image-wrapper d-flex align-items-center gap-3">
|
|
<div class="uploaded-img d-none position-relative h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50">
|
|
<button type="button" class="uploaded-img__remove position-absolute top-0 end-0 z-1 text-2xxl line-height-1 me-8 mt-8 d-flex">
|
|
<iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>
|
|
</button>
|
|
<img id="uploaded-img__preview" class="w-100 h-100 object-fit-cover" src="{{ asset('assets/images/user.png') }}" alt="image">
|
|
</div>
|
|
|
|
<label class="upload-file h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file">
|
|
<iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
|
|
<span class="fw-semibold text-secondary-light">Upload</span>
|
|
<input id="upload-file" type="file" hidden>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Upload With image preview</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
|
|
<div class="upload-image-wrapper d-flex align-items-center gap-3 flex-wrap">
|
|
<div class="uploaded-imgs-container d-flex gap-3 flex-wrap"></div>
|
|
|
|
<label class="upload-file-multiple h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file-multiple">
|
|
<iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
|
|
<span class="fw-semibold text-secondary-light">Upload</span>
|
|
<input id="upload-file-multiple" type="file" hidden multiple>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Upload With image preview</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<label for="file-upload-name" class="mb-16 border border-neutral-600 fw-medium text-secondary-light px-16 py-12 radius-12 d-inline-flex align-items-center gap-2 bg-hover-neutral-200">
|
|
<iconify-icon icon="solar:upload-linear" class="text-xl"></iconify-icon>
|
|
Click to upload
|
|
<input type="file" class="form-control w-auto mt-24 form-control-lg" id="file-upload-name" multiple hidden>
|
|
</label>
|
|
<ul id="uploaded-img-names" class=""></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |