jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload image button working

Browse Source
This commit is contained in:
Thaum Rystra
2024-08-29 15:30:13 +02:00
parent 9ce76dcd0c
commit 8eabd16601
4 changed files with 103 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/imports/client/ui/components/ImageUploadInput.vue
View File

@@ -1,14 +1,34 @@
<template>
<div class="file-upload-input">
<v-file-input
v-model="file"
v-bind="$attrs"
accept="image/*"
/>
<v-btn
outlined
class="image-upload-button ma-1"
v-bind="$attrs"
:color="fileUploadError ? 'error' : undefined"
:disabled="fileUploadInProgress"
@click="$refs.hiddenFileInput.click()"
>
<v-icon left>
mdi-file-upload-outline
</v-icon>
<template v-if="fileUploadError">
{{ fileUploadError }}
</template>
<template v-else>
Upload Image
</template>
<v-progress-linear
:progress="progress"
v-if="fileUploadInProgress"
:value="fileUploadProgress"
:indeterminate="fileUploadIndeterminate"
/>
</div>
<input
ref="hiddenFileInput"
type="file"
accept="image/*"
style="display: none;"
@input="inputChange"
>
</v-btn>
</template>
<script lang="js">
@@ -25,48 +45,60 @@ export default {
if (!file) return;
let self = this;
let uploadInstance = UserImages.insert({
file: file,
/*meta: {
userId: Meteor.userId() // Optional, used to check on server for file tampering
},*/
chunkSize: 'dynamic',
allowWebWorkers: true // If you see issues with uploads, change this to false
}, false)
file: file,
chunkSize: 'dynamic',
allowWebWorkers: true
}, false)
// These are the event functions, don't need most of them, it shows where we are in the process
uploadInstance.on('start', function () {
console.log('Starting');
this.uploadingInProgress = true;
});
uploadInstance.on('start', function () {
console.log('Starting');
this.uploadingInProgress = true;
});
uploadInstance.on('end', function (error, fileObj) {
console.log('On end File Object: ', fileObj);
this.uploadingInProgress = false;
});
uploadInstance.on('end', function (error, fileObj) {
console.log('On end File Object: ', fileObj);
this.uploadingInProgress = false;
self.$emit('uploaded', UserImages.link(fileObj));
});
uploadInstance.on('uploaded', function (error, fileObj) {
console.log('uploaded: ', fileObj);
uploadInstance.on('uploaded', function (error, fileObj) {
console.log('uploaded: ', fileObj);
// Remove the file from the input box
self.file = undefined;
// Remove the file from the input box
self.file = undefined;
// Reset our state for the next file
self.uploadingInProgress = false;
self.progress = 0;
});
// Reset our state for the next file
self.uploadingInProgress = false;
self.progress = 0;
});
uploadInstance.on('error', function (error, fileObj) {
console.log('Error during upload: ' + error, fileObj)
});
uploadInstance.on('error', function (error, fileObj) {
// Remove the file from the input box
self.file = undefined;
uploadInstance.on('progress', function (progress, fileObj) {
console.log('Upload Percentage: ' + progress, fileObj)
// Update our progress bar
self.progress = progress;
});
// Reset our state for the next file
self.uploadingInProgress = false;
self.progress = 0;
console.log('Error during upload: ' + error, fileObj)
});
uploadInstance.start(); // Must manually start the upload
}
uploadInstance.on('progress', function (progress, fileObj) {
console.log('Upload Percentage: ' + progress, fileObj)
// Update our progress bar
self.progress = progress;
});
uploadInstance.start(); // Must manually start the upload
},
},
methods: {
inputChange(e) {
if (!e.target) return;
const { files: selectedFiles } = e.target;
if (!selectedFiles) return;
this.file = selectedFiles[0];
return;
}
},
}

50
app/imports/client/ui/components/global/SmartImageInput.vue
View File

@@ -45,7 +45,7 @@
<script lang="js">
/*
<v-file-input
<v-file-input
v-cloak
ref="input"
v-bind="$attrs"
@@ -114,54 +114,6 @@ export default {
}
},
},
watch: {
file(file){
if (!file) return;
let self = this;
let uploadInstance = UserImages.insert({
file: file,
/*meta: {
userId: Meteor.userId() // Optional, used to check on server for file tampering
},*/
chunkSize: 'dynamic',
allowWebWorkers: true // If you see issues with uploads, change this to false
}, false)
// These are the event functions, don't need most of them, it shows where we are in the process
uploadInstance.on('start', function () {
console.log('Starting');
this.uploadingInProgress = true;
});
uploadInstance.on('end', function (error, fileObj) {
console.log('On end File Object: ', fileObj);
this.uploadingInProgress = false;
});
uploadInstance.on('uploaded', function (error, fileObj) {
console.log('uploaded: ', fileObj);
// Remove the file from the input box
self.file = undefined;
// Reset our state for the next file
self.uploadingInProgress = false;
self.progress = 0;
});
uploadInstance.on('error', function (error, fileObj) {
console.log('Error during upload: ' + error, fileObj)
});
uploadInstance.on('progress', function (progress, fileObj) {
console.log('Upload Percentage: ' + progress, fileObj)
// Update our progress bar
self.progress = progress;
});
uploadInstance.start(); // Must manually start the upload
}
},
methods: {
openImageInputDialog() {
this.$store.commit('pushDialogStack', {

74
app/imports/client/ui/files/userImages/ImageInputDialog.vue
View File

@@ -25,43 +25,25 @@
<v-img
v-for="file in userImages"
:key="file._id"
:data-id="`image-${file._id}`"
:data-id="file._id"
class="user-image ma-1 v-sheet"
:class="{'elevation-4': file.href === href}"
:class="{'elevation-4': file.link === href}"
height="250"
:src="file.href"
@click="selectUserImage(file.href)"
:src="file.link"
@click="selectUserImage(file.link)"
>
<v-btn
class="zoom-button"
icon
@click.stop="previewImage(file._id, file.href)"
@click.stop="previewImage(file)"
>
<v-icon>mdi-magnify-plus</v-icon>
</v-btn>
</v-img>
<v-btn
outlined
class="upload-image-button ma-1"
:color="fileUploadError ? 'error' : undefined"
:disabled="fileUploadInProgress"
@click="$refs.archiveFileInput.click()"
>
<v-icon left>
mdi-file-upload-outline
</v-icon>
<template v-if="fileUploadError">
{{ fileUploadError }}
</template>
<template v-else>
Upload Image
</template>
<v-progress-linear
v-if="fileUploadInProgress"
:value="fileUploadProgress"
:indeterminate="fileUploadIndeterminate"
/>
</v-btn>
<image-upload-input
style="height: 250px;"
@uploaded="link => selectUserImage(link)"
/>
<div style="height: 0;" />
<div style="height: 0;" />
<div style="height: 0;" />
@@ -108,11 +90,15 @@
</template>
<script lang="js">
import UserImages from '/imports/api/files/userImages/UserImages';
import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
import ImageUploadInput from '/imports/client/ui/components/ImageUploadInput.vue';
import prettyBytes from 'pretty-bytes';
export default {
components: {
DialogBase,
ImageUploadInput,
},
props: {
href: {
@@ -129,33 +115,27 @@ export default {
},
meteor: {
userImages() {
// return UserImages.find({});
return [
const userId = Meteor.userId();
return UserImages.find(
{
_id: '1',
name: 'Example image 1',
href: 'https://picsum.photos/1000/1000',
},
{
_id: '2',
name: 'Example image 2',
href: 'https://picsum.photos/500/600',
},
{
_id: '3',
name: 'Example image 3',
href: 'https://picsum.photos/850/700',
},
]
userId,
}, {
sort: {'size': -1},
}
).map(f => {
f.size = prettyBytes(f.size);
f.link = UserImages.link(f);
return f;
});
},
},
methods: {
previewImage(id, href) {
previewImage(file) {
this.$store.commit('pushDialogStack', {
component: 'image-preview-dialog',
elementId: `image-${id}`,
elementId: file._id,
data: {
href: href,
href: file.link,
},
});
},

1
app/imports/client/ui/pages/Files.vue
View File

@@ -145,6 +145,7 @@ export default {
meteor: {
$subscribe: {
'archiveCreatureFiles': [],
'userImages': [],
'characterList': [],
},
archiveFiles() {