Sha256: 018ce9e2f7ab43caa3c1a9d53eea8365fd091e7e7944f485a50f2f00f4a33680
Contents?: true
Size: 1.83 KB
Versions: 4
Compression:
Stored size: 1.83 KB
Contents
<template>
<div>
<submit-button
type="button"
class="rounded-sm text-white py-2 px-4"
defaultColorClass="bg-editor-primary"
:labels="$t('imageLibrary.uploader.uploadButton')"
:buttonState="uploadingState"
@click="openFileDialog"
/>
<input
type="file"
ref="input"
accept="image/*"
:multiple="multiple"
@change="addFiles"
class="hidden"
/>
</div>
</template>
<script>
import { numberToHumanSize } from '@/utils'
export default {
name: 'ImageLibraryUploader',
props: {
maxsize: { type: Number, default: 2048144 },
multiple: { type: Boolean, default: false },
},
data() {
return { uploadingState: 'default' }
},
methods: {
openFileDialog() {
this.$refs.input.click()
},
addFiles() {
const allowedFiles = this.checkFiles()
if (allowedFiles) {
this.uploadingState = 'inProgress'
Promise.all(
allowedFiles.map((file) => this.services.image.create({ file })),
)
.then(() => {
this.uploadingState = 'success'
this.$emit('uploaded')
})
.catch((error) => {
this.uploadingState = 'fail'
console.log(
'[Maglev] Uploader failed. Check your server logs',
error,
)
})
} else {
alert(
this.$t('imageLibrary.uploader.wrongFiles', {
limit: numberToHumanSize(this.maxsize),
}),
)
}
},
checkFiles() {
let allowedFiles = []
const files = this.$refs.input.files
for (var i = 0; i < files.length; i++) {
const file = files[i]
if (file && file.size < this.maxsize) {
allowedFiles.push(file)
} else return false
}
return allowedFiles
},
},
}
</script>
Version data entries
4 entries across 4 versions & 1 rubygems