<div class="uploader" data-upload-url=""></div>
<div class="uploader" data-upload-url="{{ route('upload') }}"></div>
/* No context defined. */
<?php
namespace Theme\Views\Atoms\uploader;
use ACFToolkit\Types\CustomAtom;
class Uploader extends CustomAtom
{
public string $name = 'uploader';
public string $label = 'Uploader';
public int $needsJs = 0;
public int $needsVue = 1;
public int $needsVueInitialisation = 1;
public function __construct($name = '', $title = '', $children = [])
{
parent::__construct($name, $title);
$this->addChildren(array_merge($children, [
]));
}
}
<?php
namespace Theme\Views\Atoms\uploader;
use ACFToolkit\ViewModels\BaseViewModel;
class UploaderViewModel extends BaseViewModel
{
}
.uploader {
}
<template>
<FileUpload name="upload[]" :url="uploadUrl" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
<script>
import FileUpload from 'primevue/fileupload';
/* IMPORTS */
export default {
components: {
FileUpload
},
props: {
uploadUrl: {
type: String
}
},
data: () => {
return {}
},
computed: {},
methods: {
onAdvancedUpload: () => {
}
},
created(){
}
}
</script>
{% include '@atoms/uploader/uploader.twig' with {
} only %}Fields