Avatar, background, banner filesize errors

This commit is contained in:
Rinpatch 2018-12-11 16:02:35 +03:00
parent 6a00854189
commit 25a04f2294
2 changed files with 52 additions and 0 deletions

View file

@ -1,9 +1,13 @@
import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
import StyleSwitcher from '../style_switcher/style_switcher.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
const UserSettings = { const UserSettings = {
data () { data () {
return { return {
avataruploaderror: null,
backgrounduploaderror: null,
banneruploaderror: null,
newname: this.$store.state.users.currentUser.name, newname: this.$store.state.users.currentUser.name,
newbio: this.$store.state.users.currentUser.description, newbio: this.$store.state.users.currentUser.description,
newlocked: this.$store.state.users.currentUser.locked, newlocked: this.$store.state.users.currentUser.locked,
@ -69,6 +73,29 @@ const UserSettings = {
uploadFile (slot, e) { uploadFile (slot, e) {
const file = e.target.files[0] const file = e.target.files[0]
if (!file) { return } if (!file) { return }
var limit = 0
var error = () => {}
switch (slot) {
case 0:
limit = this.$store.state.instance.avatarlimit
error = (error) => { this.avataruploaderror = error }
break
case 1:
limit = this.$store.state.instance.bannerlimit
error = (error) => { this.banneruploaderror = error }
break
case 2:
limit = this.$store.state.instance.backgroundlimit
error = (error) => { this.backgrounduploaderror = error }
}
console.log(this.$store)
console.log(file.size + ' ' + slot + ' ' + limit)
if (file.size > limit) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(limit)
error(this.$t('post_status.upload_error_file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
return
}
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const reader = new FileReader() const reader = new FileReader()
reader.onload = ({target}) => { reader.onload = ({target}) => {
@ -107,6 +134,19 @@ const UserSettings = {
this.uploading[0] = false this.uploading[0] = false
}) })
}, },
clearUploadError (slot) {
switch (slot) {
case 0:
this.avataruploaderror = null
break
case 1:
this.banneruploaderror = null
break
case 2:
this.backgrounduploaderror = null
break
}
},
submitBanner () { submitBanner () {
if (!this.previews[1]) { return } if (!this.previews[1]) { return }

View file

@ -43,6 +43,10 @@
</div> </div>
<i class="icon-spin4 animate-spin" v-if="uploading[0]"></i> <i class="icon-spin4 animate-spin" v-if="uploading[0]"></i>
<button class="btn btn-default" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
<div class='alert error' v-if="avataruploaderror">
Error: {{ avataruploaderror }}
<i class="icon-cancel" @click="clearUploadError(0)"></i>
</div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.profile_banner')}}</h2> <h2>{{$t('settings.profile_banner')}}</h2>
@ -56,6 +60,10 @@
</div> </div>
<i class=" icon-spin4 animate-spin uploading" v-if="uploading[1]"></i> <i class=" icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
<button class="btn btn-default" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
<div class='alert error' v-if="banneruploaderror">
Error: {{ banneruploaderror }}
<i class="icon-cancel" @click="clearUploadError(1)"></i>
</div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.profile_background')}}</h2> <h2>{{$t('settings.profile_background')}}</h2>
@ -67,6 +75,10 @@
</div> </div>
<i class=" icon-spin4 animate-spin uploading" v-if="uploading[2]"></i> <i class=" icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
<button class="btn btn-default" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
<div class='alert error' v-if="backgrounduploaderror">
Error: {{ backgrounduploaderror }}
<i class="icon-cancel" @click="clearUploadError(2)"></i>
</div>
</div> </div>
</div> </div>