d80b692354
Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 7.20.0 to 8.0.3. - [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases) - [Commits](https://github.com/vuejs/eslint-plugin-vue/compare/v7.20.0...v8.0.3) --- updated-dependencies: - dependency-name: eslint-plugin-vue dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * bump eslint to 8.11.0 * bump eslint-plugin-vue to 8.5.0 * disable eslint rule for multi-word component names. TODO enable it and follow conventions Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: John Hill <john.c.hill@nasa.gov> Co-authored-by: unlikelyzero <jchill2@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com>
104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
/*****************************************************************************
|
|
* Open MCT, Copyright (c) 2014-2022, United States Government
|
|
* as represented by the Administrator of the National Aeronautics and Space
|
|
* Administration. All rights reserved.
|
|
*
|
|
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
* "License"); you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
*
|
|
* Open MCT includes source code licensed under additional open source
|
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
* this source code distribution or the Licensing information page available
|
|
* at runtime from the About dialog for additional information.
|
|
*****************************************************************************/
|
|
|
|
<template>
|
|
<span class="form-control shell">
|
|
<span
|
|
class="field control"
|
|
:class="model.cssClass"
|
|
>
|
|
<input
|
|
id="fileElem"
|
|
ref="fileInput"
|
|
type="file"
|
|
accept=".json"
|
|
style="display:none"
|
|
>
|
|
<button
|
|
id="fileSelect"
|
|
class="c-button"
|
|
@click="selectFile"
|
|
>
|
|
{{ name }}
|
|
</button>
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['openmct'],
|
|
props: {
|
|
model: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileInfo: undefined
|
|
};
|
|
},
|
|
computed: {
|
|
name() {
|
|
const fileInfo = this.fileInfo || this.model.value;
|
|
|
|
return fileInfo && fileInfo.name || this.model.text;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$refs.fileInput.addEventListener("change", this.handleFiles, false);
|
|
},
|
|
methods: {
|
|
handleFiles() {
|
|
const fileList = this.$refs.fileInput.files;
|
|
this.readFile(fileList[0]);
|
|
},
|
|
readFile(file) {
|
|
const self = this;
|
|
const fileReader = new FileReader();
|
|
const fileInfo = {};
|
|
fileInfo.name = file.name;
|
|
fileReader.onload = function (event) {
|
|
fileInfo.body = event.target.result;
|
|
self.fileInfo = fileInfo;
|
|
|
|
const data = {
|
|
model: self.model,
|
|
value: fileInfo
|
|
};
|
|
self.$emit('onChange', data);
|
|
};
|
|
|
|
fileReader.onerror = function (error) {
|
|
console.error('fileReader error', error);
|
|
};
|
|
|
|
fileReader.readAsText(file);
|
|
},
|
|
selectFile() {
|
|
this.$refs.fileInput.click();
|
|
}
|
|
}
|
|
};
|
|
</script>
|