Refined file upload card

refs https://github.com/TryGhost/Team/issues/1231

- updated upload endpoint for files
- cleanup
This commit is contained in:
Rishabh 2021-12-10 18:01:25 +05:30
parent ee639625ad
commit 0fb7a04bae
2 changed files with 19 additions and 24 deletions

View File

@ -52,8 +52,8 @@
{{else}} {{else}}
<div class="kg-audio-container kg-audio-container-empty" {{on "click" this.triggerFileDialog}}> <div class="kg-audio-container kg-audio-container-empty" {{on "click" this.triggerFileDialog}}>
<GhUploader <GhUploader
@uploadUrl="/media/upload/" @uploadUrl="/files/upload/"
@resourceName="media" @resourceName="files"
@files={{this.files}} @files={{this.files}}
@onStart={{this.fileUploadStarted}} @onStart={{this.fileUploadStarted}}
@onComplete={{this.fileUploadCompleted}} @onComplete={{this.fileUploadCompleted}}
@ -84,7 +84,7 @@
{{else}} {{else}}
{{svg-jar "audio-upload"}} {{svg-jar "audio-upload"}}
<span class="kg-placeholder-text"> <span class="kg-placeholder-text">
Click to upload an audio file Click to upload a file
</span> </span>
{{/if}} {{/if}}
{{/if}} {{/if}}

View File

@ -1,4 +1,5 @@
import Component from '@glimmer/component'; import Component from '@glimmer/component';
import prettifyFileName from '../utils/prettify-file-name';
import {TrackedObject} from 'tracked-built-ins'; import {TrackedObject} from 'tracked-built-ins';
import {action} from '@ember/object'; import {action} from '@ember/object';
import {bind} from '@ember/runloop'; import {bind} from '@ember/runloop';
@ -6,17 +7,16 @@ import {isBlank} from '@ember/utils';
import {inject as service} from '@ember/service'; import {inject as service} from '@ember/service';
import {set} from '@ember/object'; import {set} from '@ember/object';
import {tracked} from '@glimmer/tracking'; import {tracked} from '@glimmer/tracking';
const PLACEHOLDERS = ['summer', 'mountains', 'ufo-attack']; const PLACEHOLDERS = ['summer', 'mountains', 'ufo-attack'];
/* Payload /* Payload
{ {
src: 'https://ghostsite.com/media/...', src: 'https://ghostsite.com/media/...',
fileSrc: '...',
fileName: '...', fileName: '...',
fileSize: 2048, fileSize: 2048,
fileTitle: '...', fileTitle: '...',
fileCaption: '...', fileCaption: '...',
mimeType: '...'
} }
*/ */
@ -63,21 +63,9 @@ export default class KoenigCardFileComponent extends Component {
}; };
} }
bytesToSize(bytes) {
if (!bytes) {
return '0 Byte';
}
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) {
return '0 Byte';
}
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round((bytes / Math.pow(1024, i))) + ' ' + sizes[i];
}
get fileSize() { get fileSize() {
const sizeInBytes = this.args.payload.fileSize || this.previewPayload.fileSize; const sizeInBytes = this.args.payload.fileSize || this.previewPayload.fileSize;
return this.bytesToSize(sizeInBytes); return this._bytesToSize(sizeInBytes);
} }
get fileName() { get fileName() {
@ -149,16 +137,11 @@ export default class KoenigCardFileComponent extends Component {
} }
} }
prettifyFileName(filename) {
let updatedName = filename.split('.').slice(0, -1).join('.').replace(/[-_]/g,' ').replace(/[^\w\s]+/g,'').replace(/\s\s+/g, ' ');
return updatedName.charAt(0).toUpperCase() + updatedName.slice(1);
}
@action @action
async fileUploadCompleted([uploadedFile]) { async fileUploadCompleted([uploadedFile]) {
this.previewPayload.src = uploadedFile.url; this.previewPayload.src = uploadedFile.url;
this.previewPayload.fileName = uploadedFile.fileName; this.previewPayload.fileName = uploadedFile.fileName;
this.previewPayload.fileTitle = this.prettifyFileName(uploadedFile.fileName); this.previewPayload.fileTitle = prettifyFileName(uploadedFile.fileName);
this.previewPayload.fileCaption = ''; this.previewPayload.fileCaption = '';
// save preview payload attrs into actual payload and create undo snapshot // save preview payload attrs into actual payload and create undo snapshot
@ -231,4 +214,16 @@ export default class KoenigCardFileComponent extends Component {
this.files = [event.dataTransfer.files[0]]; this.files = [event.dataTransfer.files[0]];
} }
} }
_bytesToSize(bytes) {
if (!bytes) {
return '0 Byte';
}
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) {
return '0 Byte';
}
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round((bytes / Math.pow(1024, i))) + ' ' + sizes[i];
}
} }