debian-mirror-gitlab/app/assets/javascripts/ide/components/new_dropdown/upload.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

89 lines
2.1 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2020-04-08 14:13:33 +05:30
import { isTextFile } from '~/ide/utils';
2021-03-11 19:13:27 +05:30
import ItemButton from './button.vue';
2018-11-18 11:00:15 +05:30
export default {
components: {
ItemButton,
},
props: {
path: {
type: String,
required: false,
default: '',
2018-05-09 12:01:36 +05:30
},
2018-11-18 11:00:15 +05:30
showLabel: {
type: Boolean,
required: false,
default: true,
2018-05-09 12:01:36 +05:30
},
2018-11-18 11:00:15 +05:30
buttonCssClasses: {
type: String,
required: false,
default: null,
2018-05-09 12:01:36 +05:30
},
2018-11-18 11:00:15 +05:30
},
methods: {
2018-12-13 13:39:08 +05:30
createFile(target, file) {
2021-03-08 18:12:59 +05:30
const { name, type: mimeType } = file;
2020-03-13 15:44:24 +05:30
const encodedContent = target.result.split('base64,')[1];
2018-12-13 13:39:08 +05:30
const rawContent = encodedContent ? atob(encodedContent) : '';
2021-03-08 18:12:59 +05:30
const isText = isTextFile({ content: rawContent, mimeType, name });
2018-05-09 12:01:36 +05:30
2021-03-08 18:12:59 +05:30
const emitCreateEvent = (content) =>
2020-03-13 15:44:24 +05:30
this.$emit('create', {
name: `${this.path ? `${this.path}/` : ''}${name}`,
type: 'blob',
content,
2021-01-03 14:25:43 +05:30
rawPath: !isText ? URL.createObjectURL(file) : '',
2021-03-08 18:12:59 +05:30
mimeType,
2020-03-13 15:44:24 +05:30
});
2018-05-09 12:01:36 +05:30
2020-03-13 15:44:24 +05:30
if (isText) {
const reader = new FileReader();
2021-03-08 18:12:59 +05:30
reader.addEventListener('load', (e) => emitCreateEvent(e.target.result), { once: true });
2020-03-13 15:44:24 +05:30
reader.readAsText(file);
} else {
2021-01-03 14:25:43 +05:30
emitCreateEvent(rawContent);
2020-03-13 15:44:24 +05:30
}
2018-11-18 11:00:15 +05:30
},
readFile(file) {
const reader = new FileReader();
2018-05-09 12:01:36 +05:30
2021-03-08 18:12:59 +05:30
reader.addEventListener('load', (e) => this.createFile(e.target, file), { once: true });
2018-12-13 13:39:08 +05:30
reader.readAsDataURL(file);
2018-11-18 11:00:15 +05:30
},
openFile() {
2021-03-08 18:12:59 +05:30
Array.from(this.$refs.fileUpload.files).forEach((file) => this.readFile(file));
2018-05-09 12:01:36 +05:30
},
2018-11-18 11:00:15 +05:30
startFileUpload() {
this.$refs.fileUpload.click();
},
},
};
2018-05-09 12:01:36 +05:30
</script>
<template>
<div>
2018-11-18 11:00:15 +05:30
<item-button
:class="buttonCssClasses"
:show-label="showLabel"
:icon-classes="showLabel ? 'mr-2' : ''"
:label="__('Upload file')"
class="d-flex"
icon="upload"
@click="startFileUpload"
/>
2018-05-09 12:01:36 +05:30
<input
id="file-upload"
2018-11-08 19:23:39 +05:30
ref="fileUpload"
2018-05-09 12:01:36 +05:30
type="file"
class="hidden"
2018-11-20 20:47:30 +05:30
multiple
2021-03-08 18:12:59 +05:30
data-qa-selector="file_upload_field"
2018-11-20 20:47:30 +05:30
@change="openFile"
2018-05-09 12:01:36 +05:30
/>
</div>
</template>