Skip to content

Commit 2eee3f6

Browse files
Shanon LeeShanon Lee
Shanon Lee
authored and
Shanon Lee
committed
Fix functionality to upload an image; clearing image is WIP
1 parent 5e011da commit 2eee3f6

File tree

5 files changed

+175
-12
lines changed

5 files changed

+175
-12
lines changed

‎src-electron/electron-main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ ipcMain.handle("openProject", async (event, arg) => {
5757
return result;
5858
});
5959

60+
// Handle dialogs for uploading a mockup image
61+
ipcMain.handle("uploadImage", async (event, arg) => {
62+
const result = await dialog.showOpenDialog(arg);
63+
return result;
64+
})
65+
66+
6067
// ************** Slack OAuth functions **********************
6168
// Sends request to Slack for User's information,
6269
// then sends user information back to renderer process

‎src/components/ComponentDisplay.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default {
208208
? {
209209
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
210210
}
211-
: {};
211+
: { };
212212
},
213213
},
214214
updated() {

‎src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
33
<template>
44
<q-card id="store-cards">
5-
<!-- <UploadImage v-if="activeComponent === ''"/> -->
5+
<UploadImage v-if="activeComponent === ''"/>
66
<CreateComponent v-if="activeComponent === ''"/>
77
<EditDeleteComponents v-if="activeComponent !== ''"/>
88
</q-card>
@@ -12,7 +12,7 @@ Functionality includes: if active component is selected, will switch view to edi
1212
import CreateComponent from './CreateComponent.vue'
1313
import EditDeleteComponents from './EditDeleteComponents.vue'
1414
import { mapState } from 'vuex'
15-
// import UploadImage from '../UploadImage.vue'
15+
import UploadImage from '../UploadImage.vue'
1616
export default {
1717
data () {
1818
return {
@@ -27,7 +27,7 @@ export default {
2727
components: {
2828
CreateComponent,
2929
EditDeleteComponents,
30-
// UploadImage,
30+
UploadImage,
3131
}
3232
}
3333
</script>

‎src/components/home_sidebar_items/UploadImage.vue

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!--
2+
Description:
3+
Displays Mockup Image upload dropdown as well as minified mockup image once selected
4+
Functionality includes: importing and clearing mockup image
5+
-->
6+
7+
<template>
8+
<div class="home-sidebar drawer-menu">
9+
<q-list>
10+
<q-expansion-item expand-separator label="Upload Mockup Image">
11+
<div class="upload">
12+
<q-btn class="upload-btn" color="secondary" label="Upload Mockup" @click="importMockup" />
13+
<q-btn
14+
v-if="source !== ''"
15+
class="upload-btn"
16+
color="secondary"
17+
label="Clear Image"
18+
@click="removeImage"
19+
/>
20+
<q-btn v-else disable class="upload-btn" color="secondary" label="Clear Image" />
21+
</div>
22+
<div class="file-path">
23+
<q-card>
24+
<img class='img' v-if='this.imagePath[this.activeRoute] !== ""' :src="'file:///' + this.imagePath[this.activeRoute]"/>
25+
</q-card>
26+
</div>
27+
</q-expansion-item>
28+
</q-list>
29+
</div>
30+
</template>
31+
32+
<script>
33+
import { mapState, mapActions } from 'vuex'
34+
import uploadImage from '../../utils/uploadImage.util'
35+
import clearImageDialog from '../../utils/clearImage.util'
36+
37+
export default {
38+
name: 'upload-image',
39+
data () {
40+
return {
41+
files: [],
42+
source: ''
43+
}
44+
},
45+
computed: {
46+
...mapState(['imagePath', 'activeRoute'])
47+
},
48+
methods: {
49+
...mapActions(['importImage', 'clearImage']),
50+
// imports mockup image
51+
// ** Importing mockup image ONLY works in build mode due to path differences
52+
// In dev mode, error thrown is: "Not allowed to load local resource: PATH "
53+
importMockup () {
54+
// A promise gets returned out from uploadImage, imported from uploadImage utils
55+
const helperPromise = uploadImage()
56+
helperPromise
57+
// res contains the selected file path (string)
58+
.then(res => {
59+
if (this.activeRoute !== '') {
60+
this.importImage({ img: res, route: this.activeRoute })
61+
if (this.imagePath[this.activeRoute]) {
62+
this.source = 'file:///' + this.imagePath[this.activeRoute]
63+
}
64+
}
65+
})
66+
.catch(err => console.log(err))
67+
},
68+
// removes mockup image
69+
removeImage () {
70+
const res = clearImageDialog()
71+
// console.log('REMOVEIMAGE: remove is ', res )
72+
if (res === 0) {
73+
this.clearImage({ route: this.activeRoute })
74+
this.source = this.imagePath[this.activeRoute]
75+
}
76+
},
77+
// imports image on browser
78+
// currently images aren't able to be stored on browser
79+
async importMockupBrowser () {
80+
// console.log(`importMockupBrowser: ${this.$refs.myFiles.files}`)
81+
this.files = this.$refs.myFiles.files[0]
82+
await this.importImage(this.files.name)
83+
// await console.log(this.files.name)
84+
},
85+
// removes image on browser
86+
removeImageBrowser () {
87+
this.clearImage()
88+
}
89+
},
90+
// watches for changes in state to activeRoute
91+
watch: {
92+
// once you change your active route, the mockup image should change as well
93+
activeRoute: function () {
94+
// console.log('Route has changed')
95+
if (this.imagePath[this.activeRoute]) {
96+
// if there is a uploaded image
97+
this.source = 'file:///' + this.imagePath[this.activeRoute]
98+
} else {
99+
this.source = ''
100+
}
101+
}
102+
}
103+
}
104+
</script>
105+
106+
<style lang="scss">
107+
.home-sidebar {
108+
margin: 1rem;
109+
justify-content: center;
110+
border-radius: 5px;
111+
padding: 0px;
112+
background: $subsecondary;
113+
}
114+
115+
.upload-btn {
116+
text-transform: capitalize;
117+
font-size: 12px;
118+
}
119+
120+
.upload {
121+
margin: 0.5rem;
122+
display: flex;
123+
justify-content: space-evenly;
124+
}
125+
126+
.file-path {
127+
padding-bottom: 1em;
128+
height: 100%;
129+
margin: 1rem;
130+
font-size: 11px;
131+
}
132+
133+
.file-header {
134+
padding-left: 0.4em;
135+
}
136+
137+
.file-content {
138+
padding: 0em 1em 1em 1em;
139+
}
140+
141+
.browser-btn {
142+
width: 90px;
143+
background: $secondary;
144+
}
145+
146+
.img {
147+
max-height: 200px;
148+
}
149+
</style>

‎src/utils/uploadImage.util.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Telling main Electron process to open a dialog for open an image file
2-
const { dialog } = require('electron').remote
2+
// const { dialog } = require('electron').remote
3+
const { ipcRenderer } = window;
34

45
const types = [
56
{
@@ -18,13 +19,19 @@ const options = {
1819
* @returns { String } file path
1920
*/
2021

21-
const uploadImage = () => {
22-
const output = dialog.showOpenDialog(options)
23-
if (output) {
24-
// console.log('image output', output)
25-
return output[0]
26-
}
27-
return ''
22+
// Used in uploadImage.vue
23+
const uploadImage = async () => {
24+
const x = await ipcRenderer.invoke('uploadImage', options)
25+
.then(res => {
26+
console.log('upload image util: ' + res.filePaths[0]);
27+
return res.filePaths[0]
28+
})
29+
.catch(err => {
30+
console.log(err);
31+
return err;
32+
})
33+
34+
return x;
2835
}
2936

3037
export default uploadImage

0 commit comments

Comments
 (0)