/* eslint-disable no-unused-expressions */
/* global swal, axios, Dropzone, ClipboardJS */
const upload = {
private: undefined,
enableUserAccounts: undefined,
token: localStorage.token,
maxFileSize: undefined,
chunkedUploads: undefined,
// Add the album let to the upload so we can store the album id in there
album: undefined,
dropzone: undefined,
clipboardJS: undefined
}
const imageExtensions = ['.webp', '.jpg', '.jpeg', '.bmp', '.gif', '.png']
upload.checkIfPublic = () => {
axios.get('api/check')
.then(response => {
upload.private = response.data.private
upload.enableUserAccounts = response.data.enableUserAccounts
upload.maxFileSize = response.data.maxFileSize
upload.chunkedUploads = response.data.chunkedUploads
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 = () => {
if (upload.private) {
if (upload.token) {
return upload.verifyToken(upload.token, true)
} else {
const button = document.getElementById('loginToUpload')
button.href = 'auth'
button.className = button.className.replace(' is-loading', '')
if (upload.enableUserAccounts) {
button.innerText = 'Anonymous upload is disabled. Log in to upload.'
} else {
button.innerText = 'Running in private mode. Log in to upload.'
}
}
} else {
return upload.prepareUpload()
}
}
upload.verifyToken = (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,
icon: 'error'
}).then(() => {
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 = () => {
// I think this fits best here because we need to check for a valid token before we can get the albums
if (upload.token) {
const select = document.getElementById('albumSelect')
select.addEventListener('change', () => {
upload.album = select.value
})
axios.get('api/albums', { headers: { token: upload.token } })
.then(res => {
const 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 (let i = 0; i < albums.length; i++) {
const 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')
})
}
const div = document.createElement('div')
div.id = 'dropzone'
div.className = 'button'
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 && upload.enableUserAccounts) {
document.getElementById('loginLinkText').innerHTML = 'Create an account and keep track of your uploads'
}
document.getElementById('uploadContainer').appendChild(div)
upload.prepareDropzone()
}
upload.prepareDropzone = () => {
const previewNode = document.querySelector('#template')
previewNode.id = ''
const previewTemplate = previewNode.parentNode.innerHTML
previewNode.parentNode.removeChild(previewNode)
upload.dropzone = new Dropzone('div#dropzone', {
url: 'api/upload',
paramName: 'files[]',
maxFilesize: parseInt(upload.maxFileSize),
parallelUploads: 2,
uploadMultiple: false,
previewsContainer: 'div#uploads',
previewTemplate,
createImageThumbnails: false,
maxFiles: 1000,
autoProcessQueue: true,
headers: { token: upload.token },
chunking: upload.chunkedUploads.enabled,
chunkSize: parseInt(upload.chunkedUploads.maxSize) * 1000000, // 1000000 B = 1 MB,
parallelChunkUploads: false, // when set to true, sometimes it often hangs with hundreds of parallel uploads
chunksUploaded: async (file, done) => {
file.previewElement.querySelector('.progress').setAttribute('value', 100)
file.previewElement.querySelector('.progress').innerHTML = '100%'
// The API supports an array of multiple files
const response = await axios.post(
'api/upload/finishchunks',
{
files: [
{
uuid: file.upload.uuid,
original: file.name,
size: file.size,
type: file.type,
count: file.upload.totalChunkCount
}
]
},
{
headers: { token: upload.token }
})
.then(response => response.data)
.catch(error => {
return {
success: false,
description: error.toString()
}
})
file.previewTemplate.querySelector('.progress').style.display = 'none'
if (response.success === false) {
file.previewTemplate.querySelector('.error').innerHTML = response.description
}
if (response.files && response.files[0] && response.files[0].url) {
upload.appendLink(file, response.files[0].url)
upload.showThumbnail(file, response.files[0].url)
}
return done()
}
})
upload.dropzone.on('addedfile', file => {
document.getElementById('uploads').style.display = 'block'
})
// Add the selected albumid, if an album is selected, as a header
upload.dropzone.on('sending', (file, xhr, formData) => {
if (upload.album) { xhr.setRequestHeader('albumid', upload.album) }
})
// Update the total progress bar
upload.dropzone.on('uploadprogress', (file, progress, bytesSent) => {
if (file.upload.chunked && progress === 100) { return }
file.previewElement.querySelector('.progress').setAttribute('value', progress)
file.previewElement.querySelector('.progress').innerHTML = `${progress}%`
})
upload.dropzone.on('success', (file, response) => {
if (!response) { return }
file.previewTemplate.querySelector('.progress').style.display = 'none'
if (response.success === false) {
file.previewTemplate.querySelector('.error').innerHTML = response.description
}
if (response.files && response.files[0] && response.files[0].url) {
upload.appendLink(file, response.files[0].url)
upload.showThumbnail(file, response.files[0].url)
}
})
upload.dropzone.on('error', (file, error) => {
file.previewTemplate.querySelector('.progress').style.display = 'none'
file.previewTemplate.querySelector('.error').innerHTML = error
})
upload.prepareShareX()
}
upload.appendLink = (file, url) => {
const a = file.previewTemplate.querySelector('.link > a')
const clipboard = file.previewTemplate.querySelector('.clipboard-mobile > .clipboard-js')
a.href = a.innerHTML = clipboard.dataset['clipboardText'] = url
a.parentElement.style = clipboard.parentElement.style = ''
}
upload.showThumbnail = (file, url) => {
const exec = /.[\w]+(\?|$)/.exec(url)
if (exec && exec[0] && imageExtensions.includes(exec[0].toLowerCase())) {
upload.dropzone.emit('thumbnail', file, url)
}
}
upload.prepareShareX = () => {
if (upload.token) {
const sharexElement = document.getElementById('ShareX')
const 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\
}`
const 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 => {
const items = (event.clipboardData || event.originalEvent.clipboardData).items
for (const index in items) {
const item = items[index]
if (item.kind === 'file') {
const blob = item.getAsFile()
console.log(blob.type)
const file = new File([blob], `pasted-image.${blob.type.match(/(?:[^/]*\/)([^;]*)/)[1]}`)
file.type = blob.type
console.log(file)
upload.dropzone.addFile(file)
}
}
})
window.onload = () => {
upload.checkIfPublic()
upload.clipboardJS = new ClipboardJS('.clipboard-js')
upload.clipboardJS.on('success', () => {
return swal('Copied!', 'The link has been copied to clipboard.', 'success')
})
upload.clipboardJS.on('error', event => {
console.error(event)
return swal('An error occurred!', 'There was an error when trying to copy the link to clipboard, please check the console for more information.', 'error')
})
}