Merge branch 'upload-limit'

# Conflicts:
#	app/Http/Helpers/helpers.php
#	config/vuefilemanager.php
#	public/chunks/app-others.js
#	public/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js
#	public/js/main.js
#	public/mix-manifest.json
#	resources/js/components/FilesView/FileItemList.vue
#	resources/js/components/FilesView/FilePreview.vue
#	resources/js/helpers.js
#	resources/js/store/modules/fileFunctions.js
This commit is contained in:
Peter Papp
2020-12-21 18:19:37 +01:00
11 changed files with 321 additions and 233 deletions

View File

@@ -355,6 +355,25 @@ function format_gigabytes($gigabytes)
}
}
/**
* Format string to formated megabytes string
*
* @param $megabytes
* @return string
*/
function format_megabytes($megabytes)
{
if ($megabytes >= 1000) {
return $megabytes / 1000 . 'GB';
}
if ($megabytes >= 1000000) {
return $megabytes / 1000000 . 'TB';
}
return $megabytes . 'MB';
}
/**
* Convert megabytes to bytes
*
@@ -495,6 +514,7 @@ function get_file_type($file_mimetype)
}
}
/**
* Get file type from mimetype
*

View File

@@ -328,9 +328,21 @@ class Editor
$disk_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
$temp_filename = $file->getClientOriginalName();
// Generate file
File::append(config('filesystems.disks.local.root') . '/chunks/' . $temp_filename, $file->get());
// File Path
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
// Generate file
File::append($file_path, $file->get());
// Size of file
$file_size = File::size($file_path);
// Size of limit
$limit = get_setting('upload_limit');
// File size handling
if( $limit && $file_size > format_bytes($limit)) abort(413);
// If last then process file
if ($request->boolean('is_last')) {

View File

@@ -15,15 +15,15 @@
</div>
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
{{ data.mimetype }}
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>

View File

@@ -16,15 +16,15 @@
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
{{ data.mimetype | limitCharacters }}
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>

View File

@@ -1,6 +1,6 @@
<template>
<div v-if="canBePreview" class="preview">
<img v-if="fileInfoDetail[0].type == 'image'" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
<img v-if="fileInfoDetail[0].type == 'image' && fileInfoDetail[0].thumbnail" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
<audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail[0].file_url" type="video/mp4">

View File

@@ -1,275 +1,279 @@
import i18n from '@/i18n/index'
import store from './store/index'
import { debounce, includes } from 'lodash'
import { events } from './bus'
import {debounce, includes} from "lodash";
import {events} from './bus'
import axios from 'axios'
import router from '@/router'
const Helpers = {
install(Vue) {
install(Vue) {
Vue.prototype.$updateText = debounce(function(route, name, value) {
Vue.prototype.$updateText = debounce(function (route, name, value) {
let enableEmptyInput = ['mimetypes_blacklist' , 'google_analytics' , 'upload_limit']
if (value === '' && !enableEmptyInput.includes(name)) return
axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
}, 150)
Vue.prototype.$updateImage = function (route, name, image) {
// Create form
let formData = new FormData()
// Add image to form
formData.append('name', name)
formData.append(name, image)
formData.append('_method', 'PATCH')
axios.post(this.$store.getters.api + route, formData, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
}
Vue.prototype.$scrollTop = function () {
var container = document.getElementById('vue-file-manager')
if (container) {
container.scrollTop = 0
}
}
Vue.prototype.$getImage = function (source) {
return source ? this.$store.getters.config.host + '/' + source : ''
}
Vue.prototype.$getCreditCardBrand = function (brand) {
return `/assets/icons/${brand}.svg`
}
Vue.prototype.$getInvoiceLink = function (customer, id) {
return '/invoice/' + customer + '/' + id
}
Vue.prototype.$openImageOnNewTab = function (source) {
let win = window.open(source, '_blank')
win.focus()
}
Vue.prototype.$createFolder = function (folderName) {
this.$store.dispatch('createFolder', folderName)
}
Vue.prototype.$handleUploading = async function (files, parent_id) {
let fileBuffer = []
// Append the file list to fileBuffer array
Array.prototype.push.apply(fileBuffer, files);
let fileSucceed = 0
// Update files count in progressbar
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Reset upload progress to 0
store.commit('UPLOADING_FILE_PROGRESS', 0)
// Get parent id
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
let rootFolder = parent_id ? parent_id : parentFolder
let enableEmptyInput = ['mimetypes_blacklist', 'google_analytics']
// Upload files
do {
let file = fileBuffer.shift(),
chunks = []
if (value === '' && !enableEmptyInput.includes(name)) return
axios.post(this.$store.getters.api + route, { name, value, _method: 'patch' })
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message')
})
})
}, 150)
Vue.prototype.$updateImage = function(route, name, image) {
// Create form
let formData = new FormData()
// Add image to form
formData.append('name', name)
formData.append(name, image)
formData.append('_method', 'PATCH')
axios.post(this.$store.getters.api + route, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message')
})
})
}
Vue.prototype.$scrollTop = function() {
var container = document.getElementById('vue-file-manager')
if (container) {
container.scrollTop = 0
}
}
Vue.prototype.$getImage = function(source) {
return source ? this.$store.getters.config.host + '/' + source : ''
}
Vue.prototype.$getCreditCardBrand = function(brand) {
return `/assets/icons/${brand}.svg`
}
Vue.prototype.$getInvoiceLink = function(customer, id) {
return '/invoice/' + customer + '/' + id
}
Vue.prototype.$openImageOnNewTab = function(source) {
let win = window.open(source, '_blank')
win.focus()
}
Vue.prototype.$handleUploading = async function(files, parent_id) {
let fileBuffer = []
// Calculate ceils
let size = this.$store.getters.config.chunkSize,
chunksCeil = Math.ceil(file.size / size);
// Append the file list to fileBuffer array
Array.prototype.push.apply(fileBuffer, files)
// Create chunks
for (let i = 0; i < chunksCeil; i++) {
chunks.push(file.slice(
i * size, Math.min(i * size + size, file.size), file.type
));
}
let fileSucceed = 0
// Set Data
let formData = new FormData(),
uploadedSize = 0,
isNotGeneralError = true,
striped_name = 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'
// Update files count in progressbar
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
do {
let isLast = chunks.length === 1,
chunk = chunks.shift(),
attempts = 0
// Reset upload progress to 0
store.commit('UPLOADING_FILE_PROGRESS', 0)
// Set form data
formData.set('file', chunk, filename);
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast);
// Get parent id
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
let rootFolder = parent_id ? parent_id : parentFolder
// Upload chunks
do {
await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Upload files
do {
let file = fileBuffer.shift(),
chunks = []
// Count attempts
attempts++
// Calculate ceils
let size = this.$store.getters.config.chunkSize,
chunksCeil = Math.ceil(file.size / size)
// Break uploading proccess
if (error.response.status === 500)
isNotGeneralError = false
// Create chunks
for (let i = 0; i < chunksCeil; i++) {
chunks.push(file.slice(
i * size, Math.min(i * size + size, file.size), file.type
))
}
//Break if mimetype of file is in blacklist
if(error.response.status === 415)
isNotGeneralError = false
// Set Data
let formData = new FormData(),
uploadedSize = 0,
isNotGeneralError = true,
striped_name = 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'
// Show Error
if (attempts === 3)
this.$isSomethingWrong()
})
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
do {
let isLast = chunks.length === 1,
chunk = chunks.shift(),
attempts = 0
} while (isNotGeneralError && chunks.length !== 0)
// Set form data
formData.set('file', chunk, filename)
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast)
fileSucceed++
// Upload chunks
do {
await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Progress file log
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Count attempts
attempts++
} while (fileBuffer.length !== 0)
// Break uploading proccess
if (error.response.status === 500)
isNotGeneralError = false
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
}
//Break if mimetype of file is in blacklist
if (error.response.status === 415)
isNotGeneralError = false
Vue.prototype.$uploadFiles = async function (files) {
// Show Error
if (attempts === 3)
this.$isSomethingWrong()
})
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
if (files.length == 0) return
} while (isNotGeneralError && chunks.length !== 0)
if (!this.$checkFileMimetype(files)) return
this.$handleUploading(files, undefined)
}
fileSucceed++
Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
// Progress file log
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Prevent submit empty files
if (event.dataTransfer.items.length == 0) return
} while (fileBuffer.length !== 0)
// Get files
let files = [...event.dataTransfer.items].map(item => item.getAsFile());
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
}
this.$handleUploading(files, parent_id)
}
Vue.prototype.$uploadFiles = async function(files) {
Vue.prototype.$downloadFile = function (url, filename) {
var anchor = document.createElement('a')
if (files.length == 0) return
anchor.href = url
if (!this.$checkFileMimetype(files)) return
anchor.download = filename
this.$handleUploading(files, undefined)
}
document.body.appendChild(anchor)
Vue.prototype.$uploadExternalFiles = async function(event, parent_id) {
anchor.click()
}
// Prevent submit empty files
if (event.dataTransfer.items.length == 0) return
Vue.prototype.$closePopup = function () {
events.$emit('popup:close')
}
// Get files
let files = [...event.dataTransfer.items].map(item => item.getAsFile())
Vue.prototype.$isThisRoute = function (route, locations) {
this.$handleUploading(files, parent_id)
}
return includes(locations, route.name)
}
Vue.prototype.$downloadFile = function(url, filename) {
var anchor = document.createElement('a')
Vue.prototype.$isThisLocation = function (location) {
anchor.href = url
// Get current location
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
anchor.download = filename
// Check if type is object
if (typeof location === 'Object' || location instanceof Object) {
return includes(location, currentLocation)
document.body.appendChild(anchor)
} else {
return currentLocation === location
}
}
anchor.click()
}
Vue.prototype.$checkPermission = function (type) {
Vue.prototype.$closePopup = function() {
events.$emit('popup:close')
}
let currentPermission = store.getters.permission
Vue.prototype.$isThisRoute = function(route, locations) {
// Check if type is object
if (typeof type === 'Object' || type instanceof Object) {
return includes(type, currentPermission)
return includes(locations, route.name)
}
} else {
return currentPermission === type
}
}
Vue.prototype.$isThisLocation = function(location) {
Vue.prototype.$isMobile = function () {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
]
// Get current location
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
return toMatch.some(toMatchItem => {
return navigator.userAgent.match(toMatchItem)
})
}
// Check if type is object
if (typeof location === 'Object' || location instanceof Object) {
return includes(location, currentLocation)
Vue.prototype.$isMinimalScale = function () {
let sizeType = store.getters.filesViewWidth
} else {
return currentLocation === location
}
}
return sizeType === 'minimal-scale'
}
Vue.prototype.$checkPermission = function(type) {
Vue.prototype.$isCompactScale = function () {
let sizeType = store.getters.filesViewWidth
let currentPermission = store.getters.permission
return sizeType === 'compact-scale'
}
// Check if type is object
if (typeof type === 'Object' || type instanceof Object) {
return includes(type, currentPermission)
Vue.prototype.$isFullScale = function () {
let sizeType = store.getters.filesViewWidth
} else {
return currentPermission === type
}
}
Vue.prototype.$isMobile = function() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
]
return toMatch.some(toMatchItem => {
return navigator.userAgent.match(toMatchItem)
})
}
Vue.prototype.$isMinimalScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'minimal-scale'
}
Vue.prototype.$isCompactScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'compact-scale'
}
Vue.prototype.$isFullScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'full-scale'
}
return sizeType === 'full-scale'
}
Vue.prototype.$isSomethingWrong = function() {
events.$emit('alert:open', {
@@ -300,6 +304,25 @@ const Helpers = {
}
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) {
validate = false
events.$emit('alert:open', {
emoji: '😟😟😟',
title: i18n.t('popup_upload_limit.title'),
message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
})
break
}
}
return validate
}
Vue.prototype.$getDataByLocation = function() {
let folder = store.getters.currentFolder
@@ -332,4 +355,4 @@ const Helpers = {
}
}
export default Helpers
export default Helpers

View File

@@ -211,6 +211,9 @@
"username_plac": "输入您的邮件用户名"
},
"others": {
"upload_limit": "Upload Limit",
"upload_limit_plac": "Type your upload limit in MB",
"upload_limit_help": "If you want to set max file size limit on single upload, add size of your limit in MB. E.g. 100 means 100 MB and 2 000 means 2 000 MB limit.",
"mimetypes_blacklist": "Mimetypes Blacklist",
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
@@ -518,8 +521,12 @@
},
"title": "选择付款方式"
},
"popup_upload_limit": {
"title": "You exceed upload limit on single file",
"message": "Size of your uploaded file exceed the upload limit ({uploadLimit})."
},
"popup_mimetypes_blacklist": {
"title": "Oh no",
"title": "You are trying to upload unsupported file type",
"message": "File of this type ({mimetype}) is not allowed to upload."
},
"popup_zipping": {

View File

@@ -213,6 +213,9 @@
"username_plac": "Type your mail username"
},
"others": {
"upload_limit": "Upload Limit",
"upload_limit_plac": "Type your upload limit in MB",
"upload_limit_help": "If you want to set max file size limit on single upload, add size of your limit in MB. E.g. 100 means 100 MB and 2 000 means 2 000 MB limit.",
"mimetypes_blacklist": "Mimetypes Blacklist",
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
@@ -520,8 +523,12 @@
},
"title": "Choose Payment Method"
},
"popup_upload_limit": {
"title": "You exceed upload limit on single file",
"message": "Size of your uploaded file exceed the upload limit ({uploadLimit})."
},
"popup_mimetypes_blacklist": {
"title": "Oh No",
"title": "You are trying to upload unsupported file type",
"message": "File of this type ({mimetype}) is not allowed to upload."
},
"popup_delete_card": {

View File

@@ -213,6 +213,9 @@
"username_plac": "Zadajte svoje používateľské meno pre poštu"
},
"others": {
"upload_limit": "Limit nahrávania",
"upload_limit_plac": "Pridajte veľkosť limitu v MB",
"upload_limit_help": "Ak chcete nastaviť limit pre nahrávane jedneho súboru, pridajte veľkosť vášho limitu v MB.",
"mimetypes_blacklist": "Čierna listina mimetypov",
"mimetypes_blacklist_plac":"Pridajte mimetypy do Čiernej listiny",
"mimetypes_blacklist_help" :"Ak chcete zakázať nahrávanie niektorých typov súborov, jednoducho ich pridajte na čiernu listinu, príklad: x-php, mp3, jpeg <br/> Medzi mimetypmi použite čiarku. Nevkladajte bodku pred mimetyp." ,
@@ -520,8 +523,12 @@
},
"title": "Vyberte si metódu platby"
},
"popup_upload_limit": {
"title": "Je nám to ľúto",
"message": "Veľkosť nahravaného súboru prekročila limit pre nahraávane súbory ({uploadLimit})"
},
"popup_mimetypes_blacklist": {
"title": "Ospravelnujume sa",
"title": "Ospravedlňujeme sa",
"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."
},
"popup_zipping": {

View File

@@ -89,6 +89,15 @@
<small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
</div>
<div class="block-wrapper">
<label>{{ $t('admin_settings.others.upload_limit') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Upload Limit" v-slot="{ errors }">
<input @input="$updateText('/settings', 'upload_limit', app.uploadLimit)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<small class="input-help" v-html="$t('admin_settings.others.upload_limit_help')"></small>
</div>
<FormLabel class="mt-70">
{{ $t('admin_settings.others.section_cache') }}
</FormLabel>
@@ -163,7 +172,7 @@
mounted() {
axios.get('/api/settings', {
params: {
column: 'contact_email|google_analytics|storage_default|registration|storage_limitation|mimetypes_blacklist'
column: 'contact_email|google_analytics|storage_default|registration|storage_limitation|mimetypes_blacklist|upload_limit'
}
})
.then(response => {
@@ -175,7 +184,8 @@
defaultStorage: response.data.storage_default,
userRegistration: parseInt(response.data.registration),
storageLimitation: parseInt(response.data.storage_limitation),
mimetypesBlacklist : response.data.mimetypes_blacklist
mimetypesBlacklist : response.data.mimetypes_blacklist,
uploadLimit: response.data.upload_limit
}
})
}

View File

@@ -56,6 +56,8 @@
storageDefaultSpace: {{ isset($settings->storage_default) ? $settings->storage_default : 5 }},
storageDefaultSpaceFormatted: '{{ isset($settings->storage_default) ? format_gigabytes($settings->storage_default) : format_gigabytes(5) }}',
mimetypesBlacklist: '{{ isset($settings->mimetypes_blacklist) ? $settings->mimetypes_blacklist: null}}',
uploadLimit: {{ isset($settings->upload_limit) ? format_bytes($settings->upload_limit) : 'undefined' }},
uploadLimitFormatted: '{{ isset($settings->upload_limit) ? format_megabytes($settings->upload_limit) : null }}',
hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
isSaaS: {{ isset($settings->license) && $settings->license === 'Extended' ? 1 : 0 }},