Merge pull request #628 from mikemand/feature/drag-and-drop-media-upload

Reimplement drag-n-drop media upload

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>
-                <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>
+    <el-upload
+        class="media-upload"
+        drag
+        :action="uploadUrl"
+        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>
 </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) {
-                this.$events.emit('fileWasUploaded', response);
-                this.fileList = [];
+            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.$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',