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.
|
|
<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>
|