89 lines
2.2 KiB
HTML
89 lines
2.2 KiB
HTML
<div class="block">
|
|
<style>
|
|
#upload-area {
|
|
height: 250px;
|
|
border: 2px dashed #aaa;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
color: #555;
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
#upload-area.hover {
|
|
background-color: #f0f0f0;
|
|
border-color: #444;
|
|
}
|
|
|
|
#preview {
|
|
max-width:100%;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div id="upload-area" contenteditable="true">
|
|
Paste or drag an image here
|
|
</div>
|
|
<img id="preview" alt="image preview" hidden>
|
|
<p id="status"></p>
|
|
|
|
<script>
|
|
const area = document.getElementById('upload-area');
|
|
const preview = document.getElementById('preview');
|
|
const status = document.getElementById('status');
|
|
|
|
async function uploadImage(file){
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
preview.src = reader.result;
|
|
preview.hidden = false;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
const formData = new FormData();
|
|
formData.append('attachment', file);
|
|
|
|
try {
|
|
const res = await fetch('/ticket/{{@ticket->id}}/attachments/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const text = await res.text();
|
|
status.textContent = text;
|
|
} catch (e) {
|
|
status.textContent = 'upload failed.'
|
|
}
|
|
}
|
|
|
|
// paste
|
|
area.addEventListener('paste', (e) => {
|
|
for(let item of e.clipboardData.items){
|
|
if(item.type.startsWith('image/')){
|
|
uploadImage(item.getAsFile());
|
|
}
|
|
}
|
|
});
|
|
|
|
// drag and drop
|
|
area.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
area.classList.add('hover');
|
|
});
|
|
|
|
area.addEventListener('dragLeave', ()=> {
|
|
area.classList.remove('hover');
|
|
});
|
|
|
|
area.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
area.classList.remove('hover');
|
|
const files = e.dataTransfer.files;
|
|
for(let file of files){
|
|
if(file.type.startsWith('image/')){
|
|
uploadImage(file);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div> |