Skip to content

Commit d6e35a5

Browse files
committed
feat: Add cropp media
1 parent 84ffbeb commit d6e35a5

File tree

9 files changed

+387
-170
lines changed

9 files changed

+387
-170
lines changed

app/Http/Controllers/MediaController.php

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ public function fileAdd(Request $request){
113113
$path = $file->path();
114114
$oryginalName = $file->getClientOriginalName();
115115
if(!empty($mediaFolder)){
116-
$mediaFolder->addMedia($path)->usingName($oryginalName)->toMediaCollection();
116+
$mediaFolder->addMedia($path)->usingFileName( date('YmdHis') . $oryginalName )->usingName($oryginalName)->toMediaCollection();
117117
}
118118
}
119119
return redirect()->route('media.folder.index', ['id' => $request->input('thisFolder')]);
@@ -179,4 +179,35 @@ public function fileMove(Request $request){
179179
return redirect()->route('media.folder.index', ['id' => $request->input('thisFolder')]);
180180
}
181181

182+
public function cropp(Request $request){
183+
request()->validate([
184+
'file' => "required",
185+
'thisFolder' => 'numeric',
186+
'id' => 'numeric'
187+
]);
188+
$mediaFolder = Folder::where('id', '=', $request->input('thisFolder'))->first();
189+
$media = $mediaFolder->getMedia()->where('id', $request->input('id'))->first();
190+
if($request->hasFile('file')){
191+
$file = $request->file('file');
192+
$path = $file->path();
193+
$oryginalName = $file->getClientOriginalName();
194+
if(!empty($mediaFolder)){
195+
$mediaFolder->addMedia($path)->usingName($media->name)->toMediaCollection();
196+
}
197+
$media->delete();
198+
}
199+
return response()->json('success');
200+
}
201+
202+
public function fileCopy(Request $request){
203+
$validatedData = $request->validate([
204+
'id' => 'numeric',
205+
'thisFolder' => 'numeric',
206+
]);
207+
$oldFolder = Folder::where('id', '=', $request->input('thisFolder'))->first();
208+
$media = $oldFolder->getMedia()->where('id', $request->input('id'))->first();
209+
$oldFolder->addMedia($media->getPath())->usingName($media->name)->toMediaCollection();
210+
return redirect()->route('media.folder.index', ['id' => $request->input('thisFolder')]);
211+
}
212+
182213
}

package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,12 @@
7474
"@coreui/coreui": "3.0.0-beta.3",
7575
"@coreui/coreui-chartjs": "2.0.0-beta.0",
7676
"@coreui/icons": "1.0.0-beta.3",
77+
"axios": "^0.19.0",
7778
"chart.js": "^2.8.0",
78-
"pace-progress": "1.0.2",
79-
"perfect-scrollbar": "1.4.0",
79+
"cropperjs": "^1.5.6",
8080
"laravel-mix": "^5.0.0",
81-
"axios": "^0.19.0"
81+
"pace-progress": "1.0.2",
82+
"perfect-scrollbar": "1.4.0"
8283
},
8384
"devDependencies": {
8485
"cross-env": "^6.0.0",

public/mix-manifest.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
{
2+
"/js/media.js": "/js/media.js",
3+
"/js/media-cropp.js": "/js/media-cropp.js",
24
"/js/menu-create.js": "/js/menu-create.js",
35
"/css/style.css": "/css/style.css",
46
"/js/menu-edit.js": "/js/menu-edit.js",
57
"/css/pace.min.css": "/css/pace.min.css",
68
"/css/coreui-chartjs.css": "/css/coreui-chartjs.css",
9+
"/css/cropper.css": "/css/cropper.css",
710
"/js/axios.min.js": "/js/axios.min.js",
811
"/js/pace.min.js": "/js/pace.min.js",
912
"/js/coreui.bundle.min.js": "/js/coreui.bundle.min.js",
1013
"/js/Chart.min.js": "/js/Chart.min.js",
1114
"/js/coreui-chartjs.bundle.js": "/js/coreui-chartjs.bundle.js",
15+
"/js/cropper.js": "/js/cropper.js",
1216
"/js/main.js": "/js/main.js",
1317
"/js/colors.js": "/js/colors.js",
1418
"/js/charts.js": "/js/charts.js",

resources/js/coreui/media-cropp.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var self = this
2+
3+
this.changePort = '' // :8000
4+
5+
this.removeFolderModal = new coreui.Modal(document.getElementById('cropp-img-modal'))
6+
7+
this.cropper = null;
8+
this.croppUrl = null;
9+
this.croppFileId = null;
10+
11+
this.uploadCroppedImage = function(){
12+
self.cropper.getCroppedCanvas().toBlob((blob) => {
13+
const formData = new FormData();
14+
formData.append('file', blob);
15+
formData.append('thisFolder', document.getElementById('this-folder-id').value);
16+
formData.append('id', self.croppFileId );
17+
axios.post( '/media/file/cropp', formData )
18+
.then(function (response) {
19+
location.reload();
20+
})
21+
.catch(function (error) {
22+
console.log(error)
23+
})
24+
}/*, 'image/png' */);
25+
}
26+
27+
this.afterShowedCroppModal = function(){
28+
if(self.cropper !== null){
29+
self.cropper.replace( self.croppUrl )
30+
}else{
31+
let image = document.getElementById('cropp-img-img');
32+
self.cropper = new Cropper(image, {
33+
minContainerWidth: 600,
34+
minContainerHeight: 600
35+
});
36+
}
37+
}
38+
39+
this.showCroppModal = function(data){
40+
self.croppUrl = data.url
41+
self.croppUrl = self.croppUrl.replace( 'localhost', 'localhost' + self.changePort )
42+
document.getElementById('cropp-img-img').setAttribute('src', self.croppUrl)
43+
self.removeFolderModal.show()
44+
}
45+
46+
this.croppImg = function(e){
47+
self.croppFileId = e.target.getAttribute('atr')
48+
axios.get( '/media/file?id=' + self.croppFileId + '&thisFolder=' + document.getElementById('this-folder-id').value )
49+
.then(function (response) {
50+
self.showCroppModal(response.data)
51+
})
52+
.catch(function (error) {
53+
console.log(error)
54+
})
55+
}
56+
57+
let croppFiles = document.getElementsByClassName("file-cropp-file")
58+
for(let i = 0; i < croppFiles.length; i++){
59+
croppFiles[i].addEventListener('click', this.croppImg )
60+
}
61+
document.getElementById("cropp-img-modal").addEventListener("show.coreui.modal", this.afterShowedCroppModal );
62+
document.getElementById('cropp-img-save-button').addEventListener('click', this.uploadCroppedImage );

resources/js/coreui/media.js

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
var self = this;
2+
3+
this.removeFolderModal = new coreui.Modal(document.getElementById('remove-folder-modal'))
4+
this.removeFileModal = new coreui.Modal(document.getElementById('remove-file-modal'))
5+
6+
7+
this.showCard = function( showThisCard ){
8+
document.getElementById('file-rename-file-card').classList.add('d-none')
9+
document.getElementById('file-info-card').classList.add('d-none')
10+
document.getElementById('file-rename-folder-card').classList.add('d-none')
11+
document.getElementById('file-move-file').classList.add('d-none')
12+
document.getElementById('file-move-folder').classList.add('d-none')
13+
document.getElementById( showThisCard ).classList.remove('d-none')
14+
}
15+
16+
this.buildFileInfoCard = function(data){
17+
document.getElementById("file-div-name").innerText = data['name']
18+
document.getElementById("file-div-real-name").innerText = data['realName']
19+
document.getElementById("file-div-url").innerText = data['url']
20+
document.getElementById("file-div-mime-type").innerText = data['mimeType']
21+
document.getElementById("file-div-size").innerText = data['size']
22+
document.getElementById("file-div-created-at").innerText = data['createdAt']
23+
document.getElementById("file-div-updated-at").innerText = data['updatedAt']
24+
}
25+
26+
this.buildFileRenameFileCard = function(data){
27+
document.getElementById("file-rename-file-id").value = data['id']
28+
document.getElementById("file-rename-file-name").value = data['name']
29+
}
30+
31+
this.buildFileRenameFolderCard = function(data){
32+
document.getElementById("file-rename-folder-id").value = data['id']
33+
document.getElementById("file-rename-folder-name").value = data['name']
34+
}
35+
36+
this.clickFile = function(e){
37+
axios.get( '/media/file?id=' + e.target.getAttribute("atr") + '&thisFolder=' + document.getElementById('this-folder-id').value )
38+
.then(function (response) {
39+
self.buildFileInfoCard(response.data)
40+
self.showCard('file-info-card')
41+
})
42+
.catch(function (error) {
43+
console.log(error)
44+
})
45+
}
46+
47+
this.fileChangeName = function(e){
48+
axios.get( '/media/file?id=' + e.target.getAttribute("atr") + '&thisFolder=' + document.getElementById('this-folder-id').value )
49+
.then(function (response) {
50+
self.buildFileInfoCard(response.data) //must be
51+
self.buildFileRenameFileCard(response.data)
52+
self.showCard('file-rename-file-card')
53+
})
54+
.catch(function (error) {
55+
console.log(error)
56+
})
57+
}
58+
59+
this.folderChangeName = function(e){
60+
axios.get( '/media/folder?id=' + e.target.getAttribute("atr") )
61+
.then(function (response) {
62+
self.buildFileRenameFolderCard(response.data)
63+
self.showCard('file-rename-folder-card')
64+
})
65+
.catch(function (error) {
66+
console.log(error)
67+
})
68+
}
69+
70+
this.moveFile = function(e){
71+
document.getElementById('file-move-file-id').value = e.target.getAttribute('atr')
72+
self.showCard('file-move-file')
73+
}
74+
75+
this.moveFolder = function(e){
76+
document.getElementById('file-move-folder-id').value = e.target.getAttribute('atr')
77+
let radios = document.getElementsByClassName('file-move-folder-radio');
78+
for(let i =0; i<radios.length; i++){
79+
if(radios[i].value === e.target.getAttribute('atr')){
80+
radios[i].disabled = true;
81+
}else{
82+
radios[i].disabled = false;
83+
}
84+
}
85+
self.showCard('file-move-folder')
86+
}
87+
88+
this.deleteFolder = function(e){
89+
document.getElementById('file-delete-folder-id').value = e.target.getAttribute('atr')
90+
self.removeFolderModal.show();
91+
}
92+
93+
this.deleteFile = function(e){
94+
document.getElementById('file-delete-file-id').value = e.target.getAttribute('atr')
95+
self.removeFileModal.show();
96+
}
97+
98+
this.renameFileCancel = function(){
99+
self.showCard('file-info-card')
100+
}
101+
102+
this.renameFolderCancel = function(){
103+
self.showCard('file-info-card')
104+
}
105+
106+
this.moveFileCancel = function(){
107+
self.showCard('file-info-card')
108+
}
109+
110+
this.moveFolderCancel = function(){
111+
self.showCard('file-info-card')
112+
}
113+
114+
let files = document.getElementsByClassName("click-file")
115+
for(let i = 0; i < files.length; i++){
116+
files[i].addEventListener('click', this.clickFile )
117+
}
118+
let renameButtons = document.getElementsByClassName('file-change-file-name')
119+
for(let i = 0; i< renameButtons.length; i++){
120+
renameButtons[i].addEventListener('click', this.fileChangeName )
121+
}
122+
renameButtons = document.getElementsByClassName('file-change-folder-name')
123+
for(let i=0; i<renameButtons.length; i++){
124+
renameButtons[i].addEventListener('click', this.folderChangeName )
125+
}
126+
let moveButtons = document.getElementsByClassName('file-move-file')
127+
for(let i=0; i<moveButtons.length; i++){
128+
moveButtons[i].addEventListener('click', this.moveFile )
129+
}
130+
moveButtons = document.getElementsByClassName('file-move-folder')
131+
for(let i=0; i<moveButtons.length; i++){
132+
moveButtons[i].addEventListener('click', this.moveFolder )
133+
}
134+
let deleteButtons = document.getElementsByClassName('file-delete-folder')
135+
for(let i=0; i<deleteButtons.length; i++){
136+
deleteButtons[i].addEventListener('click', this.deleteFolder )
137+
}
138+
deleteButtons = document.getElementsByClassName('file-delete-file')
139+
for(let i=0; i<deleteButtons.length; i++){
140+
deleteButtons[i].addEventListener('click', this.deleteFile )
141+
}
142+
143+
document.getElementById('file-rename-file-cancel').addEventListener('click', this.renameFileCancel)
144+
document.getElementById('file-rename-folder-cancel').addEventListener('click', this.renameFolderCancel)
145+
document.getElementById('file-move-file-cancel').addEventListener('click', this.moveFileCancel)
146+
document.getElementById('file-move-folder-cancel').addEventListener('click', this.moveFolderCancel)
147+
148+
document.getElementById('file-file-input').onchange = function() {
149+
document.getElementById('file-file-form').submit();
150+
};
151+
152+
self.showCard('file-info-card')
153+
154+

0 commit comments

Comments
 (0)