Sha256: 1f71a2f4b5963672813d249d71632b220733c00370d25da9c868f92bfa35afb7
Contents?: true
Size: 1.78 KB
Versions: 22
Compression:
Stored size: 1.78 KB
Contents
import { CocoComponent } from "@assets/js/coco/component";
export default CocoComponent("imageUploader", ({ click, drop }) => {
return {
file: null,
errors: [],
active: false,
clickable: click,
droppable: drop,
input: null,
get fileName() {
return this.file && this.file.name;
},
get fileType() {
return this.file && this.file.type;
},
get fileSize() {
return this.file && this.file.size;
},
get fileData() {
return this.file && this.file.data;
},
init() {
this.input = this.$refs.input;
this.$watch("file", (file) => {
const dataTransfer = new DataTransfer();
if (file && file.file instanceof File) {
dataTransfer.items.add(file.file);
}
this.input.files = dataTransfer.files;
});
},
setFile(file) {
this.file = file;
},
openPicker() {
this.input.click();
},
clear() {
this.file = null;
this.input.value = null;
this.$dispatch("image-uploader:clear");
},
handleDrop(event) {
const files = event.detail.files || event.dataTransfer.files;
this.handleFiles(files);
},
handleFiles(files) {
Array.from(files).forEach((file) => this.readFile(file));
},
readFile(file) {
const reader = new FileReader();
reader.addEventListener("load", () => {
this.file = {
name: file.name,
size: file.size,
type: file.type,
file: file,
data: reader.result,
};
this.$dispatch("image-uploader:load", { file: this.file });
});
reader.addEventListener("error", () => {
this.errors.push(`Error reading file: ${file.name}`);
});
reader.readAsDataURL(file);
},
};
});
Version data entries
22 entries across 22 versions & 1 rubygems