Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Limit video upload size #430

Merged
merged 1 commit into from
Dec 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion src/components/video-editor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,12 @@
</span>
<span class="align-middle inline-block">
<span>
<div>{{ $t('editor.video.label.drag') }}</div>
<div class="text-center">{{ $t('editor.video.label.drag') }}</div>
<div>
{{ $t('editor.label.or') }}
<span class="text-blue-700 font-bold">{{ $t('editor.label.browse') }}</span>
{{ $t('editor.label.upload') }}
{{ ' ' + $t('editor.video.label.sizeLimit', { size: fileSizeLimit }) }}
</div>
</span>
<input ref="videoFileInput" type="file" class="cursor-pointer" @change="onFileChange" />
Expand Down Expand Up @@ -116,6 +117,7 @@
import { Options, Prop, Vue } from 'vue-property-decorator';
import { ConfigFileStructure, SourceCounts, VideoFile, VideoPanel } from '@/definitions';

import Message from 'vue-m-message';
import draggable from 'vuedraggable';
import VideoPreviewV from './helpers/video-preview.vue';

Expand All @@ -137,6 +139,7 @@ export default class VideoEditorV extends Vue {
edited = false;

fileType = '';
fileSizeLimit = 75; // File size limit in MB
videoPreviewLoading = false;
videoPreviewPromise = undefined as Promise<VideoFile> | undefined;
videoPreview = {} as VideoFile | Record<string, never>;
Expand Down Expand Up @@ -218,6 +221,17 @@ export default class VideoEditorV extends Vue {

onFileChange(e: Event): void {
const file = Array.from((e.target as HTMLInputElement).files as ArrayLike<File>)[0];

// Block files which are too big
if (file.size > this.fileSizeLimit * 1024 * 1024) {
Message.error(
this.$t('editor.video.sizeExceeded') +
' ' +
this.$t('editor.video.label.sizeLimit', { size: this.fileSizeLimit })
);
return;
}

this.addUploadedFile(file, 'src');
this.onVideoEdited();
}
Expand Down
2 changes: 2 additions & 0 deletions src/lang/lang.csv
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,11 @@ editor.image.slideshowCaption,Slideshow Caption,1,Légende du diaporama,1
editor.image.loadingError,An error occurred when trying to load image,1,Une erreur est survenue lors du chargement de l’image.,1
editor.video.title,Video Title,1,Titre de la vidéo,1
editor.video.label.drag,Drag your video file here,1,Glissez votre fichier vidéo ici,1
editor.video.label.sizeLimit,({size}MB limit),1,(limite {size}MB),0
editor.video.label.captions,Video Captions,1,Sous-titres,1
editor.video.label.transcript,Video Transcript,1,Transcription,1
editor.video.label.upload,Upload,1,Télécharger,1
editor.video.sizeExceeded,File too big!,1,Fichier trop gros !,0
editor.video.label.linkSupport,Supports YouTube links (regular and shortened) as well as direct links to mp4 videos.,1,Prend en charge les liens YouTube (réguliers et raccourcis) ainsi que les liens directs vers des vidéos mp4.,0
editor.video.delete,Delete Video,1,Supprimer la vidéo,1
editor.video.pasteUrl,Paste the URL to a video,1,Collez l'url d'une vidéo,0
Expand Down
Loading