<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>
