LinkStack/resources/views/vendor/env-editor/components/_upload.blade.php

93 lines
3.7 KiB
PHP

@php($translatePrefix='env-editor::env-editor.views.upload.')
<template id="env-editor-uploadFile">
<div>
<div class="h5 my-4">{{__($translatePrefix.'title')}}</div>
<div id="uploadEnvForm">
<div class="input-group mb-4">
<div class="custom-file ">
<input type="file" class="custom-file-input" :class="formInputNotValidClass" @change="fileInputChanged" lang="en">
<label class="custom-file-label" for="customFileLang">@{{ promptMsg }}</label>
</div>
<div class="invalid-feedback d-block" v-if="formIsInvalid">
@{{ errors }}
</div>
<div class="input-group-append" v-if="hasFile">
<button class="btn btn-outline-secondary" @click="clearFileInput" type="button">{{__($translatePrefix.'btn.clearFile')}}</button>
</div>
</div>
<div class="my-4">
<button class="btn-info btn " :disabled="!hasFile" @click="uploadAsBackUp">{{__($translatePrefix.'btn.uploadAsBackup')}}</button>
<button class="btn-warning btn " :disabled="!hasFile" @click="uploadAndReplaceCurrent">{{__($translatePrefix.'btn.uploadAndReplace')}}</button>
</div>
</div>
</div>
</template>
@push('scripts')
<script>
const fileUpload = {
template: '#env-editor-uploadFile',
data: () => {
return {
file: null,
fileName: null,
formIsInvalid: false,
errors: ''
}
},
computed: {
promptMsg() {
return this.hasFile ? this.fileName : "{{__($translatePrefix.'selectFilePrompt')}}"
},
hasFile() {
return (this.file !== null)
},
formInputNotValidClass() {
return this.formIsInvalid ? 'is-invalid ' : ''
},
},
methods: {
clearFileInput: function () {
this.file = null;
this.fileName = null;
},
uploadAsBackUp: function (e) {
return this.submitForm(e);
},
uploadAndReplaceCurrent: function (e) {
return this.submitForm(e, true);
},
fileInputChanged({ type, target }) {
this.fileName = target.files[0].name;
this.file = target.files[0]
},
submitForm(event, replaceCurrentEnv = false) {
this.formIsInvalid = false;
const formData = new FormData();
formData.append('file', this.file);
formData.append('replace_current', replaceCurrentEnv.toString());
envClient('{{route(config($package.'.route.name').'.upload')}}', {
body: formData,
method: 'post',
}).then(data => {
if (data.message) {
envAlert('info', data.message);
}
(replaceCurrentEnv) ? envEventBus.$emit('env:changed') : envEventBus.$emit('env:backupsChanged');
this.fileName = null;
this.file = null;
}).catch((error) => {
this.errors = error.errors.file[0];
this.formIsInvalid = true;
});
}
},
};
</script>
@endpush