j3d1/c3lf-system-3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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> </div>
<div class="row m-auto"> <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()"> <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
<font-awesome-icon icon="camera"/> <font-awesome-icon icon="camera"/>
</button> </button>
@ -40,6 +44,8 @@
</template> </template>
<script> <script>
import { mapMutations } from 'vuex';
export default { export default {
name: 'InputPhoto', name: 'InputPhoto',
props: [ 'model', 'field', 'onCapture' ], props: [ 'model', 'field', 'onCapture' ],
@ -50,6 +56,7 @@ export default {
dataImage: undefined dataImage: undefined
}), }),
methods: { methods: {
...mapMutations(['createToast']),
openStream() { openStream() {
if (!this.capturing) { if (!this.capturing) {
this.capturing = true; this.capturing = true;
@ -82,6 +89,21 @@ export default {
this.capturing = false; this.capturing = false;
this.streaming = 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() { mounted() {

4
src/main.js
View file

@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
// fontawesome // fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'; 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'; 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); Vue.component('font-awesome-icon', FontAwesomeIcon);