66 lines
2.0 KiB
PHP
66 lines
2.0 KiB
PHP
|
<div>
|
||
|
|
@csrf
|
||
|
|
<trix-editor class="honeycombDescription" input="description"></trix-editor>
|
||
|
|
</div>
|
||
|
|
@script
|
||
|
|
<script>
|
||
|
|
const HOST = "/uploadImages"
|
||
|
|
addEventListener('trix-attachment-add', (event) => {
|
||
|
|
if (event.attachment.file) {
|
||
|
|
uploadFileAttachment(event.attachment)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function uploadFileAttachment(attachment) {
|
||
|
|
uploadFile(attachment.file, setProgress, setAttributes)
|
||
|
|
|
||
|
|
function setProgress(progress) {
|
||
|
|
attachment.setUploadProgress(progress)
|
||
|
|
}
|
||
|
|
|
||
|
|
function setAttributes(attributes) {
|
||
|
|
attachment.setAttributes(attributes)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function uploadFile(file, progressCallback, successCallback) {
|
||
|
|
var key = createStorageKey(file)
|
||
|
|
var formData = createFormData(key, file)
|
||
|
|
var xhr = new XMLHttpRequest()
|
||
|
|
|
||
|
|
xhr.open("POST", HOST, true)
|
||
|
|
xhr.setRequestHeader('X-CSRF-TOKEN', document.getElementsByName("_token")[0].value)
|
||
|
|
|
||
|
|
xhr.upload.addEventListener("progress", function(event) {
|
||
|
|
var progress = event.loaded / event.total * 100
|
||
|
|
progressCallback(progress)
|
||
|
|
})
|
||
|
|
|
||
|
|
xhr.addEventListener("load", function(event) {
|
||
|
|
if (xhr.status == 201) {
|
||
|
|
var attributes = {
|
||
|
|
url: "/storage/" + xhr.response,
|
||
|
|
href: "/storage/" + xhr.response
|
||
|
|
}
|
||
|
|
successCallback(attributes)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
xhr.send(formData)
|
||
|
|
}
|
||
|
|
|
||
|
|
function createStorageKey(file) {
|
||
|
|
var name = file.name
|
||
|
|
return ["storage", "trixImages", name].join("/")
|
||
|
|
}
|
||
|
|
|
||
|
|
function createFormData(key, file) {
|
||
|
|
var data = new FormData()
|
||
|
|
data.append("key", key)
|
||
|
|
data.append("Content-Type", file.type)
|
||
|
|
data.append("file", file)
|
||
|
|
return data
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
@endscript
|