145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<script>
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
import { useErrorStore } from '@/stores/errors'
|
|
const errorStore = useErrorStore()
|
|
const apiHost = import.meta.env.VITE_CONJUREOS_HOST
|
|
const authStr = useAuthStore()
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedFiles: [],
|
|
textInput: ''
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
const form = this.$refs.uploadForm
|
|
const formData = new FormData(form)
|
|
console.log('Upload ' + JSON.stringify(authStr.getAuth()))
|
|
|
|
fetch(apiHost + 'games', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
Authorization: `Bearer ${authStr.getAuth().token}`,
|
|
'API-Version': 1
|
|
}
|
|
})
|
|
.then((response) => response.text())
|
|
.then((result) => {
|
|
console.log(result)
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error)
|
|
|
|
errorStore.unshift(error)
|
|
})
|
|
},
|
|
filesChanges() {
|
|
this.selectedFiles = Array.from(this.$refs.inputFile.files || [])
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<article>
|
|
<h1 class="text-foreground">Upload</h1>
|
|
<form
|
|
ref="uploadForm"
|
|
enctype="multipart/form-data"
|
|
class="flex flex-col gap-2"
|
|
@submit.prevent="submitForm"
|
|
>
|
|
<!-- <div class="name-input-wrapper">-->
|
|
<!-- <label for="name" class="block text-sm font-medium text-gray-700">Name:</label>-->
|
|
<!-- <input type="text" name="name" id="name" required v-model="textInput"-->
|
|
<!-- class="mt-1 p-2 border border-gray-300 rounded-md text-background focus:ring-primary-500 focus:border-primary-500 w-full">-->
|
|
<!-- </div>-->
|
|
<div class="file-upload-wrapper">
|
|
<input
|
|
ref="inputFile"
|
|
type="file"
|
|
name="file"
|
|
id="file"
|
|
accept=".conj"
|
|
class="cursor-pointer"
|
|
@change="filesChanges"
|
|
/>
|
|
<label>
|
|
<strong class="instruction">Upload your file here</strong>
|
|
<em class="rules">Only <code>.conj</code> accepted.</em>
|
|
<em class="file-name" v-if="!!selectedFiles?.length">{{ selectedFiles[0].name }}</em>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="text-foreground w-full my-2 underline">
|
|
<RouterLink to="manual-upload" class="hover:color-blue-300"
|
|
>Or manually enter your metadata</RouterLink
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
class="bg-transparent font-bold text-foreground py-2 px-4 border border-primary rounded hover:bg-primary"
|
|
type="submit"
|
|
>
|
|
Upload
|
|
</button>
|
|
</form>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
form {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.file-upload-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
input {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
color: var(--vt-c-black);
|
|
background-color: var(--vt-c-white);
|
|
|
|
.file-name {
|
|
align-self: end;
|
|
color: var(--vt-c-black-soft);
|
|
}
|
|
|
|
&.invalid {
|
|
background-color: var(--vt-c-bittersweet);
|
|
}
|
|
}
|
|
|
|
button[type='submit'] {
|
|
&:hover {
|
|
background-color: var(--vt-c-munsell);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
label {
|
|
background-color: var(--vt-c-white-mute);
|
|
}
|
|
}
|
|
}
|
|
</style>
|