Dosya Yöneticisi Blade Dosyam;
<div class="modal fade bd-example-modal-xl" id="file_manager" mode="input" target="" loaded="false" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
</div>
<div class="modal-body" style="min-height: 250px">
<ul class="nav nav-tabs" id="file_manager_tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" id="file_upload_tab" data-bs-toggle="tab" href="#file_upload" role="tab" aria-controls="file_upload" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="file_list_tab" data-bs-toggle="tab" href="#file_list_tab_contents" role="tab" aria-controls="file_list" aria-selected="false">Profile</a>
</li>
</ul>
<div class="tab-content border border-top-0 p-3" id="file_manager_tab_contents">
<div class="tab-pane fade " id="file_upload" role="tabpanel" aria-labelledby="file-upload-tab">
<div class="dropzone">
</div>
</div>
<div class="tab-pane fade show active" id="file_list_tab_contents" role="tabpanel" aria-labelledby="file-list-tab">
<div class="mb-3">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="{{ trans('form.search') }}">
<div class="input-group-append">
<button id="search" class="btn btn-primary" onclick="load_files(false)">
<i class="feather icon-search mr-2"></i>{{ trans('button.search') }}</button>
</div>
</div>
</div>
<div class="row align-items-start align-content-start no-gutters" id="file_list" page="1" page-count="999">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script Kodlarım;
Dropzone.autoDiscover = false;
Dropzone.options.dzone = {
acceptedFiles: ".jpg, .png"
};
var $file_manager = $('#file_manager');
var $file_upload = $('#file_upload');
var $file_upload_tab = $('#file_upload_tab');
var $file_list = $('#file_list');
var $file_list_tab = $('#file_list_tab');
var $file_list_list = $('#file_list_tab_contents #file_list');
var $search_input = $('#file_list_tab_contents [name=search]');
var $search_button = $('#file_list_tab_contents button#search');
var $dropzone = $file_upload.find('.dropzone');
$dropzone.dropzone({
'url': '{{ route('file_manager.upload') }}',
'uploadMultiple': false,
'parallelUploads': 1,
'maxFilesize': 150,
headers: {
'x-csrf-token': '{{ csrf_token() }}',
},
});
$dropzone[0].dropzone.on('success', function (file, response) {
$dropzone[0].dropzone.removeFile(file);
})
$dropzone[0].dropzone.on('queuecomplete', function (file, response) {
load_files(false, function () {
$file_list_tab.tab('show');
});
})
//When modal open
$file_manager.on('show.bs.modal', function () {
if ($file_manager.attr('loaded') === 'false') {
load_files(false);
}
});
//When search
$search_input.on('keypress', function (event) {
if (event.keyCode == 13) {
load_files(false);
}
});
function load_files(append = true, callback = null) {
if (!append) {
$file_list_list.html('');
$file_list.attr('page', 1);
$file_list.attr('page-count', 999);
}
$.ajax({
url: '{{ route('file_manager') }}?search=' + $search_input.val() + '&extensions=' + $file_manager.attr('extensions') + '&choosable_sizes=' + $file_manager.attr('choosable_sizes') + '&page=' + $file_list_list.attr('page'),
beforeSend: function () {
$search_input.prop('disabled', true);
$search_button.addClass('disabled');
},
error: function () {
$search_input.prop('disabled', false);
$search_button.removeClass('disabled');
},
success: function (response) {
for (index in response.data) {
file = response.data[index];
sizes = file.sizes;
sizes_html = "";
for (size_name in file.sizes) {
size = file.sizes[size_name];
sizes_html += '<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center" select-file="/uploads/' + size.path + '" file-thumbnail="' + file.thumbnail + '" file-extension="' + file.extension + '"><strong>' + size_name + '</strong>' + (size.width != null ? ' <small class="ml-auto pl-4 text-muted text-primary">' + size.width + 'px / ' + size.height + 'px</small>' : '') + '</a>';
}
$file_list_list.append('<div class="col-6 col-md-4 col-lg-3 col-xl-2 px-1 d-flex align-items-center justify-content-center mb-2"><div class="dropdown" file="' + file.id + '"><div class="file-thumbnail" data-toggle="dropdown" aria-expanded="false"><img src="' + file.thumbnail + '" alt="' + file.file + '" class="img-fluid"><small class="name">' + file.title + '</small></div><div class="dropdown-menu">' + sizes_html + '</div></div></div>');
}
$file_manager.attr('loaded', true);
$search_input.prop('disabled', false);
$search_button.removeClass('disabled');
$file_list.attr('page', response.current_page);
$file_list.attr('page-count', response.last_page);
if (typeof callback === "function") {
callback();
}
}
});
}
//When file manager trigered
$(document).on('click', '[select-file]', function (event) {
event.preventDefault();
event.stopPropagation();
if ($file_manager.attr('mode') === 'editor') {
editor_context.invoke('editor.insertImage', $(this).attr('select-file'), function ($image) {
$image.addClass('img-fluid');
});
$file_manager.modal('hide');
}
if ($file_manager.attr('mode') === 'input') {
var $target_input = $('[name="' + $file_manager.attr('target') + '"]');
$target_input
.val($(this).attr('select-file'))
.attr('thumbnail', $(this).attr('file-thumbnail'))
.trigger('change');
$file_manager.modal('hide');
}
});
//When file manager trigered
$(document).on('change', '.file-selector input[type=hidden]', function (event) {
var $target = $(this).parents('.file-selector');
if ($(this).val() === "") {
$target.find('img')
.attr('src', '')
.addClass('d-none');
$target
.find('.text')
.removeClass('d-none');
$target.find('[file-remove]')
.addClass('d-none')
} else {
if ($(this).attr('thumbnail') !== '') {
$target.find('img')
.attr('src', $(this).attr('thumbnail'))
.removeClass('d-none');
} else {
$target.find('img')
.attr('src', $(this).val())
.removeClass('d-none');
}
$target
.find('.text')
.addClass('d-none');
$target.find('[file-remove]')
.removeClass('d-none')
}
});
//When file manager trigered
$(document).on('click', '[file-manager]', function () {
if ($(this).attr('file-manager') !== '') {
$file_manager.attr('target', $(this).attr('file-manager'));
$file_manager.attr('extensions', $(this).attr('file-extensions'));
$('.dz-message small').text($(this).attr('file-extensions'));
}
$file_manager.attr('mode', 'input');
Dropzone.options.dzone = {
acceptedFiles: $(this).attr('file-extensions')
};
$file_manager.modal('show');
});
//Load more files
$file_list.on('scroll', function (event) {
if (parseInt($file_list.attr('page')) >= parseInt($file_list.attr('page-count'))) {
return;
}
if ((($(this).scrollTop() + $(this).height()) + (this.scrollHeight / 100 * 30)) >= this.scrollHeight) {
$file_list.attr('page', parseInt($file_list.attr('page')) + 1);
load_files();
}
});
//Remove selected file
$(document).on('click', '[file-remove]', function (event) {
event.preventDefault();
event.stopPropagation();
$('[name="' + $(this).attr('file-remove') + '"]').val('').trigger('change');
});
Aldığım hatalar ise ;
dropzone.min.js:1 Uncaught Error: No URL provided.
at new c (dropzone.min.js:1)
at Function.a.discover (dropzone.min.js:1)
at a._autoDiscoverFunction (dropzone.min.js:2)
at HTMLDocument.f (dropzone.min.js:1)
ve
demo:345 Uncaught ReferenceError: Dropzone is not defined
at demo:345
Chrome üzerinde konsol hataları mevcut, bir türlü gideremedim. Çalışmamı sunucum üzerinde yapıyorum. Destek olabilirmisiniz hiçbir çözüm yolu bulamadım. Stackoverflow üzerinde bütün konulara baktım ama hiçbir konu çözüm olmadı. CMS Panelimi bitirmek üzereyim ancak burada takılıp kaldım.