diff --git a/app/Http/Controllers/Common/Uploads.php b/app/Http/Controllers/Common/Uploads.php
index 9715e3d0d..f0f897156 100644
--- a/app/Http/Controllers/Common/Uploads.php
+++ b/app/Http/Controllers/Common/Uploads.php
@@ -121,10 +121,21 @@ class Uploads extends Controller
      */
     public function destroy($id, Request $request)
     {
+        $return = back();
+
+        if ($request->has('ajax') && $request->get('ajax')) {
+            $return = [
+                'success' => true,
+                'errors' => false,
+                'message' => '',
+                'redirect' => $request->get('redirect')
+            ];
+        }
+
         try {
             $media = Media::find($id);
         } catch (\Exception $e) {
-            return back();
+            return $return;
         }
 
         // Get file path
@@ -133,7 +144,7 @@ class Uploads extends Controller
 
             flash($message)->warning();
 
-            return back();
+            return $return;
         }
 
         $media->delete(); //will not delete files
@@ -150,7 +161,7 @@ class Uploads extends Controller
             }
         }
 
-        return back();
+        return $return;
     }
 
     /**
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index dc4ee782b..1afbc2bb6 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -313,6 +313,80 @@ export default {
             });
         },
 
+        // Delete attachment file
+        onDeleteFile(file_id, url, title, message, button_cancel, button_delete) {
+            let file_data = {
+                page: null,
+                key: null,
+                value: null,
+                ajax: true,
+                redirect: window.location.href 
+            };
+
+            if (this.form['page' +  file_id]) {
+                file_data.page = this.form['page' +  file_id];
+            }
+
+            if (this.form['key' +  file_id]) {
+                file_data.key = this.form['key' +  file_id];
+            }
+
+            if (this.form['value' +  file_id]) {
+                file_data.value = this.form['value' +  file_id];
+            }
+
+            let confirm = {
+                url: url,
+                title: title,
+                message: message,
+                button_cancel: button_cancel,
+                button_delete: button_delete,
+                file_data: file_data,
+                show: true
+            };
+
+            this.component = Vue.component('add-new-component', (resolve, reject) => {
+                resolve({
+                    template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
+
+                    components: {
+                        AkauntingModal,
+                    },
+
+                    data: function () {
+                        return {
+                            confirm: confirm,
+                        }
+                    },
+
+                    methods: {
+                        // Delete action post
+                       async onDelete() {
+                            let promise = Promise.resolve(axios({
+                                method: 'DELETE',
+                                url: this.confirm.url,
+                                data: file_data
+                            }));
+
+                            promise.then(response => {
+                                if (response.data.redirect) {
+                                    window.location.href = response.data.redirect;
+                                }
+                            })
+                            .catch(error => {
+                                this.success = false;
+                            });
+                        },
+
+                        // Close modal empty default value
+                        cancelDelete() {
+                            this.confirm.show = false;
+                        },
+                    }
+                })
+            });
+        },
+
         clickTab(id) {
             let event = new document.window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
 
diff --git a/resources/views/partials/media/file.blade.php b/resources/views/partials/media/file.blade.php
index 14be5bba4..1eb5b6dd8 100644
--- a/resources/views/partials/media/file.blade.php
+++ b/resources/views/partials/media/file.blade.php
@@ -26,23 +26,15 @@
 
             <div class="col-auto">
                 @permission('delete-common-uploads')
-                    {!! Form::open([
-                        'id' => $column_name. '-' . $file->id,
-                        'method' => 'DELETE',
-                        'url' => [url('uploads/' . $file->id)],
-                        'class' => 'd-inline'
-                    ]) !!}
+                    <a href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="btn btn-sm btn-danger text-white header-button-top">
+                        <i class="fas fa-times"></i>
+                    </a>
 
-                        <a href="javascript:void();" id="remove-{{ $column_name }}" type="button" class="btn btn-sm btn-danger text-white header-button-top">
-                            <i class="fas fa-times"></i>
-                        </a>
-
-                        @if ($options)
-                            <input type="hidden" name="page" value="{{ $options['page'] }}" />
-                            <input type="hidden" name="key" value="{{ $options['key'] }}" />
-                            <input type="hidden" name="value" value="{{ $file->id }}" />
-                        @endif
-                    {!! Form::close() !!}
+                    @if ($options)
+                        <input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
+                        <input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
+                        <input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
+                    @endif
                 @endpermission
 
                 <a href="{{ url('uploads/' . $file->id . '/download') }}" type="button" class="btn btn-sm btn-info text-white header-button-top">