chunk upload

app/FileManagerFile.php

@@ -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);

app/Http/Controllers/FileAccessController.php

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

app/Http/Controllers/FileFunctions/EditItemsController.php

@@ -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

app/Http/Helpers/helpers.php

@@ -19,11 +19,11 @@ use Intervention\Image\ImageManagerStatic as Image;
  */
 function obfuscate_email($email)
 {
-    $em   = explode("@",$email);
+    $em = explode("@", $email);
-    $name = implode('@', array_slice($em, 0, count($em)-1));
+    $name = implode('@', array_slice($em, 0, count($em) - 1));
-    $len  = floor(strlen($name)/2);
+    $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':
@@ -471,3 +471,32 @@ function get_file_type($file)
             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;
+}

app/Http/Tools/Editor.php

@@ -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
+        // Check or create directories
-        $user_scope = is_null($shared) ? $request->user()->token()->scopes[0] : 'editor';
+        self::check_directories(['chunks', 'file-manager']);
-        $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
-        $user_storage_used = user_storage_percentage($user_id, $file->getSize());
 
-        // Get storage limitation setup
+        // Generate file
-        $storage_limitation = get_setting('storage_limitation');
+        File::append(storage_path() . '/app/chunks/' . $file->getClientOriginalName(), $file->get());
 
-        // Check if user can upload
+        // If last then process file
-        if ($storage_limitation && $user_storage_used >= 100) {
+        if ($request->has('is_last') && $request->boolean('is_last')) {
-            abort(423, 'You exceed your storage limit!');
+
+            // 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);
+        }
+    }
 }

resources/js/Upload.vue

@@ -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>

resources/js/components/FilesView/UploadProgress.vue

@@ -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>

resources/js/helpers.js

@@ -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
+                do {
-                formData.append('file', files[i])
+                    let isLast = chunks.length === 1
+                    let chunk = chunks.shift()
+                    let attempts = 0
 
-                // Append form data
+                    // Set form data
-                formData.append('parent_id', rootFolder)
+                    formData.set('is_last', isLast);
+                    formData.set('file', chunk, `${file.name}.part`);
+                    formData.set('parent_id', rootFolder)
 
-                // Upload data
+                    // Upload data
-                await store.dispatch('uploadFiles', formData)
+                    do {
-                    .then(() => {
+                        await store.dispatch('uploadFiles', {
-                        // Progress file log
+                            form: formData,
-                        store.commit('UPDATE_FILE_COUNT_PROGRESS', {
+                            fileSize: file.size,
-                            current: fileCountSucceed,
+                            totalUploadedSize: uploadedSize
-                            total: fileCount
+                        }).then(() => {
-                        })
+                            uploadedSize = uploadedSize + chunk.size
+                        }).catch(() => {
 
-                        // Uploading finished
+                            attempts++
-                        if (fileCount === fileCountSucceed) {
+
-                            store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+                            if (attempts === 3) {
-                        } 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:
                                 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;
-                    }
                 })
             }
         }

resources/js/i18n/lang/en.json

@@ -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.",

resources/js/store/modules/fileFunctions.js

@@ -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 => {
+                    onUploadProgress: event => {
-                        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+
+                        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)
                 })