mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-22 07:46:15 -04:00
feat: updated memo
This commit is contained in:
parent
0a4abde23d
commit
29c221a8f5
6 changed files with 63 additions and 44 deletions
|
@ -13,27 +13,32 @@
|
|||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Drag & drop a file here</p>
|
||||
<p class="or">or</p>
|
||||
<v-btn depressed @click="manualUploadClicked">select a file</v-btn>
|
||||
<p class="or">
|
||||
or
|
||||
</p>
|
||||
<v-btn depressed @click="manualUploadClicked">
|
||||
select a file
|
||||
</v-btn>
|
||||
<input ref="uploadInput" type="file" hidden @change="(e) => handleFiles(e.target.files[0])">
|
||||
|
||||
<div v-if="allowUrl">
|
||||
<p class="or">or</p>
|
||||
<p class="or">
|
||||
or
|
||||
</p>
|
||||
<v-text-field
|
||||
ref="urlInput"
|
||||
@click:append="urlFilled(url)"
|
||||
@keypress.enter="urlFilled(url)"
|
||||
v-model="url"
|
||||
append-icon="fa-arrow-right"
|
||||
dense
|
||||
label="Paste the file url"
|
||||
outlined
|
||||
:error-messages="urlErrors"
|
||||
@click:append="urlFilled(url)"
|
||||
@keypress.enter="urlFilled(url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,9 +46,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as axios from "axios";
|
||||
import * as axios from 'axios'
|
||||
export default {
|
||||
name: "FileUploader",
|
||||
name: 'FileUploader',
|
||||
props: {
|
||||
allowUrl: {
|
||||
type: Boolean,
|
||||
|
@ -61,50 +66,50 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
imageDropped(e) {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
if (e.dataTransfer.items.length > 0) {
|
||||
const item = e.dataTransfer.items[0];
|
||||
const item = e.dataTransfer.items[0]
|
||||
switch (item.kind) {
|
||||
case 'string':
|
||||
item.getAsString(url => this.urlFilled(url));
|
||||
break;
|
||||
item.getAsString(url => this.urlFilled(url))
|
||||
break
|
||||
case 'file':
|
||||
this.handleFiles(item.getAsFile());
|
||||
break;
|
||||
this.handleFiles(item.getAsFile())
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
dragEnter() {
|
||||
this.dragEnterCounter++;
|
||||
this.dragging = true;
|
||||
this.dragEnterCounter++
|
||||
this.dragging = true
|
||||
},
|
||||
dragLeave() {
|
||||
if (--this.dragEnterCounter <= 0) {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
}
|
||||
},
|
||||
async urlFilled(url) {
|
||||
if (url && url.length > 0) {
|
||||
this.loading = true;
|
||||
this.loading = true
|
||||
try {
|
||||
const {data, headers} = await axios.get(url);
|
||||
const name = url.split('/').pop();
|
||||
const {data, headers} = await axios.get(url)
|
||||
const name = url.split('/').pop()
|
||||
const file = new File([data], name, {type: headers['content-type']})
|
||||
this.handleFiles(file);
|
||||
this.handleFiles(file)
|
||||
} catch (ignored) {
|
||||
this.urlErrors = 'Incorrect url'
|
||||
}
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
dragEnd() {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
},
|
||||
dragExit() {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
},
|
||||
handleFiles(file) {
|
||||
if (!file) return;
|
||||
if (!file) { return }
|
||||
this.$emit('input', file)
|
||||
},
|
||||
manualUploadClicked() {
|
||||
|
|
|
@ -5,7 +5,15 @@
|
|||
Warning: le style/aspect est toujours en wip, so focus on content <br><br>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="4" v-for="item in items" :key="item.section" class="memo-section">
|
||||
<v-col
|
||||
v-for="item in items"
|
||||
:key="item.section"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
class="memo-section"
|
||||
>
|
||||
<v-card class="mb-5">
|
||||
<v-card-title>{{ item.section }}</v-card-title>
|
||||
<v-card-text>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue