nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

chunk upload

Browse Source
This commit is contained in:
carodej
2020-07-27 17:28:55 +02:00
parent 6f6115d5cb
commit 6ac543128e
11 changed files with 347 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/FileManagerFile.php
View File

@@ -145,15 +145,17 @@ class FileManagerFile extends Model
*/
public function getFileUrlAttribute()
{
// Get file from s3
// Get file from external storage
if (is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
$file_pretty_name = get_pretty_name($this->attributes['basename'], $this->attributes['name'], $this->attributes['mimetype']);
$header = [
"ResponseAcceptRanges" => "bytes",
"ResponseContentType" => $this->attributes['mimetype'],
"ResponseContentLength" => $this->attributes['filesize'],
"ResponseContentRange" => "bytes 0-600/" . $this->attributes['filesize'],
'ResponseContentDisposition' => 'attachment; filename=' . $this->attributes['name'] . '.' . $this->attributes['mimetype'],
'ResponseContentDisposition' => 'attachment; filename=' . $file_pretty_name,
];
return Storage::temporaryUrl('file-manager/' . $this->attributes['basename'], now()->addDay(), $header);

3
app/Http/Controllers/FileAccessController.php
View File

@@ -197,8 +197,7 @@ class FileAccessController extends Controller
*/
private function download_file($file)
{
// Format pretty filename
$file_pretty_name = $file->name . '.' . $file->mimetype;
$file_pretty_name = get_pretty_name($file->basename, $file->name, $file->mimetype);
// Get file path
$path = '/file-manager/' . $file->basename;

2
app/Http/Controllers/FileFunctions/EditItemsController.php
View File

@@ -245,7 +245,7 @@ class EditItemsController extends Controller
}
/**
* Delete file for authenticated master|editor user
* Upload file for authenticated master|editor user
*
* @param UploadRequest $request
* @return FileManagerFile|Model

45
app/Http/Helpers/helpers.php
View File

@@ -19,11 +19,11 @@ use Intervention\Image\ImageManagerStatic as Image;
*/
function obfuscate_email($email)
{
$em = explode("@",$email);
$name = implode('@', array_slice($em, 0, count($em)-1));
$len = floor(strlen($name)/2);
$em = explode("@", $email);
$name = implode('@', array_slice($em, 0, count($em) - 1));
$len = floor(strlen($name) / 2);
return substr($name,0, $len) . str_repeat('*', $len) . "@" . end($em);
return substr($name, 0, $len) . str_repeat('*', $len) . "@" . end($em);
}
/**
@@ -148,10 +148,10 @@ function get_storage()
function is_storage_driver($driver)
{
if (is_array($driver)) {
return in_array(config('filesystem.default'), $driver);
return in_array(config('filesystems.default'), $driver);
}
return config('filesystem.default') === $driver;
return config('filesystems.default') === $driver;
}
/**
@@ -452,10 +452,10 @@ function format_date($date, $format = '%d. %B. %Y, %H:%M')
* @param $file
* @return string
*/
function get_file_type($file)
function get_file_type($file_path)
{
// Get mimetype from file
$mimetype = explode('/', $file->getMimeType());
$mimetype = explode('/', Storage::disk('local')->mimeType($file_path));
switch ($mimetype[0]) {
case 'image':
@@ -470,4 +470,33 @@ function get_file_type($file)
default:
return 'file';
}
}
// Get mimetype from file
function get_file_type_from_mimetype($mimetype)
{
return explode('/', $mimetype)[1];
}
/**
* Format pretty name file
*
* @param $basename
* @param $name
* @param $mimetype
* @return string
*/
function get_pretty_name($basename, $name, $mimetype)
{
$file_extension = substr(strrchr($basename, '.'), 1);
if (strpos($name, $file_extension) !== false) {
return $name;
}
if ($file_extension) {
return $name . '.' . $file_extension;
}
return $name . '.' . $mimetype;
}

201
app/Http/Tools/Editor.php
View File

@@ -10,6 +10,7 @@ use App\Http\Requests\FileFunctions\RenameItemRequest;
use App\User;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Intervention\Image\ImageManagerStatic as Image;
@@ -201,72 +202,70 @@ class Editor
$folder_id = $request->parent_id === 0 ? 0 : $request->parent_id;
$file = $request->file('file');
// Get user data
$user_scope = is_null($shared) ? $request->user()->token()->scopes[0] : 'editor';
$user_id = is_null($shared) ? Auth::id() : $shared->user_id;
$user_storage_used = user_storage_percentage($user_id, $file->getSize());
// Check or create directories
self::check_directories(['chunks', 'file-manager']);
// Get storage limitation setup
$storage_limitation = get_setting('storage_limitation');
// Generate file
File::append(storage_path() . '/app/chunks/' . $file->getClientOriginalName(), $file->get());
// Check if user can upload
if ($storage_limitation && $user_storage_used >= 100) {
abort(423, 'You exceed your storage limit!');
// If last then process file
if ($request->has('is_last') && $request->boolean('is_last')) {
// Get original file name
$original_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
// Rename chunk part to original file name in chunk directory
Storage::disk('local')->move('chunks/' . $file->getClientOriginalName(), 'chunks/' . $original_file_name);
// Get user data
$user_scope = is_null($shared) ? $request->user()->token()->scopes[0] : 'editor';
$user_id = is_null($shared) ? Auth::id() : $shared->user_id;
$user_storage_used = user_storage_percentage($user_id, Storage::disk('local')->size('chunks/' . $original_file_name));
// Get storage limitation setup
$storage_limitation = get_setting('storage_limitation');
// Check if user can upload
if ($storage_limitation && $user_storage_used >= 100) {
// Delete file
Storage::disk('local')->delete('chunks/' . $original_file_name);
// Abort uploading
abort(423, 'You exceed your storage limit!');
}
// File name
$prefixed_file_name = Str::random() . '-' . str_replace(' ', '', $original_file_name);
// Create thumbnail
$thumbnail = self::get_image_thumbnail('chunks/' . $original_file_name, $prefixed_file_name, $file);
// Store to disk
Storage::disk('local')->move('chunks/' . $original_file_name, 'file-manager/' . $prefixed_file_name);
// Store file
$options = [
'name' => pathinfo($file->getClientOriginalName())['filename'],
'mimetype' => get_file_type_from_mimetype(Storage::disk('local')->mimeType('file-manager/' . $prefixed_file_name)),
'unique_id' => get_unique_id(),
'user_scope' => $user_scope,
'folder_id' => $folder_id,
'thumbnail' => $thumbnail,
'basename' => $prefixed_file_name,
'filesize' => Storage::disk('local')->size('file-manager/' . $prefixed_file_name),
'type' => get_file_type('file-manager/' . $prefixed_file_name),
'user_id' => $user_id,
];
// Move files to external storage
if (! is_storage_driver(['local'])) {
self::move_to_external_storage($prefixed_file_name, $thumbnail);
}
// Return new file
return FileManagerFile::create($options);
}
// File
$filename = Str::random() . '-' . str_replace(' ', '', $file->getClientOriginalName());
$filetype = get_file_type($file);
$filesize = $file->getSize();
$directory = 'file-manager';
$thumbnail = null;
// create directory if not exist
if (!Storage::exists($directory)) {
Storage::makeDirectory($directory);
}
// Store to disk
Storage::putFileAs($directory, $file, $filename, 'private');
// Create image thumbnail
if (in_array($file->getMimeType(), ['image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/webp'])) {
// Get thumbnail name
$thumbnail = 'thumbnail-' . $filename;
// Create intervention image
$image = Image::make($file->getRealPath())->orientate();
// Resize image
$image->resize(564, null, function ($constraint) {
$constraint->aspectRatio();
})->stream();
// Store thumbnail to disk
Storage::put($directory . '/' . $thumbnail, $image);
} elseif ($file->getMimeType() == 'image/svg+xml') {
$thumbnail = $filename;
}
// Store file
$options = [
'name' => pathinfo($file->getClientOriginalName())['filename'],
'mimetype' => $file->getClientOriginalExtension(),
'unique_id' => get_unique_id(),
'user_scope' => $user_scope,
'folder_id' => $folder_id,
'thumbnail' => $thumbnail,
'basename' => $filename,
'filesize' => $filesize,
'type' => $filetype,
'user_id' => $user_id,
];
// Return new file
return FileManagerFile::create($options);
}
/**
@@ -304,4 +303,80 @@ class Editor
]);
}
}
/**
* Check if directories 'chunks' and 'file-manager exist', if no, then create
*
* @param $directories
*/
private static function check_directories($directories): void
{
foreach ($directories as $directory) {
if (!Storage::disk('local')->exists($directory)) {
Storage::disk('local')->makeDirectory($directory);
}
if (! is_storage_driver(['local'])) {
if (!Storage::exists($directory)) {
Storage::makeDirectory($directory);
}
}
}
}
/**
* Create thumbnail for images
*
* @param string $chunk_file_path
* @param string $filename
* @param $file
* @return string|null
*/
private static function get_image_thumbnail(string $chunk_file_path, string $filename, $file)
{
if (in_array(Storage::disk('local')->mimeType($chunk_file_path), ['image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/webp'])) {
// Get thumbnail name
$thumbnail = 'thumbnail-' . $filename;
// Create intervention image
$image = Image::make(storage_path() . '/app/' . $chunk_file_path)->orientate();
// Resize image
$image->resize(564, null, function ($constraint) {
$constraint->aspectRatio();
})->stream();
// Store thumbnail to disk
Storage::disk('local')->put('file-manager/' . $thumbnail, $image);
} elseif (Storage::disk('local')->mimeType($chunk_file_path) === 'image/svg+xml') {
$thumbnail = $filename;
}
return $thumbnail ?? null;
}
/**
* Move file to external storage if is set
*
* @param string $filename
* @param string|null $thumbnail
*/
private static function move_to_external_storage(string $filename, ?string $thumbnail): void
{
foreach ([$filename, $thumbnail] as $file) {
// Check if file exist
if (!$file) continue;
// Move file
Storage::putFileAs('/file-manager', storage_path() . '/app/file-manager/' . $file, $file, 'private');
// Delete file after upload
Storage::disk('local')->delete('file-manager/' . $file);
}
}
}

2
public/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

74
resources/js/Upload.vue Normal file
View File

@@ -0,0 +1,74 @@
<script>
export default {
watch: {
chunks(n, o) {
if (n.length > 0) {
this.upload();
}
}
},
data() {
return {
file: null,
chunks: [],
uploaded: 0
};
},
computed: {
progress() {
return Math.floor((this.uploaded * 100) / this.file.size);
},
formData() {
let formData = new FormData;
formData.set('is_last', this.chunks.length === 1);
formData.set('file', this.chunks[0], `${this.file.name}.part`);
return formData;
},
config() {
return {
method: 'POST',
data: this.formData,
url: 'api/upload',
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
this.uploaded += event.loaded;
}
};
}
},
methods: {
select(event) {
this.file = event.target.files.item(0);
this.createChunks();
},
upload() {
axios(this.config).then(response => {
this.chunks.shift();
}).catch(error => {});
},
createChunks() {
let size = 2048, chunks = Math.ceil(this.file.size / size);
for (let i = 0; i < chunks; i++) {
this.chunks.push(this.file.slice(
i * size, Math.min(i * size + size, this.file.size), this.file.type
));
}
}
}
}
</script>
<template>
<div>
<input type="file" @change="select">
<progress :value="progress"></progress>
</div>
</template>

2
resources/js/components/FilesView/UploadProgress.vue
View File

@@ -2,7 +2,7 @@
<transition name="info-panel">
<div v-if="uploadingFilesCount" class="upload-progress">
<div class="progress-title">
<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total}) }}</span>
<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }}</span>
</div>
<ProgressBar :progress="uploadingFileProgress"/>
</div>

120
resources/js/helpers.js vendored
View File

@@ -85,60 +85,79 @@ const Helpers = {
total: fileCount
})
store.commit('UPLOADING_FILE_PROGRESS', 0)
// Get parent id
const rootFolder = this.$store.getters.currentFolder
? this.$store.getters.currentFolder.unique_id
: 0
for (var i = files.length - 1; i >= 0; i--) {
let file = files[i],
chunks = []
// Calculate ceils
let size = 1388608,
chunksCeil = Math.ceil(file.size / size);
// Create chunks
for (let i = 0; i < chunksCeil; i++) {
chunks.push(file.slice(
i * size, Math.min(i * size + size, file.size), file.type
));
}
// Set form Data
let formData = new FormData()
let uploadedSize = 0
// Append data
formData.append('file', files[i])
do {
let isLast = chunks.length === 1
let chunk = chunks.shift()
let attempts = 0
// Append form data
formData.append('parent_id', rootFolder)
// Set form data
formData.set('is_last', isLast);
formData.set('file', chunk, `${file.name}.part`);
formData.set('parent_id', rootFolder)
// Upload data
await store.dispatch('uploadFiles', formData)
.then(() => {
// Progress file log
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileCountSucceed,
total: fileCount
})
// Upload data
do {
await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch(() => {
// Uploading finished
if (fileCount === fileCountSucceed) {
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
} else {
// Add uploaded file
fileCountSucceed++
}
}).catch(error => {
switch (error.response.status) {
case 423:
events.$emit('alert:open', {
emoji: '😬',
title: this.$t('popup_exceed_limit.title'),
message: this.$t('popup_exceed_limit.message')
})
break;
case 413:
events.$emit('alert:open', {
emoji: '😟',
title: this.$t('popup_paylod_error.title'),
message: this.$t('popup_paylod_error.message')
})
break;
default:
attempts++
if (attempts === 3) {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
break;
}
})
}
})
} while (attempts !== 0 && attempts !== 3)
} while (chunks.length !== 0)
// Progress file log
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileCountSucceed,
total: fileCount
})
// Uploading finished
if (fileCount === fileCountSucceed) {
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
} else {
// Add uploaded file
fileCountSucceed++
}
}
}
@@ -184,29 +203,6 @@ const Helpers = {
// Add uploaded file
fileCountSucceed++
}
}).catch(error => {
switch (error.response.status) {
case 423:
events.$emit('alert:open', {
emoji: '😬',
title: this.$t('popup_exceed_limit.title'),
message: this.$t('popup_exceed_limit.message')
})
break;
case 413:
events.$emit('alert:open', {
emoji: '😟',
title: this.$t('popup_paylod_error.title'),
message: this.$t('popup_paylod_error.message')
})
break;
default:
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
break;
}
})
}
}

2
resources/js/i18n/lang/en.json
View File

@@ -680,7 +680,7 @@
"href": "Please confirm your payment."
},
"uploading": {
"progress": "Uploading files {current}/{total}"
"progress": "Uploading File {progress}% - {current}/{total}"
},
"user_add_card": {
"default_description": "Your card will be charged for billing plans as first.",

38
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -72,7 +72,7 @@ const actions = {
})
.catch(() => isSomethingWrong())
},
uploadFiles: ({commit, getters}, files) => {
uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
return new Promise((resolve, reject) => {
// Get route
@@ -81,12 +81,15 @@ const actions = {
: '/api/upload'
axios
.post(route, files, {
.post(route, form, {
headers: {
'Content-Type': 'multipart/form-data'
'Content-Type': 'application/octet-stream'
},
onUploadProgress: progressEvent => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
onUploadProgress: event => {
let loaded = totalUploadedSize + event.loaded
var percentCompleted = Math.floor((loaded * 100) / fileSize)
commit('UPLOADING_FILE_PROGRESS', percentCompleted)
}
@@ -97,13 +100,34 @@ const actions = {
if (response.data.folder_id == getters.currentFolder.unique_id)
commit('ADD_NEW_ITEMS', response.data)
commit('UPLOADING_FILE_PROGRESS', 0)
resolve(response)
})
.catch(error => {
reject(error)
switch (error.response.status) {
case 423:
events.$emit('alert:open', {
emoji: '😬',
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
})
break;
case 413:
events.$emit('alert:open', {
emoji: '😟',
title: i18n.t('popup_paylod_error.title'),
message: i18n.t('popup_paylod_error.message')
})
break;
default:
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
break;
}
// Reset uploader
commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})