Thanks to the ref attribute we can easily access to the input field where type is file.prepareToDelete:prepareToDelete(file) { this.deletingFile = file; this.showConfirm = true;},Mark a specific file as file for deleting and show custom confirmation.cancelDeleting:cancelDeleting() { this.deletingFile = {}; this.showConfirm = false;},Delete the information about the specific file and close custom confirm.deleteFile:AJAX request to the server with a specific file id.On success and or error show notification, and then fetch files on current tab with current page.editFile:editFile(file) { this.editingFile = file;},Mark a specific file as file for editing.endEditing:Append name, type and extension to the form data and send AJAX request to the server.Show notification on success, and then change image without page reloading..Otherwise show notification with errors.showNotification:showNotification(text, success) { if (success === true) { this.clearErrors(); } var application = this; application.message = text; application.notification = true; setTimeout(function() { application.notification = false; }, 15000);},Show notification on success or on error..So if success is true — show success notification.And then set timeout to hide notification.showModal:showModal(file) { this.file = file; this.modalActive = true;},Show modal window with a specific image.closeModal:closeModal() { this.modalActive = false; this.file = {};},Close modal window.changePage:changePage(page) { if (page > this.pagination.last_page) { page = this.pagination.last_page; } this.pagination.current_page = page; this.fetchFile(this.activeTab, page);},Allows us to change the page.resetForm:resetForm() { this.formData = {}; this.fileName = ''; this.attachment = '';},It is as it is..Just reset the form data.anyError:anyError() { return Object.keys(this.errors).length > 0;},Check if there are any errors here.clearErrors:clearErrors() { this.errors = {};}Clear errors object.ComputedHere we generate pages for pagination..So, the pages property contain logic for the pagination (Pagination with ajax request using Laravel and Vue for explanation):MountedFetch all the records:mounted() { this.fetchFile(this.activeTab, this.pagination.current_page);},activeTab is image by default and pagination.current_page = 1 by default.ConclusionAt the end we have a service that allow us to upload files to the server..These files can be four types: image, audio, video and document..Our system automatically recognize file type and upload file in the personal specific directory.Also we have such components as modal window for the specific image:Modal window for the specific imageNotifications:Notification on successNotification on errorCustom confirm:Confirm on file deletingAnd pagination:Pagination in actionOf course here is a lot of work to improve this project..But the first step is done and in the future you can do what you want.P.S..The source code available on GitHub..If you have any questions or suggestions write it on the comments..Thank you for the reading!UPDATEArticle version you can find in 1.0.0 release on GitHub..But after that code was refactored and now on GitHub you’ll find release 1.1.1.In the last release there were some improvements in the front end:Added property savedFileChanged method editFileeditFile(file) { this.editingFile = file; this.savedFile.type = file.type; this.savedFile.name = file.name; this.savedFile.extension = file.extension;}3.. More details