Reimplement drag-n-drop media upload

Signed-off-by: Micheal Mand <micheal@kmdwebdesigns.com>

Modules/Media/Assets/js/components/NewFolder.vue

 <template>
-    <div>
+    <el-button-group>
         <el-button type="success" class="new-folder" @click="dialogFormVisible = true">
             <i class="fa fa-plus"></i> {{ trans('folders.create resource') }}
         </el-button>
@@ -18,7 +18,7 @@
             </span>
         </el-dialog>
 
-    </div>
+    </el-button-group>
 </template>
 
 <script>

Modules/Media/Assets/js/components/UploadZone.vue

 <template>
-    <div class="row">
-        <div class="col-xs-12">
     <el-upload
         class="media-upload"
         drag
         :action="uploadUrl"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :on-success="handleSuccess"
-                    :file-list="fileList"
-                    :headers="requestHeaders"
-                    multiple>
+        list-type="picture"
+        :show-file-list="false"
+        :http-request="uploadFile"
+        multiple
+    >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
     </el-upload>
-        </div>
-    </div>
 </template>
 
 <script>
+    import axios from 'axios';
+
     export default {
+        props: {
+            parentId: { type: Number },
+        },
         data() {
             return {
-                fileList: [],
+                fileIsUploading: false,
             };
         },
         computed: {
             uploadUrl() {
                 return route('api.media.store').domain + route('api.media.store').url;
             },
-            requestHeaders() {
-                const userApiToken = document.head.querySelector('meta[name="user-api-token"]');
-                return {
-                    Authorization: `Bearer ${userApiToken.content}`,
-                };
-            },
         },
         methods: {
-            handleSuccess(response) {
+            uploadFile(event) {
+                this.fileIsUploading = true;
+                const data = new FormData();
+                data.append('parent_id', this.parentId);
+                data.append('file', event.file);
+                axios.post(route('api.media.store'), data).then((response) => {
                     this.$events.emit('fileWasUploaded', response);
-                this.fileList = [];
+                    this.$message({
+                        type: 'success',
+                        message: this.trans('media.file uploaded'),
+                    });
+                    this.fileIsUploading = false;
+                }, (error) => {
+                    console.log(error.response.data);
+                    this.fileIsUploading = false;
+                    this.$notify.error({
+                        title: 'Error',
+                        message: error.response.data.errors.file[0],
+                    });
+                });
             },
-            handlePreview() {},
-            handleRemove() {},
         },
-        mounted() {},
     };
 </script>
 <style>
+    .media-upload {
+        margin-bottom: 10px;
+    }
+
     .el-upload__input {
         display: none !important;
     }
-    .el-upload--text {
-        display: block;
+
+    .el-upload--picture, .el-upload--picture-card {
+        width: 100%;
+        height: 175px;
+        line-height: 100px;
+        border: none;
     }
+
     .el-upload-dragger {
         width: 100%;
+        height: 100%;
     }
-    .media-upload {
-        margin-bottom: 10px;
+
+    .el-upload-dragger .el-upload__text {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .el-upload--text {
+        display: block;
     }
 </style>

Modules/Translation/Resources/lang/media/en/media.php

@@ -38,6 +38,7 @@ return [
     'create resource' => 'Create media',
     'edit resource' => 'Edit media',
     'destroy resource' => 'Delete media',
+    'file uploaded' => 'File uploaded successfully',
     'file too large' => 'File is too large. Must be below :size MB.',
     'some files not moved' => 'Some files were not moved',
     'files moved successfully' => 'Files moved successfully',