Mam taki kod:
<h4 class="form-section"><i class="ft-clipboard"></i> Dodaj pliki graficzne (JPG) - limit plików: {{ $fileLimit }}</h4> <div class="row skin skin-flat"> <div class="col-md-12 col-sm-12"> <form method="post" action="{{ route('storeDJS') }}" enctype="multipart/form-data" class="dropzone dpz-multiple-files dz-clickable dz-started ui-sortable dropzoneForm" id="dpz-multiple-files"> <input type="hidden" name="type" value="{{ $pageType }}"> <input type="hidden" name="id" value="{{ $recordId }}"> @csrf </form> @push('scripts3') <script src="{{ asset('assets/dropzone/dropzone.js') }}"></script> <script type="text/javascript"> var fileLimit = parseInt({{ $fileLimit }}); function refreshFileList() { $(".dz-preview").remove(); $.ajax({ url: '{{ route('showFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}', type: 'get', dataType: 'json', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, cache: false, success: function (response) { var mockFile = { name: value.name, size: value.size }; dpzMultipleFiles.emit('addedfile', mockFile); dpzMultipleFiles.emit('thumbnail', mockFile, value.path); dpzMultipleFiles.emit('complete', mockFile) }) }, error: function (response) { alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.'); } }); } function updatePhotoList() { index = index + 1; $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, url: '{{ route('changeOrderFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}&index='+index+'&file='+ $(this).text(), dataType: 'text', type: 'post', cache: false, success: function (data, textStatus, jQxhr) { }, error: function (jqXhr, textStatus, errorThrown) { alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.'); } }); }); } Dropzone.options.dpzMultipleFiles = { maxFiles: fileLimit, clickable: true, thumbnailWidth: 250, thumbnailHeight: 250, autoProcessQueue: true, dictDefaultMessage: '', uploadMultiple: true, paramName: "myFile", acceptedFiles: ".jpg,.jpeg", addRemoveLinks: true, timeout: 50000, dictRemoveFile: 'Usuń plik', init: function () { dpzMultipleFiles = this; refreshFileList(); $('.dz-image').last().find('img').attr({width: '100%', height: '100%'}); }), //$('.sortable').sortable('enable'); refreshFileList(); updatePhotoList(); }); //alert('aa'); }); fileLimit = fileLimit - 1; }); fileLimit = fileLimit + 1; }); }); }, if (!confirm('Czy na pewno chcesz usunąć ten plik?')) { return; } $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, cache: false, type: 'POST', success: function (data) { console.log("File has been successfully removed!!"); //refreshFileList(); updatePhotoList(); }, error: function (e) { console.log(e); } }); var fileRef; } }; $(function () { $(".dropzone").sortable({ items: '.dz-preview', cursor: 'move', opacity: 0.5, containment: '.dropzone', distance: 20, tolerance: 'pointer', update: function (event, ui) { index = index + 1; $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, url: '{{ route('changeOrderFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}&index='+index+'&file='+ $(this).text(), dataType: 'text', type: 'post', cache: false, success: function (data, textStatus, jQxhr) { }, error: function (jqXhr, textStatus, errorThrown) { alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.'); } }); }); } }); }); </script> @endpush </div> </div>
Powyższy kod to połączenie Laravela i Dropzone.js. Upload działa mi poprawnie.
Chciałbym dorobić blokadę uploadu pliku w momencie gdy jest już jeden dodany (clickable = false).
W momencie gdy plik będzie usunięty lub nie będzie żadnego pliku to blokada ma być zdjęta (clickable = true).
Problem w tym, że nie bardzo wiem to zrobić

Czy ktoś wie może jak to zrobić?