tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-28 13:41:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔷 remove drag and drop support

Browse Source
This commit is contained in:
geoffrey45 2022-04-08 21:03:03 +03:00
parent 6e360fcdac
commit 497dc153a0
1 changed files with 7 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/modals/updatePlaylist.vue
View File

@ -30,15 +30,8 @@
style="display: none" style="display: none"
@change="handleUpload" @change="handleUpload"
/> />
<div <div id="upload" class="rounded" @click="selectFiles">
id="upload" <div>Click to upload image</div>
class="rounded"
@click="selectFiles"
@dragenter="dragEnter"
@dragover="dragOver"
@drop="drop"
>
<div>Click or Drag an image here</div>
<div <div
id="update-pl-img-preview" id="update-pl-img-preview"
class="image" class="image"
@ -56,6 +49,7 @@ import { onMounted, ref } from "vue";
import { Playlist } from "../../interfaces"; import { Playlist } from "../../interfaces";
import { updatePlaylist } from "../../composables/playlists"; import { updatePlaylist } from "../../composables/playlists";
import usePStore from "../../stores/p.ptracks"; import usePStore from "../../stores/p.ptracks";
import { getCurrentDate } from "../../composables/perks";
const pStore = usePStore(); const pStore = usePStore();
@ -74,8 +68,6 @@ const emit = defineEmits<{
emit("title", "Update Playlist"); emit("title", "Update Playlist");
let image: File;
function selectFiles() { function selectFiles() {
const input = document.getElementById( const input = document.getElementById(
"update-pl-image-upload" "update-pl-image-upload"
@ -83,26 +75,7 @@ function selectFiles() {
input.click(); input.click();
} }
function dragEnter(e: Event) { let image: File;
e.stopPropagation();
e.preventDefault();
}
function dragOver(e: Event) {
e.stopPropagation();
e.preventDefault();
}
function drop(e: any) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
const dt = e.dataTransfer;
const files = dt.files;
handleFile(files[0]);
}
function handleUpload() { function handleUpload() {
const input = document.getElementById( const input = document.getElementById(
@ -113,7 +86,7 @@ function handleUpload() {
} }
function handleFile(file: File) { function handleFile(file: File) {
if (!file.type.startsWith("image/")) { if (!file || !file.type.startsWith("image/")) {
return; return;
} }
@ -128,10 +101,9 @@ function update_playlist(e: Event) {
e.preventDefault(); e.preventDefault();
const form = e.target as HTMLFormElement; const form = e.target as HTMLFormElement;
const formData = new FormData(form); const formData = new FormData(form);
formData.append("image", image);
formData.append("lastUpdated", new Date().toString());
console.log(formData.get("name") == ""); formData.append("image", image);
formData.append("lastUpdated", getCurrentDate());
if (formData.get("name").toString().trim() !== "") { if (formData.get("name").toString().trim() !== "") {
updatePlaylist(props.playlist.playlistid, formData, pStore).then(() => { updatePlaylist(props.playlist.playlistid, formData, pStore).then(() => {
@ -169,7 +141,6 @@ function update_playlist(e: Event) {
input[type="submit"] { input[type="submit"] {
margin: $small 0; margin: $small 0;
background-color: $accent; background-color: $accent;
color: #fff;
width: 7rem; width: 7rem;
padding: 0.75rem; padding: 0.75rem;
font-size: 1rem; font-size: 1rem;