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

View File

@ -1,4 +1,5 @@
import Component from '@glimmer/component';
import prettifyFileName from '../utils/prettify-file-name';
import {TrackedObject} from 'tracked-built-ins';
import {action} from '@ember/object';
import {bind} from '@ember/runloop';
@ -6,17 +7,16 @@ import {isBlank} from '@ember/utils';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
import {tracked} from '@glimmer/tracking';
const PLACEHOLDERS = ['summer', 'mountains', 'ufo-attack'];
/* Payload
{
src: 'https://ghostsite.com/media/...',
fileSrc: '...',
fileName: '...',
fileSize: 2048,
fileTitle: '...',
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() {
const sizeInBytes = this.args.payload.fileSize || this.previewPayload.fileSize;
return this.bytesToSize(sizeInBytes);
return this._bytesToSize(sizeInBytes);
}
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
async fileUploadCompleted([uploadedFile]) {
this.previewPayload.src = uploadedFile.url;
this.previewPayload.fileName = uploadedFile.fileName;
this.previewPayload.fileTitle = this.prettifyFileName(uploadedFile.fileName);
this.previewPayload.fileTitle = prettifyFileName(uploadedFile.fileName);
this.previewPayload.fileCaption = '';
// 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]];
}
}
_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];
}
}