Repo for the search and displace core module including the interface to select files and search and displace operations to run on them.
https://searchanddisplace.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.9 KiB
100 lines
2.9 KiB
<template>
|
|
<div class="wrap" v-if="!fileUploaded && !uploading">
|
|
<Toast position="top-right" />
|
|
|
|
<Panel header="Please upload a file">
|
|
<FileUpload
|
|
name="demo[]"
|
|
:customUpload="true"
|
|
:auto="true"
|
|
@uploader="uploadFile"
|
|
>
|
|
<template #empty>
|
|
<p>Drag and drop files to here to upload.</p>
|
|
</template>
|
|
</FileUpload>
|
|
</Panel>
|
|
|
|
<BlockUI :blocked="uiBlocked" :fullScreen="true"></BlockUI>
|
|
</div>
|
|
<div class="wrap" v-else-if="!fileUploaded && uploading">
|
|
<Skeleton />
|
|
<Skeleton />
|
|
<Skeleton />
|
|
<Skeleton />
|
|
<Skeleton />
|
|
<Skeleton />
|
|
<Skeleton />
|
|
</div>
|
|
<div class="wrap" v-else>
|
|
<process-file :file="uploadResult" :filters="filters"></process-file>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import axios from 'axios';
|
|
// import Vue from 'vue';
|
|
// import Component from 'vue-class-component';
|
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class Home extends Vue {
|
|
|
|
@Prop({ default: [] })
|
|
public readonly filters!: Array<object>
|
|
|
|
public uiBlocked = false;
|
|
public uploading = false;
|
|
public fileUploaded: boolean = false;
|
|
public uploadResult = null;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
public created()
|
|
{
|
|
console.log(this.filters);
|
|
}
|
|
|
|
/**
|
|
* A method which uploads the files to the server for processing
|
|
*
|
|
* @param event The event containing the uploaded files information
|
|
*/
|
|
public uploadFile(event: any): void {
|
|
this.uploading = true;
|
|
this.fileUploaded = false;
|
|
|
|
|
|
this['$toast'].add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
|
|
let file = event.files[0];
|
|
|
|
let formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
setTimeout(
|
|
() => {
|
|
axios.post(
|
|
'http://core.sandd/api/file',
|
|
formData,
|
|
{
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
}
|
|
).then(
|
|
(response) => {
|
|
this.fileUploaded = true;
|
|
this.uploadResult = response.data;
|
|
// console.log('Success: ', response);
|
|
}
|
|
).catch(
|
|
(err) => {
|
|
console.log('Error: ', err);
|
|
}
|
|
);
|
|
}, 500
|
|
)
|
|
}
|
|
}
|
|
</script>
|