mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
- App container
This commit is contained in:
Peter Papp
Vendored
+127
-126
@@ -9,8 +9,8 @@ const Helpers = {
|
||||
install(Vue) {
|
||||
|
||||
Vue.prototype.$updateText = debounce(function (route, name, value) {
|
||||
|
||||
let enableEmptyInput = ['mimetypes_blacklist' , 'google_analytics' , 'upload_limit']
|
||||
|
||||
let enableEmptyInput = ['mimetypes_blacklist', 'google_analytics', 'upload_limit']
|
||||
|
||||
if (value === '' && !enableEmptyInput.includes(name)) return
|
||||
|
||||
@@ -47,7 +47,7 @@ const Helpers = {
|
||||
}
|
||||
|
||||
Vue.prototype.$scrollTop = function () {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
var container = document.getElementById('vuefilemanager')
|
||||
|
||||
if (container) {
|
||||
container.scrollTop = 0
|
||||
@@ -78,24 +78,24 @@ const Helpers = {
|
||||
|
||||
Vue.prototype.$uploadFiles = async function (files) {
|
||||
|
||||
if (files.length == 0) return
|
||||
if (files.length == 0) return
|
||||
|
||||
if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
|
||||
if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
|
||||
|
||||
// Push items to file queue
|
||||
[...files].map(item => {
|
||||
this.$store.commit('ADD_FILES_TO_QUEUE', {
|
||||
folder_id: store.getters.currentFolder.id,
|
||||
file: item,
|
||||
})
|
||||
});
|
||||
// Push items to file queue
|
||||
[...files].map(item => {
|
||||
this.$store.commit('ADD_FILES_TO_QUEUE', {
|
||||
folder_id: store.getters.currentFolder.id,
|
||||
file: item,
|
||||
})
|
||||
});
|
||||
|
||||
// Start uploading if uploading process isn't running
|
||||
if (this.$store.getters.filesInQueueTotal == 0)
|
||||
this.$handleUploading(store.getters.fileQueue[0])
|
||||
// Start uploading if uploading process isn't running
|
||||
if (this.$store.getters.filesInQueueTotal == 0)
|
||||
this.$handleUploading(store.getters.fileQueue[0])
|
||||
|
||||
// Increase total files in upload bar
|
||||
this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
|
||||
// Increase total files in upload bar
|
||||
this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
|
||||
}
|
||||
|
||||
Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
|
||||
@@ -103,78 +103,78 @@ const Helpers = {
|
||||
// Prevent submit empty files
|
||||
if (event.dataTransfer.items.length === 0) return
|
||||
|
||||
// Push items to file queue
|
||||
// Push items to file queue
|
||||
[...event.dataTransfer.items].map(item => {
|
||||
this.$store.commit('ADD_FILES_TO_QUEUE', {
|
||||
this.$store.commit('ADD_FILES_TO_QUEUE', {
|
||||
folder_id: parent_id,
|
||||
file: item.getAsFile(),
|
||||
})
|
||||
});
|
||||
file: item.getAsFile(),
|
||||
})
|
||||
});
|
||||
|
||||
// Start uploading if uploading process isn't running
|
||||
if (this.$store.getters.filesInQueueTotal == 0)
|
||||
this.$handleUploading(this.$store.getters.fileQueue[0])
|
||||
this.$handleUploading(this.$store.getters.fileQueue[0])
|
||||
|
||||
// Increase total files in upload bar
|
||||
this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', [...event.dataTransfer.items].length)
|
||||
// Increase total files in upload bar
|
||||
this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', [...event.dataTransfer.items].length)
|
||||
}
|
||||
|
||||
Vue.prototype.$handleUploading = async function (item) {
|
||||
Vue.prototype.$handleUploading = async function (item) {
|
||||
|
||||
// Create ceil
|
||||
let size = store.getters.config.chunkSize,
|
||||
chunksCeil = Math.ceil(item.file.size / size),
|
||||
chunks = []
|
||||
// Create ceil
|
||||
let size = store.getters.config.chunkSize,
|
||||
chunksCeil = Math.ceil(item.file.size / size),
|
||||
chunks = []
|
||||
|
||||
// Create chunks
|
||||
for (let i = 0; i < chunksCeil; i++) {
|
||||
chunks.push(item.file.slice(
|
||||
i * size, Math.min(i * size + size, item.file.size), item.file.type
|
||||
));
|
||||
}
|
||||
// Create chunks
|
||||
for (let i = 0; i < chunksCeil; i++) {
|
||||
chunks.push(item.file.slice(
|
||||
i * size, Math.min(i * size + size, item.file.size), item.file.type
|
||||
));
|
||||
}
|
||||
|
||||
// Set Data
|
||||
let formData = new FormData(),
|
||||
uploadedSize = 0,
|
||||
isNotGeneralError = true,
|
||||
striped_name = item.file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
|
||||
filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'
|
||||
// Set Data
|
||||
let formData = new FormData(),
|
||||
uploadedSize = 0,
|
||||
isNotGeneralError = true,
|
||||
striped_name = item.file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
|
||||
filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'
|
||||
|
||||
do {
|
||||
let isLast = chunks.length === 1,
|
||||
chunk = chunks.shift(),
|
||||
attempts = 0
|
||||
do {
|
||||
let isLast = chunks.length === 1,
|
||||
chunk = chunks.shift(),
|
||||
attempts = 0
|
||||
|
||||
// Set form data
|
||||
formData.set('file', chunk, filename);
|
||||
formData.set('parent_id', item.parent_id)
|
||||
formData.set('is_last', isLast);
|
||||
// Set form data
|
||||
formData.set('file', chunk, filename);
|
||||
formData.set('parent_id', item.parent_id)
|
||||
formData.set('is_last', isLast);
|
||||
|
||||
// Upload chunks
|
||||
do {
|
||||
await store.dispatch('uploadFiles', {
|
||||
form: formData,
|
||||
fileSize: item.file.size,
|
||||
totalUploadedSize: uploadedSize
|
||||
}).then(() => {
|
||||
uploadedSize = uploadedSize + chunk.size
|
||||
}).catch((error) => {
|
||||
// Upload chunks
|
||||
do {
|
||||
await store.dispatch('uploadFiles', {
|
||||
form: formData,
|
||||
fileSize: item.file.size,
|
||||
totalUploadedSize: uploadedSize
|
||||
}).then(() => {
|
||||
uploadedSize = uploadedSize + chunk.size
|
||||
}).catch((error) => {
|
||||
|
||||
// Count attempts
|
||||
attempts++
|
||||
// Count attempts
|
||||
attempts++
|
||||
|
||||
// Show Error
|
||||
if (attempts === 3)
|
||||
this.$isSomethingWrong()
|
||||
// Show Error
|
||||
if (attempts === 3)
|
||||
this.$isSomethingWrong()
|
||||
|
||||
// Break uploading process
|
||||
if ([500, 415].includes(error.response.status))
|
||||
isNotGeneralError = false
|
||||
})
|
||||
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
|
||||
// Break uploading process
|
||||
if ([500, 415].includes(error.response.status))
|
||||
isNotGeneralError = false
|
||||
})
|
||||
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
|
||||
|
||||
} while (isNotGeneralError && chunks.length !== 0)
|
||||
}
|
||||
} while (isNotGeneralError && chunks.length !== 0)
|
||||
}
|
||||
|
||||
Vue.prototype.$downloadFile = function (url, filename) {
|
||||
var anchor = document.createElement('a')
|
||||
@@ -258,43 +258,43 @@ const Helpers = {
|
||||
return sizeType === 'full-scale'
|
||||
}
|
||||
|
||||
Vue.prototype.$isSomethingWrong = function() {
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message')
|
||||
})
|
||||
}
|
||||
Vue.prototype.$isSomethingWrong = function () {
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message')
|
||||
})
|
||||
}
|
||||
|
||||
Vue.prototype.$checkFileMimetype = function(files) {
|
||||
let validated = true
|
||||
let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
|
||||
Vue.prototype.$checkFileMimetype = function (files) {
|
||||
let validated = true
|
||||
let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let fileType = files[i].type.split('/')
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let fileType = files[i].type.split('/')
|
||||
|
||||
if (!fileType[0]) {
|
||||
fileType[1] = _.last(files[i].name.split('.'))
|
||||
}
|
||||
if (!fileType[0]) {
|
||||
fileType[1] = _.last(files[i].name.split('.'))
|
||||
}
|
||||
|
||||
if (mimetypesBlacklist.includes(fileType[1])) {
|
||||
validated = false
|
||||
if (mimetypesBlacklist.includes(fileType[1])) {
|
||||
validated = false
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '😬😬😬',
|
||||
title: i18n.t('popup_mimetypes_blacklist.title'),
|
||||
message: i18n.t('popup_mimetypes_blacklist.message', { mimetype: fileType[1] })
|
||||
})
|
||||
}
|
||||
}
|
||||
return validated
|
||||
}
|
||||
events.$emit('alert:open', {
|
||||
emoji: '😬😬😬',
|
||||
title: i18n.t('popup_mimetypes_blacklist.title'),
|
||||
message: i18n.t('popup_mimetypes_blacklist.message', {mimetype: fileType[1]})
|
||||
})
|
||||
}
|
||||
}
|
||||
return validated
|
||||
}
|
||||
|
||||
Vue.prototype.$checkUploadLimit = function (files) {
|
||||
let uploadLimit = store.getters.config.uploadLimit
|
||||
let validate = true
|
||||
|
||||
for (let i = 0 ; i<files.length; i++ ) {
|
||||
if(uploadLimit != 0 && files[i].size > uploadLimit) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
if (uploadLimit != 0 && files[i].size > uploadLimit) {
|
||||
validate = false
|
||||
events.$emit('alert:open', {
|
||||
emoji: '😟😟😟',
|
||||
@@ -307,37 +307,39 @@ const Helpers = {
|
||||
return validate
|
||||
}
|
||||
|
||||
Vue.prototype.$getDataByLocation = function() {
|
||||
Vue.prototype.$getDataByLocation = function () {
|
||||
|
||||
let folder = store.getters.currentFolder
|
||||
let folder = store.getters.currentFolder
|
||||
|
||||
let actions = {
|
||||
'base': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
|
||||
'public': ['browseShared', [{ folder: folder, back: true, init: false, sorting: true }]],
|
||||
'trash': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
|
||||
'participant_uploads': ['getParticipantUploads'],
|
||||
'trash-root': ['getTrash'],
|
||||
'latest': ['getLatest'],
|
||||
'shared': ['getShared']
|
||||
}
|
||||
let actions = {
|
||||
'base': ['getFolder', [{folder: folder, back: true, init: false, sorting: true}]],
|
||||
'public': ['browseShared', [{folder: folder, back: true, init: false, sorting: true}]],
|
||||
'trash': ['getFolder', [{folder: folder, back: true, init: false, sorting: true}]],
|
||||
'participant_uploads': ['getParticipantUploads'],
|
||||
'trash-root': ['getTrash'],
|
||||
'latest': ['getLatest'],
|
||||
'shared': ['getShared']
|
||||
}
|
||||
|
||||
this.$store.dispatch(...actions[folder.location])
|
||||
this.$store.dispatch(...actions[folder.location])
|
||||
|
||||
// Get dara of user with favourites tree
|
||||
this.$store.dispatch('getAppData')
|
||||
// Get dara of user with favourites tree
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Get data of Navigator tree
|
||||
this.$store.dispatch('getFolderTree')
|
||||
}
|
||||
|
||||
Vue.prototype.$checkOS = function() {
|
||||
// Handle styled scrollbar for Windows
|
||||
if (navigator.userAgent.indexOf('Windows') != -1) {
|
||||
let body = document.body
|
||||
body.classList.add('windows')
|
||||
}
|
||||
// Get data of Navigator tree
|
||||
this.$store.dispatch('getFolderTree')
|
||||
}
|
||||
Vue.prototype.$isApple = function() {
|
||||
|
||||
// Detect windows
|
||||
Vue.prototype.$checkOS = function () {
|
||||
if (navigator.userAgent.indexOf('Windows') != -1) {
|
||||
let body = document.body
|
||||
body.classList.add('windows')
|
||||
}
|
||||
}
|
||||
|
||||
// Check if device is Apple
|
||||
Vue.prototype.$isApple = function () {
|
||||
|
||||
const toMatch = [
|
||||
/iPhone/i,
|
||||
@@ -346,14 +348,13 @@ const Helpers = {
|
||||
/iOS/i,
|
||||
/macOS/i,
|
||||
/Macintosh/i
|
||||
]
|
||||
]
|
||||
|
||||
// Check if device is iOS
|
||||
return toMatch.some(toMatchItem => {
|
||||
return navigator.userAgent.match(toMatchItem)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Helpers
|
||||
|
||||
Reference in New Issue
Block a user