filesafe/public/js/home.js

/* eslint-disable no-unused-expressions */
/* global swal, axios, Dropzone */

var upload = {}

upload.isPrivate = true
upload.token = localStorage.token
upload.maxFileSize
// Add the album var to the upload so we can store the album id in there
upload.album
upload.myDropzone

upload.checkIfPublic = function () {
  axios.get('api/check')
    .then(response => {
      upload.isPrivate = response.data.private
      upload.maxFileSize = response.data.maxFileSize
      upload.preparePage()
    })
    .catch(error => {
      console.log(error)
      return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
    })
}

upload.preparePage = function () {
  if (upload.isPrivate) {
    if (upload.token) {
      return upload.verifyToken(upload.token, true)
    } else {
      document.getElementById('loginToUpload').innerText = 'Running in private mode. Log in to upload.'
      document.getElementById('loginToUpload').style.display = 'inline-flex' // ???
    }
  } else {
    return upload.prepareUpload()
  }
}

upload.verifyToken = function (token, reloadOnError) {
  if (reloadOnError === undefined) { reloadOnError = false }

  axios.post('api/tokens/verify', { token: token })
    .then(response => {
      if (response.data.success === false) {
        swal({
          title: 'An error occurred',
          text: response.data.description,
          type: 'error'
        }, () => {
          if (reloadOnError) {
            localStorage.removeItem('token')
            location.reload()
          }
        })
        return
      }

      localStorage.token = token
      upload.token = token
      return upload.prepareUpload()
    })
    .catch(error => {
      console.log(error)
      return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
    })
}

upload.prepareUpload = function () {
  // I think this fits best here because we need to check for a valid token before we can get the albums
  if (upload.token) {
    var select = document.getElementById('albumSelect')

    select.addEventListener('change', () => {
      upload.album = select.value
    })

    axios.get('api/albums', { headers: { token: upload.token } })
      .then(res => {
        var albums = res.data.albums

        // If the user doesn't have any albums we don't really need to display
        // an album selection
        if (albums.length === 0) return

        // Loop through the albums and create an option for each album
        for (var i = 0; i < albums.length; i++) {
          var opt = document.createElement('option')
          opt.value = albums[i].id
          opt.innerHTML = albums[i].name
          select.appendChild(opt)
        }
        // Display the album selection
        document.getElementById('albumDiv').style.display = 'block'
      })
      .catch(e => {
        console.log(e)
        return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
      })
  }

  var div = document.createElement('div')
  div.id = 'dropzone'
  div.innerHTML = 'Click here or drag and drop files'
  div.style.display = 'flex'

  document.getElementById('maxFileSize').innerHTML = `Maximum upload size per file is ${upload.maxFileSize}`
  document.getElementById('loginToUpload').style.display = 'none'

  if (upload.token === undefined) { document.getElementById('loginLinkText').innerHTML = 'Create an account and keep track of your uploads' }

  document.getElementById('uploadContainer').appendChild(div)

  upload.prepareDropzone()
}

upload.prepareDropzone = function () {
  var previewNode = document.querySelector('#template')
  previewNode.id = ''
  var previewTemplate = previewNode.parentNode.innerHTML
  previewNode.parentNode.removeChild(previewNode)

  var dropzone = new Dropzone('div#dropzone', {
    url: 'api/upload',
    paramName: 'files[]',
    maxFilesize: upload.maxFileSize.slice(0, -2),
    parallelUploads: 2,
    uploadMultiple: false,
    previewsContainer: 'div#uploads',
    previewTemplate: previewTemplate,
    createImageThumbnails: false,
    maxFiles: 1000,
    autoProcessQueue: true,
    headers: { token: upload.token },
    init: function () {
      upload.myDropzone = this
      this.on('addedfile', file => {
        document.getElementById('uploads').style.display = 'block'
      })
      // Add the selected albumid, if an album is selected, as a header
      this.on('sending', (file, xhr) => {
        if (upload.album) {
          xhr.setRequestHeader('albumid', upload.album)
        }
      })
    }
  })

  // Update the total progress bar
  dropzone.on('uploadprogress', (file, progress) => {
    file.previewElement.querySelector('.progress').setAttribute('value', progress)
    file.previewElement.querySelector('.progress').innerHTML = `${progress}%`
  })

  dropzone.on('success', (file, response) => {
    // Handle the responseText here. For example, add the text to the preview element:

    if (response.success === false) {
      var span = document.createElement('span')
      span.innerHTML = response.description
      file.previewTemplate.querySelector('.link').appendChild(span)
      return
    }

    var a = document.createElement('a')
    a.href = response.files[0].url
    a.target = '_blank'
    a.innerHTML = response.files[0].url
    file.previewTemplate.querySelector('.link').appendChild(a)

    file.previewTemplate.querySelector('.progress').style.display = 'none'
  })

  upload.prepareShareX()
}

upload.prepareShareX = function () {
  if (upload.token) {
    var sharexElement = document.getElementById('ShareX')
    var sharexFile = `{\r\n\
  "Name": "${location.hostname}",\r\n\
  "DestinationType": "ImageUploader, FileUploader",\r\n\
  "RequestType": "POST",\r\n\
  "RequestURL": "${location.origin}/api/upload",\r\n\
  "FileFormName": "files[]",\r\n\
  "Headers": {\r\n\
    "token": "${upload.token}"\r\n\
  },\r\n\
  "ResponseType": "Text",\r\n\
  "URL": "$json:files[0].url$",\r\n\
  "ThumbnailURL": "$json:files[0].url$"\r\n\
}`
    var sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' })
    sharexElement.setAttribute('href', URL.createObjectURL(sharexBlob))
    sharexElement.setAttribute('download', `${location.hostname}.sxcu`)
  }
}

// Handle image paste event
window.addEventListener('paste', event => {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items
  for (var index in items) {
    var item = items[index]
    if (item.kind === 'file') {
      var blob = item.getAsFile()
      console.log(blob.type)
      var file = new File([blob], `pasted-image.${blob.type.match(/(?:[^/]*\/)([^;]*)/)[1]}`)
      file.type = blob.type
      console.log(file)
      upload.myDropzone.addFile(file)
    }
  }
})

window.onload = function () {
  upload.checkIfPublic()
}