Skip to content

Commit a68ba3c

Browse files
thooyorkthooyork
committed
fix image upload
1 parent ba328d3 commit a68ba3c

File tree

2 files changed

+159
-68
lines changed

2 files changed

+159
-68
lines changed

‎client/src/components/ImagePreview.vue

+72-21
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,103 @@
11
<template>
2-
<div class="img-container">
3-
<img :src="dataUrl" class="img-thumbnail" v-on:dragstart="onDragStart($event)" :draggable="showPaste" />
4-
<div>
5-
<code>{{ hash.substring(0, Math.min(10, hash.length)) }}</code>
6-
<strong :title="value.name">{{ value.name }}</strong
7-
><span>{{ convertToHumanReadableFileSize(value.size) }}</span
8-
><br class="mb-1" />
9-
<button class="btn btn-primary mx-1" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
2+
<div class="preview-container">
3+
<div class="img-container">
4+
<img :src="dataUrl" v-on:dragstart="onDragStart($event)" :draggable="showPaste" />
5+
</div>
6+
<div class="info-container">
7+
<div class="code">{{ hash.substring(0, Math.min(7, hash.length)) }} / {{ convertToHumanReadableFileSize(value.size) }}</div>
8+
<strong :title="value.name">{{ value.name }}</strong>
9+
<button class="btn btn-paste mx-1" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
1010
<fa-icon :icon="faPaste"></fa-icon>
1111
</button>
12-
<button class="btn btn-outline-danger mx-1" v-if="showDelete" @click="$emit('delete')"><fa-icon :icon="faTrash"></fa-icon></button>
12+
<button class="btn btn-delete mx-1" v-if="showDelete" @click="$emit('delete')"><fa-icon :icon="faTrash"></fa-icon></button>
1313
</div>
1414
</div>
1515
</template>
1616
<style scoped lang="scss">
17-
div.img-container {
18-
width: 12rem;
19-
margin: 0.25rem;
17+
.preview-container {
18+
width: 150px;
19+
margin: 0;
2020
position: relative;
2121
display: inline-block;
2222
text-align: center;
23-
vertical-align: bottom;
23+
background-color: #f8f9fa55;
24+
border-radius: 0.375rem;
25+
border: 1px solid #ccc;
26+
27+
.btn-paste {
28+
color: #222;
29+
&:hover {
30+
color: #22222255;
31+
}
32+
}
33+
34+
.btn-delete {
35+
color: #a00;
36+
&:hover {
37+
color: #e00;
38+
}
39+
}
40+
41+
&:hover {
42+
img {
43+
transition-duration: 0.3s;
44+
opacity: 1;
45+
}
46+
}
47+
48+
&:not(:last-child) {
49+
margin-right: 10px;
50+
}
51+
52+
.img-container {
53+
display: flex;
54+
width: 148px;
55+
height: auto;
56+
aspect-ratio: 1/1;
57+
align-items: center;
58+
justify-content: center;
59+
padding: 0;
60+
margin: 0;
61+
// border:1px solid red;
62+
}
2463
2564
img {
65+
transition-duration: 0.3s;
66+
display: flex;
67+
border: 1px solid #999;
68+
2669
&[draggable="true"] {
2770
cursor: move;
2871
}
2972
30-
min-width: 2rem;
31-
min-height: 2rem;
32-
max-width: 12rem;
33-
max-height: 12rem;
73+
// margin-left:-4px;
74+
75+
max-width: 134px;
76+
max-height: 134px;
77+
opacity: 0.75;
78+
margin: 0;
79+
padding: 0;
3480
}
3581
36-
div {
82+
.info-container {
3783
font-size: 0.75em;
84+
margin-bottom: 7px;
85+
padding-top: 5px;
3886
3987
strong {
4088
font-weight: bold;
4189
text-overflow: ellipsis;
4290
white-space: nowrap;
4391
overflow: clip;
4492
display: block;
93+
padding: 0 5px 7px 5px;
4594
}
4695
47-
display: block;
48-
padding-bottom: 0.5rem;
49-
margin-bottom: 0.5rem;
96+
.code {
97+
font-family: monospace;
98+
font-size: 10px;
99+
margin-bottom: 5px;
100+
}
50101
}
51102
}
52103
</style>

‎client/src/views/PostFormView.vue

+87-47
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,54 @@
6262
<label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>
6363
</div>
6464

65+
<div class="form-floating mb-3 uploadCard">
66+
<h4>
67+
{{ tc("posts.form.imageupload", Object.keys(files).length) }}
68+
<small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
69+
({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
70+
</small>
71+
</h4>
72+
<!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
73+
<input
74+
style="display: none"
75+
type="file"
76+
id="file"
77+
multiple
78+
v-on:change="handleFileChange($event)"
79+
accept=".png, .gif, .jpg, .jpeg, image/png, image/jpeg, image/gif"
80+
/>
81+
82+
<div class="imagesPreviewContaier" v-if="Object.keys(files).length">
83+
<div class="inner">
84+
<Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
85+
<ImagePreview
86+
:value="files[hash]"
87+
:hash="hash"
88+
@paste="pasteImageFileToMarkdown($event, 'afterCursor')"
89+
@delete="
90+
removeImageFileFromMarkdown(files[hash]);
91+
delete files[hash];
92+
"
93+
>
94+
</ImagePreview>
95+
</Suspense>
96+
</div>
97+
</div>
98+
99+
<div
100+
id="dropzone"
101+
v-on:click="openFileDialog()"
102+
v-on:drop="handleFileChange($event)"
103+
v-on:dragover="highlightDropzone($event, true)"
104+
v-on:dragleave="highlightDropzone($event, false)"
105+
:class="{ active: dropzoneHighlight }"
106+
>
107+
<div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
108+
<span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
109+
<span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
110+
</div>
111+
</div>
112+
65113
<button type="submit" class="btn btn-sm btn-primary float-end">{{ t("app.base.save") }}</button>
66114
<button type="button" class="btn btn-sm btn-secondary float-end mx-3" @click="router.go(-1)">
67115
{{ t("app.base.cancel") }}
@@ -88,49 +136,6 @@
88136
</div>
89137
</div>
90138
</div>
91-
<div class="card mb-4 box-shadow h-md-250">
92-
<div class="card-body">
93-
<h3>
94-
{{ tc("posts.form.imageupload", Object.keys(files).length) }}
95-
<small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0"
96-
>({{ convertToHumanReadableFileSize(totalBytesInFiles) }})</small
97-
>
98-
</h3>
99-
<!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
100-
<input
101-
style="display: none"
102-
type="file"
103-
id="file"
104-
multiple
105-
v-on:change="handleFileChange($event)"
106-
accept=".png, .gif, .jpg, .jpeg, image/png, image/jpeg, image/gif"
107-
/>
108-
<div
109-
id="dropzone"
110-
v-on:click="openFileDialog()"
111-
v-on:drop="handleFileChange($event)"
112-
v-on:dragover="highlightDropzone($event, true)"
113-
v-on:dragleave="highlightDropzone($event, false)"
114-
:class="{ active: dropzoneHighlight }"
115-
>
116-
<div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
117-
<span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
118-
<span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
119-
</div>
120-
<Suspense v-for="hash in Object.keys(files)" v-bind:key="hash">
121-
<ImagePreview
122-
:value="files[hash]"
123-
:hash="hash"
124-
@paste="pasteImageFileToMarkdown($event, 'afterCursor')"
125-
@delete="
126-
removeImageFileFromMarkdown(files[hash]);
127-
delete files[hash];
128-
"
129-
>
130-
</ImagePreview>
131-
</Suspense>
132-
</div>
133-
</div>
134139
</div>
135140
<post-not-available v-else></post-not-available>
136141
</template>
@@ -147,19 +152,54 @@
147152
width: 50%;
148153
}
149154
155+
.uploadCard {
156+
border: 1px solid #404040;
157+
border-radius: 0.375rem;
158+
padding: 1rem;
159+
margin-top: 1rem;
160+
background-color: #dee2e6;
161+
}
162+
163+
.imagesPreviewContaier {
164+
width: 100%;
165+
max-width: 100%;
166+
min-width: 100%;
167+
position: relative;
168+
display: flex;
169+
flex-direction: column;
170+
margin: 0 0 10px 0;
171+
padding: 0;
172+
overflow-x: auto;
173+
height: auto;
174+
min-height: 290px;
175+
// border: 1px solid #222;
176+
// border-radius: 0.375rem;
177+
}
178+
179+
.inner {
180+
position: absolute;
181+
display: flex;
182+
flex-direction: row;
183+
width: 100%;
184+
max-width: 100%;
185+
min-width: 100%;
186+
}
187+
150188
#dropzone {
151-
color: #555;
189+
background-color: #f8f9fa55;
190+
border: 1px solid #ccc;
191+
color: #222;
152192
cursor: pointer;
153193
vertical-align: top;
154194
display: inline-block;
155-
width: 12rem;
156195
min-height: 15rem;
157196
padding: 1rem 0.25rem;
158-
margin: 0.25rem;
197+
margin: 0;
159198
text-align: center;
160-
border: 2px solid #ddd;
199+
border-radius: 0.375rem;
161200
box-shadow: inset 0 0 0 0 #ffc377;
162201
transition: 0.5s ease-out box-shadow, 3s ease border-color;
202+
width: 100%;
163203
164204
.plus {
165205
font-size: 5rem;

0 commit comments

Comments
 (0)