c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 Pull requests Projects 2 Releases Wiki Activity Actions

implement an image selection button (from files)

Browse source
This commit is contained in:
busti 2019-12-28 05:27:54 +01:00
parent 9797a5e137
commit 192ade42a5
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/inputs/InputPhoto.vue
View file

@ -20,6 +20,10 @@
</div>
</div>
<div class="row m-auto">
<label for="file" class="btn btn-info my-2">
<font-awesome-icon icon="save"/>&nbsp;Upload&nbsp;an&nbsp;image&nbsp;instead
</label>
<input type="file" id="file" accept="image/png" class="d-none" @change="onFileChange($event)">
<button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
<font-awesome-icon icon="camera"/>
</button>
@ -40,6 +44,8 @@
</template>
<script>
import { mapMutations } from 'vuex';
export default {
name: 'InputPhoto',
props: [ 'model', 'field', 'onCapture' ],
@ -50,6 +56,7 @@ export default {
dataImage: undefined
}),
methods: {
...mapMutations(['createToast']),
openStream() {
if (!this.capturing) {
this.capturing = true;
@ -82,6 +89,21 @@ export default {
this.capturing = false;
this.streaming = false;
}
},
onFileChange({ target }) {
const file = target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
const self = this;
reader.onload = function () {
self.dataImage = reader.result;
self.onCapture(this.dataImage);
self.closeStream();
};
reader.onerror = function (error) {
this.createToast({ title: 'Error: Failed to parse image file', message: error.toString(), color: 'danger' });
console.log('Error: ', error);
};
}
},
mounted() {

4
src/main.js
View file

@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
// fontawesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes);
library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave);
Vue.component('font-awesome-icon', FontAwesomeIcon);