single file upload page

b5
dev sp 2024-02-15 15:53:27 +00:00
parent 74973dfc1e
commit abb1200c95
9 changed files with 459 additions and 47 deletions

103
src/components/AddFile.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div class="my-10">
<section class="container mx-auto px-4 max-w-2xl shadow-lg rounded-xl p-6">
<p class="text-2xl py-4">Edit News</p>
<form id="formID">
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
<label for="file">Choose a file:</label>
<input @change="saveFile" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
</form>
<form action="">
<div>
<input :value="data.file_url" type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
</div>
</form>
</section>
</div>
</template>
<script>
export default {
data() {
return {
slugURLbn: "",
fullURL: "",
spliturl: "",
bartaData: {}, // Initialize bartaData as an object
bnData: {},
data:{},
};
},
mounted() {
// this.getBarta();
let fullURL = window.location.href.split("/")[5].split('?add=')[1];
console.log(fullURL)
},
methods: {
saveFile(event) {
event.preventDefault();
let formData = new FormData();
// Append the selected file to the FormData object
formData.append('file', event.target.files[0]);
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`, {
method: 'POST',
body: formData,
})
.then(data => data.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
},
// getBarta() {
// let currentUrl = window.location.href;
// console.log('full url', currentUrl)
// let langValue = currentUrl.split("/")[5].split('?add=')[1];
// console.log( langValue);
// let formData = new FormData();
// formData.append('slug', langValue);
// fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/`, {
// method: 'POST',
// body: formData,
// })
// .then(response => response.json())
// .then(data => {
// // Assign fetched data to bartaData property
// // console.log(data)
// this.bartaData = data;
// console.log(this.bartaData)
// })
// .catch(error => {
// // console.log('An error occurred', error);
// });
// },
// getBartaBN() {
// let currentUrl = window.location.href;
// let spliturl = currentUrl.split("/")[3].split("edit=")[1];
// // console.log(spliturl);
// let formData = new FormData();
// formData.append('slug', spliturl);
// fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/?action=news_bn`, {
// method: 'POST',
// body: formData,
// })
// .then(response => response.json())
// .then(data => {
// // Assign fetched data to bartaData property
// // console.log(data)
// this.bnData = data;
// console.log(this.bnData)
// })
// .catch(error => {
// // console.log('An error occurred', error);
// });
// },
},
};
</script>

View File

@ -5,6 +5,7 @@
<div class="flex flex-row ">
<a class="p-4" href="/editor/add-news">Add News</a>
<a class="p-4" href="/editor/edit-news">Edit News</a>
<a class="p-4" href="/editor/add-file-list">Add Image</a>
</div>
<!-- <a href="/editor/add-news">Add News</a>
<a href="/editor/add-news">Add News</a> -->

View File

@ -0,0 +1,109 @@
---
import Layout from "../../layouts/Layout.astro";
import AdminHeader from "../../components/AdminHeader.astro";
---
<Layout title="Upload File | Barta-India">
<AdminHeader />
<main>
<div>
<section class="container mx-auto px-4">
<div>
<table class="border-2">
<thead>
<tr class="text-center">
<th>ID</th>
<th>Status</th>
<th>Image</th>
</tr>
</thead>
<tbody class="border-2" id="statusTableBody"></tbody>
</table>
</div>
</section>
</div>
<div class="container mx-auto px-4 flex flex-col space-y-4">
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUploadToSpApi" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form> -->
<!-- <h1>Upload File</h1> -->
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" /> <br>
<input type="submit" value="Upload">
</form> -->
<!-- <form id="formID">
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
<label for="file">Choose a file:</label>
<input type="file" name="fileToUploadToSpApi" id="fileToUpload" required>
<br>
<input onclick="noImageNews();" type="submit" value="Upload">
</form> -->
</div>
<!-- <button onclick="noImageNews();">onclick="noImageNews();"</button> -->
</main>
</Layout>
<script is:inline>
window.onload = function noImageNews() {
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file/`)
.then(data => data.json())
.then(data => {
let tableBody = document.getElementById('statusTableBody');
data.forEach(function(singleData) {
let row = tableBody.insertRow();
let cellId = row.insertCell(0);
cellId.innerHTML = singleData.id;
let cellStatus = row.insertCell(1);
cellStatus.innerHTML = singleData.slug;
let cellEdit = row.insertCell(2);
let addButton = document.createElement('a');
addButton.innerText = 'Add';
addButton.style.color = 'blue';
addButton.href = `/editor/add-file/?add=${singleData.slug}`
addButton.addEventListener('click', function() {
// Add your edit functionality here
// console.log('Editing ID:', singleData.id);
});
cellEdit.appendChild(addButton);
});
console.log(data);
})
.catch(error => {
console.error('An error occurred', error); // Typo was here: 'console.erroe'
});
};
// noImageNews = window.onload;
function saveFile(event){
event.preventDefault();
let formID = document.getElementById('formID');
let formData = new FormData(formID);
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
method: 'POST',
body: formData,
})
.then(data => data.json())
.then(data => {
if(data.error_code == 8050){
document.getElementById('errorMessage').innerHTML = data.error;
document.getElementById('errorMessage').style.display = 'block';
document.getElementById('errorMessage2').style.display = 'none';
}
if(data.error_code == 8051){
document.getElementById('errorMessage2').innerHTML = data.error;
document.getElementById('errorMessage2').style.display = 'block';
document.getElementById('errorMessage').style.display = 'none';
}
console.log(data)
})
.catch(error => {
console.error(error);
})
}
</script>

View File

@ -1,35 +1,62 @@
---
import Layout from "../../layouts/Layout.astro";
import AdminHeader from "../../components/AdminHeader.astro";
---
<Layout title="Upload File | Barta-India">
<Layout title="">
<main>
<div class="container mx-auto px-4 flex flex-col space-y-4">
<form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUploadToSpApi" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<h1>Upload File</h1>
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" /> <br>
<input type="submit" value="Upload">
</form> -->
<!-- <form id="formID">
<AdminHeader />
<div>
<!-- <AddFile client:visible /> -->
<section class="container mx-auto px-4 max-w-2xl shadow-2xl rounded-2xl mt-16">
<h3 class="text-2xl py-4">Add File</h3>
<form id="imageChoose" class="flex flex-col">
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
<label for="file">Choose a file:</label>
<input type="file" name="file" id="file" required>
<input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload" />
<br>
<input onclick="saveFile(event);" type="submit" value="Upload">
</form> -->
<!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
</form>
<form id="imageLink" style="display: none;" class="space-y-4">
<div class="flex flex-col">
<input type="text" name="slug" id="slug" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required />
</div>
<div class="flex flex-col">
<input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required />
</div>
<div>
<input onclick="submitNewsImage(event);" type="submit" value="Upload" class="bg-[#780a0a] px-4 py-2 rounded-lg text-white cursor-pointer" />
</div>
</form>
<div class="flex flex-col justify-center place-items-center p-6">
<img id="imgview" src="" alt="" class="rounded-xl" />
</div>
</section>
</div>
</main>
</Layout>
<!-- <script is:inline>
<script is:inline>
function imagePreview() {
let fileInput = document.getElementById('fileToUpload');
let file = fileInput.files[0];
let imgView = document.getElementById('imgview');
if (file) {
document.getElementById('imgview').style.display = 'block';
let imgUrl = URL.createObjectURL(file);
imgView.src = imgUrl;
} else {
imgView.src = "";
}
}
let slug = window.location.href.split('/')[5].split('?add=')[1];
// console.log(slug)
document.getElementById('slug').value = slug;
function saveFile(event){
event.preventDefault();
let formID = document.getElementById('formID');
let formData = new FormData(formID);
let imageChoose = document.getElementById('imageChoose');
let formData = new FormData(imageChoose);
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
method: 'POST',
body: formData,
@ -46,11 +73,36 @@ import Layout from "../../layouts/Layout.astro";
document.getElementById('errorMessage2').style.display = 'block';
document.getElementById('errorMessage').style.display = 'none';
}
if(data.file_url){
document.getElementById('fileLink').value = data.file_url;
document.getElementById('imageChoose').style.display = 'none';
document.getElementById('imageLink').style.display = 'block';
}
console.log(data)
})
.catch(error => {
console.error(error);
})
imagePreview();
}
</script> -->
function submitNewsImage(event) {
event.preventDefault();
let formElement = document.getElementById('imageLink'); // Replace 'yourFormId' with the actual ID of your form
let formData = new FormData(formElement); // Pass the form element
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file-add-file/`, {
method: 'POST',
body: formData,
})
.then(response => response.json()) // Convert response to text
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error occurred:', error);
});
}
</script>

View File

@ -36,19 +36,22 @@ import AdminHeader from "../../components/AdminHeader.astro";
<div class="flex flex-col">
<textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within 160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
</div>
<div class="flex flex-col" id="imgDIV">
<!-- <img class="w-[100px]" id="imgview" src="" alt="" style="display: none;"/>
<label for="file" class="cursor-pointer"><img src="/img/camera.svg" alt="add file | Barta-India"></label> -->
<input oninput="saveFile(event);" type="file" name="file" id="file" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">
<input style="display: none;" value="" type="text" name="img" id="img" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" />
</div>
<div>
<div class="flex flex-col">
<input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
</div>
<div>
<button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
</div>
<!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
</form>
<form id="formID">
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
<label for="file">Choose a file:</label>
<input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
<br>
<!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
</form>
</section>
<!-- border-2 border-[#780a0a] rounded-xl -->
<section class="bg-white rounded-full px-6 py-4" id="loadingSection" style="display: none;">
@ -64,10 +67,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
<script is:inline>
function saveFile(event){
event.preventDefault();
let formID = document.getElementById('newsPara');
let file = document.getElementById('file').file;
let formData = new FormData;
formData.append('file', file);
let formID = document.getElementById('formID');
let formData = new FormData(formID);
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
method: 'POST',
body: formData,
@ -84,14 +85,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
document.getElementById('errorMessage2').style.display = 'block';
document.getElementById('errorMessage').style.display = 'none';
}
document.getElementById('img').value = data.file_url;
if(data.file_url){
document.getElementById('img').style.display = 'block';
document.getElementById('file').style.display = 'none';
}else{
document.getElementById('img').style.display = 'none';
document.getElementById('file').style.display = 'block';
document.getElementById('fileLink').value = data.file_url;
}
console.log(data)
})

View File

@ -8,7 +8,6 @@ import AdminHeader from "../../components/AdminHeader.astro";
<main>
<div>
<EditNews client:visible />
</div>
</main>
<!-- </Layout>

94
src/pages/en/[id].astro Normal file
View File

@ -0,0 +1,94 @@
---
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
const data = await response.json();
const finalData = data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
return finalData;
}
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
const data = await response.json();
const { id } = Astro.params;
const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data[idx];
// console.log(items)
---
<Layout title=""
metaTitle={items.meta_title}
description={items.meta_description}
ogImg={items.img}
tiwtterCard="summary_large_image"
tiwtterImage={items.img}
tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/bn/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/bn/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/bn/${items.slug}`>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={items.img} alt={items.title} class="md:w-[40%]" />
</div>
<div class="flex flex-row justify-center md:justify-end mt-2">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
<p class="text-xl font-bold text-[#780a0a]">Share on: </p>
<a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/${items.slug}&text=%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/bn/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div>
</div>
<p class="text-justify mt-4">{items.content}</p>
</div>
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>

7
src/pages/en/file.astro Normal file
View File

@ -0,0 +1,7 @@
<main>
<div>
<section>sqjns
<img src="https://cdn33.siliconpin.com/files/siliconid0/gtfdo20u6v_" alt="">
</section>
</div>
</main>

View File

@ -9,9 +9,61 @@ console.log(news);
---
<Layout title="">
<main>
<section class="container mx-auto px-4">
<div class="my-16">
<span class="text-[#780a0a] font-bold" id="pageName"></span>
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{news.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/en/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={items.img} alt={items.title} />
<h2 class="text-lg text-justify ">{items.title}</h2>
</a>
</div>
<div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a href={`/en/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={items.img} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div>
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a href={`/en/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
)}
<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
<!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
</div>
</section>
</main>
<!-- <main>
<div>
<p>News English</p>
<!-- <img src="https:\/\/cdn33.siliconpin.com\/files\/siliconid0\/gtdk3ixrvs_Screenshot-from-2024-02-07-12-42-53.png" alt=""> -->
<div class="">
{data.map((items: {id: string | undefined; title: string | undefined;}) =>
<div>
@ -21,5 +73,5 @@ console.log(news);
)}
</div>
</div>
</main>
</main> -->
</Layout>