Skip to content

P
Platform
Unverified Commit a087c41f authored by Micheal Mand's avatar Micheal Mand
Browse files
Options

Reimplement drag-n-drop media upload 

Signed-off-by: 's avatarMicheal Mand <micheal@kmdwebdesigns.com>
parent 230d6232
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 95 deletions
Modules/Media/Assets/js/components/MediaList.vue
View file @ a087c41f
...@@ -19,25 +19,38 @@ ...@@ -19,25 +19,38 @@
</div> </div>
<div class="box box-primary"> <div class="box box-primary">
<div class="box-body"> <div class="box-body">
<upload-zone v-if="showUploadZone" :parent-id="folderId"></upload-zone>
<div class="tool-bar el-row" style="padding-bottom: 20px;"> <div class="tool-bar el-row" style="padding-bottom: 20px;">
<div class="actions el-col el-col-14"> <div class="actions el-col el-col-19">
<new-folder :parent-id="folderId"></new-folder> <new-folder :parent-id="folderId"></new-folder>
<upload-button :parent-id="folderId"></upload-button> <el-button-group>
<el-button-group style="width: 30%"> <el-button
<el-button type="warning" type="primary"
@click="toggleUploadZone"
>
{{ trans('media.upload file') }}
</el-button>
</el-button-group>
<el-button-group>
<el-button
type="warning"
:disabled="selectedMedia.length === 0" :disabled="selectedMedia.length === 0"
@click="showMoveMedia" @click="showMoveMedia"
>{{ trans('core.move') }} >
{{ trans('core.move') }}
</el-button> </el-button>
<el-button type="danger" :disabled="selectedMedia.length === 0" <el-button
@click.prevent="batchDelete" :loading="filesAreDeleting"> type="danger"
:disabled="selectedMedia.length === 0"
@click.prevent="batchDelete"
:loading="filesAreDeleting"
>
{{ trans('core.button.delete') }} {{ trans('core.button.delete') }}
</el-button> </el-button>
</el-button-group> </el-button-group>
</div> </div>
<div class="search el-col el-col-5"> <div class="search el-col el-col-5">
<el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery"> <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery"></el-input>
</el-input>
</div> </div>
</div> </div>
<el-row> <el-row>
...@@ -56,35 +69,27 @@ ...@@ -56,35 +69,27 @@
ref="mediaTable" ref="mediaTable"
v-loading.body="tableIsLoading" v-loading.body="tableIsLoading"
@sort-change="handleSortChange" @sort-change="handleSortChange"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange"
<el-table-column >
type="selection" <el-table-column type="selection" width="55"></el-table-column>
width="55">
</el-table-column>
<el-table-column label="" width="150"> <el-table-column label="" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="scope.row.small_thumb" alt="" v-if="scope.row.is_image"/> <img :src="scope.row.small_thumb" alt="" v-if="scope.row.is_image"/>
<i :class="`fa ${scope.row.fa_icon}`" style="font-size: 38px;" <i :class="`fa ${scope.row.fa_icon}`" style="font-size: 38px;" v-if="! scope.row.is_image && ! scope.row.is_folder"></i>
v-if="! scope.row.is_image && ! scope.row.is_folder"></i> <i class="fa fa-folder" style="font-size: 38px;" v-if="scope.row.is_folder"></i>
<i class="fa fa-folder" style="font-size: 38px;"
v-if="scope.row.is_folder"></i>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom"> <el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<strong v-if="scope.row.is_folder" style="cursor: pointer;" @click="enterFolder(scope)"> <strong v-if="scope.row.is_folder" style="cursor: pointer;" @click="enterFolder(scope)">
{{ scope.row.filename }} {{ scope.row.filename }}
</strong> </strong>
<span v-else> <span v-else>
<a href="#" <a href="#" @click.prevent="goToEdit(scope)">{{ scope.row.filename }}</a>
@click.prevent="goToEdit(scope)">{{ scope.row.filename }}</a>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="created_at" :label="trans('core.table.created at')" sortable="custom" <el-table-column prop="created_at" :label="trans('core.table.created at')" sortable="custom" width="150"></el-table-column>
width="150">
</el-table-column>
<el-table-column prop="actions" label="" width="150"> <el-table-column prop="actions" label="" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="pull-right"> <div class="pull-right">
...@@ -92,17 +97,21 @@ ...@@ -92,17 +97,21 @@
type="primary" type="primary"
size="small" size="small"
@click.prevent="insertMedia(scope)" @click.prevent="insertMedia(scope)"
v-if="singleModal && ! scope.row.is_folder"> v-if="singleModal && ! scope.row.is_folder"
>
{{ trans('media.insert') }} {{ trans('media.insert') }}
</el-button> </el-button>
<div v-if="! singleModal"> <div v-if="! singleModal">
<el-button-group> <el-button-group>
<edit-button :to="{name: 'admin.media.media.edit', params: {mediaId: scope.row.id}}" <edit-button
v-if="! scope.row.is_folder"></edit-button> :to="{name: 'admin.media.media.edit', params: {mediaId: scope.row.id}}"
v-if="! scope.row.is_folder"
></edit-button>
<el-button <el-button
size="mini" size="mini"
@click.prevent="showEditFolder(scope.row)" @click.prevent="showEditFolder(scope.row)"
v-if="scope.row.is_folder && canEditFolders"> v-if="scope.row.is_folder && canEditFolders"
>
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
</el-button> </el-button>
<delete-button :scope="scope" :rows="data"></delete-button> <delete-button :scope="scope" :rows="data"></delete-button>
...@@ -120,8 +129,8 @@ ...@@ -120,8 +129,8 @@
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:page-size="parseInt(meta.per_page)" :page-size="parseInt(meta.per_page)"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="meta.total"> :total="meta.total"
</el-pagination> ></el-pagination>
</div> </div>
</div> </div>
</div> </div>
...@@ -135,14 +144,14 @@ ...@@ -135,14 +144,14 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import NewFolder from './NewFolder.vue'; import NewFolder from './NewFolder.vue';
import UploadButton from './UploadButton.vue'; import UploadZone from './UploadZone';
import RenameFolder from './RenameFolder.vue'; import RenameFolder from './RenameFolder.vue';
import MoveMediaDialog from './MoveMediaDialog.vue'; import MoveMediaDialog from './MoveMediaDialog.vue';
export default { export default {
components: { components: {
'new-folder': NewFolder, 'new-folder': NewFolder,
'upload-button': UploadButton, 'upload-zone': UploadZone,
'rename-folder': RenameFolder, 'rename-folder': RenameFolder,
'move-dialog': MoveMediaDialog, 'move-dialog': MoveMediaDialog,
}, },
...@@ -169,6 +178,7 @@ ...@@ -169,6 +178,7 @@
folderBreadcrumb: [ folderBreadcrumb: [
{ id: 0, name: 'Home' }, { id: 0, name: 'Home' },
], ],
showUploadZone: false,
filesAreDeleting: false, filesAreDeleting: false,
canEditFolders: true, canEditFolders: true,
}; };
...@@ -190,7 +200,6 @@ ...@@ -190,7 +200,6 @@
this.data = response.data.data; this.data = response.data.data;
this.meta = response.data.meta; this.meta = response.data.meta;
this.links = response.data.links; this.links = response.data.links;
this.order_meta.order_by = properties.order_by; this.order_meta.order_by = properties.order_by;
this.order_meta.order = properties.order; this.order_meta.order = properties.order;
}); });
...@@ -209,6 +218,7 @@ ...@@ -209,6 +218,7 @@
this.folderBreadcrumb = [ this.folderBreadcrumb = [
{ id: 0, name: 'Home' }, { id: 0, name: 'Home' },
]; ];
return; return;
} }
axios.get(route('api.media.folders.breadcrumb', { folder: folderId })) axios.get(route('api.media.folders.breadcrumb', { folder: folderId }))
...@@ -249,6 +259,9 @@ ...@@ -249,6 +259,9 @@
handleSelectionChange(selectedMedia) { handleSelectionChange(selectedMedia) {
this.selectedMedia = selectedMedia; this.selectedMedia = selectedMedia;
}, },
toggleUploadZone() {
this.showUploadZone = !this.showUploadZone;
},
showEditFolder(scope) { showEditFolder(scope) {
this.$events.emit('editFolderWasClicked', scope); this.$events.emit('editFolderWasClicked', scope);
}, },
......
Modules/Media/Assets/js/components/NewFolder.vue
View file @ a087c41f
<template> <template>
<div> <el-button-group>
<el-button type="success" class="new-folder" @click="dialogFormVisible = true"> <el-button type="success" class="new-folder" @click="dialogFormVisible = true">
<i class="fa fa-plus"></i> {{ trans('folders.create resource') }} <i class="fa fa-plus"></i> {{ trans('folders.create resource') }}
</el-button> </el-button>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</span> </span>
</el-dialog> </el-dialog>
</div> </el-button-group>
</template> </template>
<script> <script>
......
Modules/Media/Assets/js/components/UploadZone.vue
View file @ a087c41f
<template> <template>
<div class="row">
<div class="col-xs-12">
<el-upload <el-upload
class="media-upload" class="media-upload"
drag drag
:action="uploadUrl" :action="uploadUrl"
:on-preview="handlePreview" list-type="picture"
:on-remove="handleRemove" :show-file-list="false"
:on-success="handleSuccess" :http-request="uploadFile"
:file-list="fileList" multiple
:headers="requestHeaders" >
multiple>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload</em></div> <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
</el-upload> </el-upload>
</div>
</div>
</template> </template>
<script> <script>
import axios from 'axios';
export default { export default {
props: {
parentId: { type: Number },
},
data() { data() {
return { return {
fileList: [], fileIsUploading: false,
}; };
}, },
computed: { computed: {
uploadUrl() { uploadUrl() {
return route('api.media.store').domain + route('api.media.store').url; 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: { 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.$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> </script>
<style> <style>
.media-upload {
margin-bottom: 10px;
}
.el-upload__input { .el-upload__input {
display: none !important; 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 { .el-upload-dragger {
width: 100%; 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> </style>
Modules/Translation/Resources/lang/media/en/media.php
View file @ a087c41f
...@@ -38,6 +38,7 @@ return [ ...@@ -38,6 +38,7 @@ return [
'create resource' => 'Create media', 'create resource' => 'Create media',
'edit resource' => 'Edit media', 'edit resource' => 'Edit media',
'destroy resource' => 'Delete media', 'destroy resource' => 'Delete media',
'file uploaded' => 'File uploaded successfully',
'file too large' => 'File is too large. Must be below :size MB.', 'file too large' => 'File is too large. Must be below :size MB.',
'some files not moved' => 'Some files were not moved', 'some files not moved' => 'Some files were not moved',
'files moved successfully' => 'Files moved successfully', 'files moved successfully' => 'Files moved successfully',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023