Skip to content

Commit

Permalink
fix image upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@thooyork
thooyork committed Jun 13, 2024
1 parent ba328d3 commit a68ba3c
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 68 deletions.
93 changes: 72 additions & 21 deletions client/src/components/ImagePreview.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,103 @@
<template>
<div class="img-container">
<img :src="dataUrl" class="img-thumbnail" v-on:dragstart="onDragStart($event)" :draggable="showPaste" />
<div>
<code>{{ hash.substring(0, Math.min(10, hash.length)) }}</code>
<strong :title="value.name">{{ value.name }}</strong
><span>{{ convertToHumanReadableFileSize(value.size) }}</span
><br class="mb-1" />
<button class="btn btn-primary mx-1" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
<div class="preview-container">
<div class="img-container">
<img :src="dataUrl" v-on:dragstart="onDragStart($event)" :draggable="showPaste" />
</div>
<div class="info-container">
<div class="code">{{ hash.substring(0, Math.min(7, hash.length)) }} / {{ convertToHumanReadableFileSize(value.size) }}</div>
<strong :title="value.name">{{ value.name }}</strong>
<button class="btn btn-paste mx-1" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
<fa-icon :icon="faPaste"></fa-icon>
</button>
<button class="btn btn-outline-danger mx-1" v-if="showDelete" @click="$emit('delete')"><fa-icon :icon="faTrash"></fa-icon></button>
<button class="btn btn-delete mx-1" v-if="showDelete" @click="$emit('delete')"><fa-icon :icon="faTrash"></fa-icon></button>
</div>
</div>
</template>
<style scoped lang="scss">
div.img-container {
width: 12rem;
margin: 0.25rem;
.preview-container {
width: 150px;
margin: 0;
position: relative;
display: inline-block;
text-align: center;
vertical-align: bottom;
background-color: #f8f9fa55;
border-radius: 0.375rem;
border: 1px solid #ccc;
.btn-paste {
color: #222;
&:hover {
color: #22222255;
}
}
.btn-delete {
color: #a00;
&:hover {
color: #e00;
}
}
&:hover {
img {
transition-duration: 0.3s;
opacity: 1;
}
}
&:not(:last-child) {
margin-right: 10px;
}
.img-container {
display: flex;
width: 148px;
height: auto;
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
// border:1px solid red;
}
img {
transition-duration: 0.3s;
display: flex;
border: 1px solid #999;
&[draggable="true"] {
cursor: move;
}
min-width: 2rem;
min-height: 2rem;
max-width: 12rem;
max-height: 12rem;
// margin-left:-4px;
max-width: 134px;
max-height: 134px;
opacity: 0.75;
margin: 0;
padding: 0;
}
div {
.info-container {
font-size: 0.75em;
margin-bottom: 7px;
padding-top: 5px;
strong {
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: clip;
display: block;
padding: 0 5px 7px 5px;
}
display: block;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
.code {
font-family: monospace;
font-size: 10px;
margin-bottom: 5px;
}
}
}
</style>
Expand Down
134 changes: 87 additions & 47 deletions client/src/views/PostFormView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,54 @@
<label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>
</div>

<div class="form-floating mb-3 uploadCard">
<h4>
{{ tc("posts.form.imageupload", Object.keys(files).length) }}
<small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
</small>
</h4>
<!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
<input
style="display: none"
type="file"
id="file"
multiple
v-on:change="handleFileChange($event)"
accept=".png, .gif, .jpg, .jpeg, image/png, image/jpeg, image/gif"
/>

<div class="imagesPreviewContaier" v-if="Object.keys(files).length">
<div class="inner">
<Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
<ImagePreview
:value="files[hash]"
:hash="hash"
@paste="pasteImageFileToMarkdown($event, 'afterCursor')"
@delete="
removeImageFileFromMarkdown(files[hash]);
delete files[hash];
"
>
</ImagePreview>
</Suspense>
</div>
</div>

<div
id="dropzone"
v-on:click="openFileDialog()"
v-on:drop="handleFileChange($event)"
v-on:dragover="highlightDropzone($event, true)"
v-on:dragleave="highlightDropzone($event, false)"
:class="{ active: dropzoneHighlight }"
>
<div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
<span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
<span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
</div>
</div>

<button type="submit" class="btn btn-sm btn-primary float-end">{{ t("app.base.save") }}</button>
<button type="button" class="btn btn-sm btn-secondary float-end mx-3" @click="router.go(-1)">
{{ t("app.base.cancel") }}
Expand All @@ -88,49 +136,6 @@
</div>
</div>
</div>
<div class="card mb-4 box-shadow h-md-250">
<div class="card-body">
<h3>
{{ tc("posts.form.imageupload", Object.keys(files).length) }}
<small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0"
>({{ convertToHumanReadableFileSize(totalBytesInFiles) }})</small
>
</h3>
<!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
<input
style="display: none"
type="file"
id="file"
multiple
v-on:change="handleFileChange($event)"
accept=".png, .gif, .jpg, .jpeg, image/png, image/jpeg, image/gif"
/>
<div
id="dropzone"
v-on:click="openFileDialog()"
v-on:drop="handleFileChange($event)"
v-on:dragover="highlightDropzone($event, true)"
v-on:dragleave="highlightDropzone($event, false)"
:class="{ active: dropzoneHighlight }"
>
<div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
<span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
<span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
</div>
<Suspense v-for="hash in Object.keys(files)" v-bind:key="hash">
<ImagePreview
:value="files[hash]"
:hash="hash"
@paste="pasteImageFileToMarkdown($event, 'afterCursor')"
@delete="
removeImageFileFromMarkdown(files[hash]);
delete files[hash];
"
>
</ImagePreview>
</Suspense>
</div>
</div>
</div>
<post-not-available v-else></post-not-available>
</template>
Expand All @@ -147,19 +152,54 @@
width: 50%;
}
.uploadCard {
border: 1px solid #404040;
border-radius: 0.375rem;
padding: 1rem;
margin-top: 1rem;
background-color: #dee2e6;
}
.imagesPreviewContaier {
width: 100%;
max-width: 100%;
min-width: 100%;
position: relative;
display: flex;
flex-direction: column;
margin: 0 0 10px 0;
padding: 0;
overflow-x: auto;
height: auto;
min-height: 290px;
// border: 1px solid #222;
// border-radius: 0.375rem;
}
.inner {
position: absolute;
display: flex;
flex-direction: row;
width: 100%;
max-width: 100%;
min-width: 100%;
}
#dropzone {
color: #555;
background-color: #f8f9fa55;
border: 1px solid #ccc;
color: #222;
cursor: pointer;
vertical-align: top;
display: inline-block;
width: 12rem;
min-height: 15rem;
padding: 1rem 0.25rem;
margin: 0.25rem;
margin: 0;
text-align: center;
border: 2px solid #ddd;
border-radius: 0.375rem;
box-shadow: inset 0 0 0 0 #ffc377;
transition: 0.5s ease-out box-shadow, 3s ease border-color;
width: 100%;
.plus {
font-size: 5rem;
Expand Down

0 comments on commit a68ba3c

Please sign in to comment.