index.js

let upload = null
let uploadIsRunning = false
let file = null

const uploadButton = document.querySelector('#js-upload-button')
const fileInput = document.querySelector('#js-upload-file')
const fileLink = document.querySelector('#js-file-link')
const progressBar = document.querySelector('#js-upload-progress')
const progressText = document.querySelector('#js-upload-progress-text')
const uploadLink = document.querySelector('#js-upload-link')

fileInput.addEventListener('click', openFilePicker)

function resetUpload() {
  if (upload) {
    upload.abort()
    upload = null
  }

  uploadButton.textContent = 'Start Upload'
  uploadLink.textContent = 'not available yet'
  progressText.textContent = ''
  progressBar.removeAttribute('value')
}

uploadButton.addEventListener('click', toggleUpload)

function openFilePicker() {
  resetUpload()

  const options = {
    // Camera is a global cordova-specific object used for configuring camera access.
    // See https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/#module_Camera
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    encodingType: Camera.EncodingType.JPEG,
    mediaType: Camera.MediaType.PICTURE,
    // Allow simple editing of image before selection.
    allowEdit: true,
    // Rotate the image to correct for the orientation of the device during
    // capture to fix orientation quirks on Android
    correctOrientation: true,
  }

  navigator.camera.getPicture(
    getFileEntry,
    (error) => {
      window.alert(`Unable to obtain picture: ${error}`)
    },
    options,
  )
}

function getFileEntry(imgUri) {
  window.resolveLocalFileSystemURL(
    imgUri,
    (fileEntry) => {
      fileEntry.file((fileObj) => {
        file = fileObj
        fileLink.textContent = file.name
      })
    },
    (error) => {
      window.alert(`Could not create FileEntry: ${error}`)
    },
  )
}

function toggleUpload() {
  if (!upload) {
    if (!file) return

    const options = {
      endpoint: 'https://tusd.tusdemo.net/files/',
      retryDelays: [0, 1000, 3000, 5000],
      metadata: {
        filename: file.name,
        filetype: file.type,
      },
      onError(error) {
        if (error.originalRequest) {
          if (window.confirm(`Failed because: ${error}\nDo you want to retry?`)) {
            upload.start()
            uploadIsRunning = true
            return
          }
        } else {
          window.alert(`Failed because: ${error}`)
        }

        resetUpload()
      },
      onProgress(bytesUploaded, bytesTotal) {
        const progress = bytesUploaded / bytesTotal
        const percentage = `${(progress * 100).toFixed(2)}%`
        progressBar.value = progress
        progressText.textContent = percentage
      },
      onSuccess() {
        const anchor = document.createElement('a')
        anchor.textContent = `Download ${upload.file.name} (${upload.file.size} bytes)`
        anchor.target = '_blank'
        anchor.href = upload.url

        uploadLink.innerHTML = ''
        uploadLink.appendChild(anchor)
      },
    }

    upload = new tus.Upload(file, options)

    upload.start()
    uploadIsRunning = true
    uploadButton.textContent = 'Pause Upload'
  } else if (uploadIsRunning) {
    upload.abort()
    uploadButton.textContent = 'Resume Upload'
    uploadIsRunning = false
  } else {
    upload.start()
    uploadButton.textContent = 'Pause Upload'
    uploadIsRunning = true
  }
}