potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Refactor picture-upload and take into account picture size limits

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-04-12 10:43:04 +02:00
parent 947d0b0cdb
commit e2721af456
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
6 changed files with 214 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
js/src/components/PictureUpload.vue
View file

@ -1,15 +1,35 @@
<template>
<div class="root">
<figure class="image" v-if="imageSrc">
<img :src="imageSrc" />
<figure class="image" v-if="imageSrc && !imagePreviewLoadingError">
<img :src="imageSrc" @error="showImageLoadingError" />
</figure>
<figure class="image is-128x128" v-else>
<div class="image-placeholder">
<span class="has-text-centered">{{ textFallback }}</span>
<div
class="image-placeholder"
:class="{ error: imagePreviewLoadingError }"
>
<span class="has-text-centered" v-if="imagePreviewLoadingError">{{
$t("Error while loading the preview")
}}</span>
<span class="has-text-centered" v-else>{{ textFallback }}</span>
</div>
</figure>
<div class="action-buttons">
<p v-if="pictureFile" class="metadata">
<span class="name" :title="pictureFile.name">{{
pictureFile.name
}}</span>
<span class="size">({{ formatBytes(pictureFile.size) }})</span>
</p>
<p v-if="pictureTooBig" class="picture-too-big">
{{
$t(
"The selected picture is too heavy. You need to select a file smaller than {size}.",
{ size: formatBytes(maxSize) }
)
}}
</p>
<b-field class="file is-primary">
<b-upload @input="onFileChanged" :accept="accept" class="file-label">
<span class="file-cta">
@ -47,6 +67,10 @@ figure.image {
justify-content: center;
align-items: center;
&.error {
border: 2px solid red;
}
span {
flex: 1;
color: #eee;
@ -56,6 +80,27 @@ figure.image {
.action-buttons {
display: flex;
flex-direction: column;
.file {
justify-content: center;
}
.metadata {
display: inline-flex;
.name {
max-width: 200px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 5px;
}
}
}
.picture-too-big {
color: $danger;
}
</style>
@ -87,30 +132,32 @@ export default class PictureUpload extends Vue {
})
textFallback!: string;
imageSrc: string | null = this.defaultImage ? this.defaultImage.url : null;
@Prop({ type: Number, required: false, default: 10_485_760 })
maxSize!: number;
file!: File | null;
mounted(): void {
if (this.pictureFile) {
this.updatePreview(this.pictureFile);
imagePreviewLoadingError = false;
get pictureTooBig(): boolean {
return this.pictureFile?.size > this.maxSize;
}
get imageSrc(): string | null {
if (this.pictureFile !== undefined) {
if (this.pictureFile === null) return null;
try {
return URL.createObjectURL(this.pictureFile);
} catch (e) {
console.error(e);
}
}
}
@Watch("pictureFile")
onPictureFileChanged(val: File): void {
this.updatePreview(val);
}
@Watch("defaultImage")
onDefaultImageChange(defaultImage: IMedia): void {
this.imageSrc = defaultImage ? defaultImage.url : null;
return this.defaultImage ? this.defaultImage.url : null;
}
onFileChanged(file: File | null): void {
this.$emit("change", file);
this.updatePreview(file);
this.file = file;
}
@ -118,13 +165,23 @@ export default class PictureUpload extends Vue {
this.onFileChanged(null);
}
private updatePreview(file?: File | null) {
if (file) {
this.imageSrc = URL.createObjectURL(file);
return;
}
@Watch("imageSrc")
resetImageLoadingError(): void {
this.imagePreviewLoadingError = false;
}
this.imageSrc = null;
showImageLoadingError(): void {
this.imagePreviewLoadingError = true;
}
// https://gist.github.com/zentala/1e6f72438796d74531803cc3833c039c
formatBytes(bytes: number, decimals: number): string {
if (bytes == 0) return "0 Bytes";
const k = 1024,
dm = decimals || 2,
sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
}
}
</script>

7
js/src/i18n/en_US.json
View file

@ -979,5 +979,10 @@
"Personal feeds": "Personal feeds",
"These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.": "These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.",
"The event will show as attributed to this profile.": "The event will show as attributed to this profile.",
"You may show some members as contacts.": "You may show some members as contacts."
"You may show some members as contacts.": "You may show some members as contacts.",
"The selected picture is too heavy. You need to select a file smaller than {size}.": "The selected picture is too heavy. You need to select a file smaller than {size}.",
"Unable to create the group. One of the pictures may be too heavy.": "Unable to create the group. One of the pictures may be too heavy.",
"Unable to update the profile. The avatar picture may be too heavy.": "Unable to update the profile. The avatar picture may be too heavy.",
"Unable to create the profile. The avatar picture may be too heavy.": "Unable to create the profile. The avatar picture may be too heavy.",
"Error while loading the preview": "Error while loading the preview"
}

7
js/src/i18n/fr_FR.json
View file

@ -1073,5 +1073,10 @@
"Personal feeds": "Flux personnels",
"These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.": "Ces flux contiennent des informations sur les événements pour lesquels n'importe lequel de vos profils est un⋅e participant⋅e ou un⋅e créateur⋅ice. Vous devriez les garder privés. Vous pouvez trouver des flux spécifiques à chaque profil sur la page d'édition des profils.",
"The event will show as attributed to this profile.": "L'événement sera affiché comme attribué à ce profil.",
"You may show some members as contacts.": "Vous pouvez afficher certain⋅es membres en tant que contacts."
"You may show some members as contacts.": "Vous pouvez afficher certain⋅es membres en tant que contacts.",
"The selected picture is too heavy. You need to select a file smaller than {size}.": "L'image sélectionnée est trop lourde. Vous devez sélectionner un fichier de moins de {size}.",
"Unable to create the group. One of the pictures may be too heavy.": "Impossible de créer le groupe. Une des images est trop lourde.",
"Unable to update the profile. The avatar picture may be too heavy.": "Impossible de mettre à jour le profil. L'image d'avatar est probablement trop lourde.",
"Unable to create the profile. The avatar picture may be too heavy.": "Impossible de créer le profil. L'image d'avatar est probablement trop lourde.",
"Error while loading the preview": "Erreur lors du chargement de l'aperçu"
}

26
js/src/views/Account/children/EditIdentity.vue
View file

@ -32,6 +32,7 @@
<picture-upload
v-model="avatarFile"
:defaultImage="identity.avatar"
:maxSize="avatarMaxSize"
class="picture-upload"
/>
@ -231,6 +232,9 @@ import {
DELETE_FEED_TOKEN,
} from "@/graphql/feed_tokens";
import { IFeedToken } from "@/types/feedtoken.model";
import { ServerParseError } from "apollo-link-http-common";
import { IConfig } from "@/types/config.model";
import { CONFIG } from "@/graphql/config";
@Component({
components: {
@ -256,6 +260,7 @@ import { IFeedToken } from "@/types/feedtoken.model";
this.handleErrors(graphQLErrors);
},
},
config: CONFIG,
},
})
export default class EditIdentity extends mixins(identityEditionMixin) {
@ -263,6 +268,8 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
@Prop({ type: String }) identityName!: string;
config!: IConfig;
errors: string[] = [];
avatarFile: File | null = null;
@ -450,6 +457,10 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
}
}
get avatarMaxSize(): number | undefined {
return this?.config?.uploadLimits?.avatar;
}
async generateFeedTokens(): Promise<void> {
const newToken = await this.createNewFeedToken();
this.identity.feedTokens.push(newToken);
@ -528,6 +539,21 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
private handleError(err: any) {
console.error(err);
if (err?.networkError?.name === "ServerParseError") {
const error = err?.networkError as ServerParseError;
if (error?.response?.status === 413) {
const errorMessage = this.isUpdate
? this.$t(
"Unable to update the profile. The avatar picture may be too heavy."
)
: this.$t(
"Unable to create the profile. The avatar picture may be too heavy."
);
this.errors.push(errorMessage as string);
}
}
if (err.graphQLErrors !== undefined) {
err.graphQLErrors.forEach(({ message }: { message: string }) => {
this.$notifier.error(message);

45
js/src/views/Group/Create.vue
View file

@ -58,12 +58,20 @@
<div>
<b>{{ $t("Avatar") }}</b>
<picture-upload :textFallback="$t('Avatar')" v-model="avatarFile" />
<picture-upload
:textFallback="$t('Avatar')"
v-model="avatarFile"
:maxSize="avatarMaxSize"
/>
</div>
<div>
<b>{{ $t("Banner") }}</b>
<picture-upload :textFallback="$t('Banner')" v-model="bannerFile" />
<picture-upload
:textFallback="$t('Banner')"
v-model="bannerFile"
:maxSize="bannerMaxSize"
/>
</div>
<button class="button is-primary" native-type="submit">
@ -84,6 +92,10 @@ import { MemberRole } from "@/types/enums";
import RouteName from "../../router/name";
import { convertToUsername } from "../../utils/username";
import PictureUpload from "../../components/PictureUpload.vue";
import { ErrorResponse } from "apollo-link-error";
import { ServerParseError } from "apollo-link-http-common";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
@Component({
components: {
@ -93,6 +105,7 @@ import PictureUpload from "../../components/PictureUpload.vue";
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
config: CONFIG,
},
})
export default class CreateGroup extends mixins(IdentityEditionMixin) {
@ -100,6 +113,8 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
group = new Group();
config!: IConfig;
avatarFile: File | null = null;
bannerFile: File | null = null;
@ -110,6 +125,7 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
async createGroup(): Promise<void> {
try {
this.errors = [];
await this.$apollo.mutate({
mutation: CREATE_GROUP,
variables: this.buildVariables(),
@ -154,6 +170,14 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
return window.location.hostname;
}
get avatarMaxSize(): number | undefined {
return this?.config?.uploadLimits?.avatar;
}
get bannerMaxSize(): number | undefined {
return this?.config?.uploadLimits?.banner;
}
@Watch("group.name")
updateUsername(groupName: string): void {
this.group.preferredUsername = convertToUsername(groupName);
@ -194,9 +218,22 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
};
}
private handleError(err: any) {
private handleError(err: ErrorResponse) {
if (err?.networkError?.name === "ServerParseError") {
const error = err?.networkError as ServerParseError;
if (error?.response?.status === 413) {
this.errors.push(
this.$t(
"Unable to create the group. One of the pictures may be too heavy."
) as string
);
}
}
this.errors.push(
...err.graphQLErrors.map(({ message }: { message: string }) => message)
...(err.graphQLErrors || []).map(
({ message }: { message: string }) => message
)
);
}
}

59
js/src/views/Group/GroupSettings.vue
View file

@ -47,6 +47,7 @@
:textFallback="$t('Avatar')"
v-model="avatarFile"
:defaultImage="group.avatar"
:maxSize="avatarMaxSize"
/>
</b-field>
@ -55,6 +56,7 @@
:textFallback="$t('Banner')"
v-model="bannerFile"
:defaultImage="group.banner"
:maxSize="bannerMaxSize"
/>
</b-field>
<p class="label">{{ $t("Group visibility") }}</p>
@ -158,6 +160,9 @@
}}</b-button>
</div>
</form>
<b-message type="is-danger" v-for="(value, index) in errors" :key="index">
{{ value }}
</b-message>
</section>
<b-message v-else>
{{ $t("You are not an administrator for this group.") }}
@ -177,6 +182,10 @@ import RouteName from "../../router/name";
import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
import { IGroup, usernameWithDomain } from "../../types/actor";
import { Address, IAddress } from "../../types/address.model";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import { ErrorResponse } from "apollo-link-error";
import { ServerParseError } from "apollo-link-http-common";
@Component({
components: {
@ -184,14 +193,21 @@ import { Address, IAddress } from "../../types/address.model";
PictureUpload,
editor: () => import("../../components/Editor.vue"),
},
apollo: {
config: CONFIG,
},
})
export default class GroupSettings extends mixins(GroupMixin) {
loading = true;
RouteName = RouteName;
config!: IConfig;
newMemberUsername = "";
errors: string[] = [];
avatarFile: File | null = null;
bannerFile: File | null = null;
@ -205,12 +221,16 @@ export default class GroupSettings extends mixins(GroupMixin) {
showCopiedTooltip = false;
async updateGroup(): Promise<void> {
const variables = this.buildVariables();
await this.$apollo.mutate<{ updateGroup: IGroup }>({
mutation: UPDATE_GROUP,
variables,
});
this.$notifier.success(this.$t("Group settings saved") as string);
try {
const variables = this.buildVariables();
await this.$apollo.mutate<{ updateGroup: IGroup }>({
mutation: UPDATE_GROUP,
variables,
});
this.$notifier.success(this.$t("Group settings saved") as string);
} catch (err) {
this.handleError(err);
}
}
confirmDeleteGroup(): void {
@ -299,5 +319,32 @@ export default class GroupSettings extends mixins(GroupMixin) {
get currentAddress(): IAddress {
return new Address(this.group.physicalAddress);
}
get avatarMaxSize(): number | undefined {
return this?.config?.uploadLimits?.avatar;
}
get bannerMaxSize(): number | undefined {
return this?.config?.uploadLimits?.banner;
}
private handleError(err: ErrorResponse) {
if (err?.networkError?.name === "ServerParseError") {
const error = err?.networkError as ServerParseError;
if (error?.response?.status === 413) {
this.errors.push(
this.$t(
"Unable to create the group. One of the pictures may be too heavy."
) as string
);
}
}
this.errors.push(
...(err.graphQLErrors || []).map(
({ message }: { message: string }) => message
)
);
}
}
</script>