Merge branch 'fix-base64-encoded-file-uploads' into 'master'
Remove base64 encoding from files that contain plain text Closes #48746 See merge request gitlab-org/gitlab-ce!22425
This commit is contained in:
commit
1438e322a5
|
@ -25,14 +25,32 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
createFile(target, file, isText) {
|
isText(content, fileType) {
|
||||||
|
const knownBinaryFileTypes = ['image/'];
|
||||||
|
const knownTextFileTypes = ['text/'];
|
||||||
|
const isKnownBinaryFileType = knownBinaryFileTypes.find(type => fileType.includes(type));
|
||||||
|
const isKnownTextFileType = knownTextFileTypes.find(type => fileType.includes(type));
|
||||||
|
const asciiRegex = /^[ -~\t\n\r]+$/; // tests whether a string contains ascii characters only (ranges from space to tilde, tabs and new lines)
|
||||||
|
|
||||||
|
if (isKnownBinaryFileType) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isKnownTextFileType) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if it's not a known file type, determine the type by evaluating the file contents
|
||||||
|
return asciiRegex.test(content);
|
||||||
|
},
|
||||||
|
createFile(target, file) {
|
||||||
const { name } = file;
|
const { name } = file;
|
||||||
let { result } = target;
|
let { result } = target;
|
||||||
|
const encodedContent = result.split('base64,')[1];
|
||||||
|
const rawContent = encodedContent ? atob(encodedContent) : '';
|
||||||
|
const isText = this.isText(rawContent, file.type);
|
||||||
|
|
||||||
if (!isText) {
|
result = isText ? rawContent : encodedContent;
|
||||||
// eslint-disable-next-line prefer-destructuring
|
|
||||||
result = result.split('base64,')[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('create', {
|
this.$emit('create', {
|
||||||
name: `${this.path ? `${this.path}/` : ''}${name}`,
|
name: `${this.path ? `${this.path}/` : ''}${name}`,
|
||||||
|
@ -43,15 +61,9 @@ export default {
|
||||||
},
|
},
|
||||||
readFile(file) {
|
readFile(file) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
const isText = file.type.match(/text.*/) !== null;
|
|
||||||
|
|
||||||
reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
|
reader.addEventListener('load', e => this.createFile(e.target, file), { once: true });
|
||||||
|
reader.readAsDataURL(file);
|
||||||
if (isText) {
|
|
||||||
reader.readAsText(file);
|
|
||||||
} else {
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
openFile() {
|
openFile() {
|
||||||
Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
|
Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Remove base64 encoding from files that contain plain text
|
||||||
|
merge_request: 22425
|
||||||
|
author:
|
||||||
|
type: fixed
|
|
@ -40,21 +40,10 @@ describe('new dropdown upload', () => {
|
||||||
|
|
||||||
describe('readFile', () => {
|
describe('readFile', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
spyOn(FileReader.prototype, 'readAsText');
|
|
||||||
spyOn(FileReader.prototype, 'readAsDataURL');
|
spyOn(FileReader.prototype, 'readAsDataURL');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls readAsText for text files', () => {
|
it('calls readAsDataURL for all files', () => {
|
||||||
const file = {
|
|
||||||
type: 'text/html',
|
|
||||||
};
|
|
||||||
|
|
||||||
vm.readFile(file);
|
|
||||||
|
|
||||||
expect(FileReader.prototype.readAsText).toHaveBeenCalledWith(file);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('calls readAsDataURL for non-text files', () => {
|
|
||||||
const file = {
|
const file = {
|
||||||
type: 'images/png',
|
type: 'images/png',
|
||||||
};
|
};
|
||||||
|
@ -66,32 +55,37 @@ describe('new dropdown upload', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('createFile', () => {
|
describe('createFile', () => {
|
||||||
const target = {
|
const textTarget = {
|
||||||
result: 'content',
|
result: 'base64,cGxhaW4gdGV4dA==',
|
||||||
};
|
};
|
||||||
const binaryTarget = {
|
const binaryTarget = {
|
||||||
result: 'base64,base64content',
|
result: 'base64,w4I=',
|
||||||
};
|
};
|
||||||
const file = {
|
const textFile = {
|
||||||
name: 'file',
|
name: 'textFile',
|
||||||
|
type: 'text/plain',
|
||||||
|
};
|
||||||
|
const binaryFile = {
|
||||||
|
name: 'binaryFile',
|
||||||
|
type: 'image/png',
|
||||||
};
|
};
|
||||||
|
|
||||||
it('creates new file', () => {
|
it('creates file in plain text (without encoding) if the file content is plain text', () => {
|
||||||
vm.createFile(target, file, true);
|
vm.createFile(textTarget, textFile);
|
||||||
|
|
||||||
expect(vm.$emit).toHaveBeenCalledWith('create', {
|
expect(vm.$emit).toHaveBeenCalledWith('create', {
|
||||||
name: file.name,
|
name: textFile.name,
|
||||||
type: 'blob',
|
type: 'blob',
|
||||||
content: target.result,
|
content: 'plain text',
|
||||||
base64: false,
|
base64: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('splits content on base64 if binary', () => {
|
it('splits content on base64 if binary', () => {
|
||||||
vm.createFile(binaryTarget, file, false);
|
vm.createFile(binaryTarget, binaryFile);
|
||||||
|
|
||||||
expect(vm.$emit).toHaveBeenCalledWith('create', {
|
expect(vm.$emit).toHaveBeenCalledWith('create', {
|
||||||
name: file.name,
|
name: binaryFile.name,
|
||||||
type: 'blob',
|
type: 'blob',
|
||||||
content: binaryTarget.result.split('base64,')[1],
|
content: binaryTarget.result.split('base64,')[1],
|
||||||
base64: true,
|
base64: true,
|
||||||
|
|
Loading…
Reference in New Issue