75 lines
2.7 KiB
Svelte
75 lines
2.7 KiB
Svelte
<script>
|
|
import "filepond/dist/filepond.css";
|
|
import FilePond from "svelte-filepond";
|
|
import { _ } from "svelte-i18n";
|
|
let pond;
|
|
// pond.getFiles() will return the active files
|
|
// the name to use for the internal file input
|
|
let name = "filepond";
|
|
function handleInit() {
|
|
// console.log("FilePond has initialised");
|
|
}
|
|
function handleAddFile(err, fileItem) {
|
|
// console.log("A file has been added", fileItem);
|
|
}
|
|
const labelInvalidField = $_("filepond__field-contains-invalid-files");
|
|
const labelFileWaitingForSize = $_("filepond__waiting-for-size");
|
|
const labelFileSizeNotAvailable = $_("filepond__size-not-available");
|
|
const labelFileLoading = $_("filepond__loading");
|
|
const labelFileLoadError = $_("filepond__error-during-load");
|
|
const labelFileProcessing = $_("filepond__uploading");
|
|
const labelFileProcessingComplete = $_("filepond__upload-complete");
|
|
const labelFileProcessingAborted = $_("filepond__upload-cancelled");
|
|
const labelFileProcessingError = $_("filepond__error-during-upload");
|
|
const labelFileProcessingRevertError = $_("filepond__error-during-revert");
|
|
const labelFileRemoveError = $_("filepond__error-during-remove");
|
|
const labelTapToCancel = $_("filepond__tap-to-cancel");
|
|
const labelTapToRetry = $_("filepond__tap-to-retry");
|
|
const labelTapToUndo = $_("filepond__tap-to-undo");
|
|
const labelButtonRemoveItem = $_("filepond__remove");
|
|
const labelButtonAbortItemLoad = $_("filepond__abort");
|
|
const labelButtonRetryItemLoad = $_("filepond__retry");
|
|
const labelButtonAbortItemProcessing = $_("filepond__cancel");
|
|
const labelButtonUndoItemProcessing = $_("filepond__undo");
|
|
const labelButtonRetryItemProcessing = $_("filepond__retry");
|
|
const labelButtonProcessItem = $_("filepond__upload");
|
|
const labelIdle =
|
|
$_("drag-and-drop-your-files-or") +
|
|
` <span class="filepond--label-action"> ` +
|
|
$_("browse") +
|
|
` </span>`;
|
|
</script>
|
|
|
|
<div class="app">
|
|
<FilePond
|
|
bind:this={pond}
|
|
{name}
|
|
{labelFileWaitingForSize}
|
|
{labelFileSizeNotAvailable}
|
|
{labelFileLoading}
|
|
{labelFileLoadError}
|
|
{labelFileProcessing}
|
|
{labelFileProcessingComplete}
|
|
{labelFileProcessingAborted}
|
|
{labelFileProcessingError}
|
|
{labelFileProcessingRevertError}
|
|
{labelFileRemoveError}
|
|
{labelTapToCancel}
|
|
{labelTapToRetry}
|
|
{labelTapToUndo}
|
|
{labelButtonRemoveItem}
|
|
{labelButtonAbortItemLoad}
|
|
{labelButtonRetryItemLoad}
|
|
{labelButtonAbortItemProcessing}
|
|
{labelButtonUndoItemProcessing}
|
|
{labelButtonRetryItemProcessing}
|
|
{labelButtonProcessItem}
|
|
{labelIdle}
|
|
{labelInvalidField}
|
|
server="/api"
|
|
allowMultiple={false}
|
|
credits={false}
|
|
oninit={handleInit}
|
|
onaddfile={handleAddFile} />
|
|
</div>
|