<dap-ds-file-input
  ref={succcessRef}
  id="fileInput1"
  description="Always success upload"
  accept=".jpg,.docx,.png,.heic"
  label="Upload your recepies"
  autoupload
  uploadUrl="https://9daf1d71-c24f-4a02-8861-701f8ff4a9c8.mock.pstmn.io/upload/success"
  tooltip="File tooltip text">
</dap-ds-file-input>

<dap-ds-file-input-list for="fileInput1">
</dap-ds-file-input-list>

<dap-ds-modal
  id="confirmModal"
  header="Are you sure?"
  description="Confirm your choice!"
  okButtonDanger
  okButtonLabel="Delete">
</dap-ds-modal>

fileInput.addEventListener('dds-file-change', event => {
  const files = event.detail.files

  console.log('dds-file-change', files)
})

fileInput.addEventListener('dds-upload-complete', e => {
  console.log('dds-upload-complete', e)
  e.detail.item.feedbackType = 'positive'
  e.detail.item.feedback = 'success'
})

fileInput.current?.addEventListener('dds-upload-error', e => {
  console.log('dds-upload-error', e)
  e.detail.item.feedbackType = 'negative'
  e.detail.item.feedback = 'error'
})

fileInput.addEventListener('dds-upload-error', () => {
  console.log('dds-upload-error', 'all upload completed successfully')
})

fileInput.addEventListener('dds-upload-progress', event => {
  console.log('uploading:', event.detail.progress)
})

fileInput.addEventListener('dds-file-removed', event => {
  const confirmModal = document.getElementById('confirmModal')
  confirmModal.addEventListener('dds-ok', () => {
    event.detail.cancel.allow(true)
  })

  confirmModal.addEventListener('dds-cancel', () => {
    event.detail.cancel.reject()
  })

  confirmModal.show()
})