Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [AJAX]Wyłączenie "klikalności" w Dropzone.js
trifek
post 15.08.2019, 17:10:43
Post #1





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 28.09.2015

Ostrzeżenie: (0%)
-----


Witam serdecznie,
Mam taki kod:
  1. <h4 class="form-section"><i class="ft-clipboard"></i> Dodaj pliki graficzne (JPG) - limit plików: {{ $fileLimit }}</h4>
  2. <div class="row skin skin-flat">
  3. <div class="col-md-12 col-sm-12">
  4. <form method="post" action="{{ route('storeDJS') }}" enctype="multipart/form-data"
  5. class="dropzone dpz-multiple-files dz-clickable dz-started ui-sortable dropzoneForm"
  6. id="dpz-multiple-files">
  7. <input type="hidden" name="type" value="{{ $pageType }}">
  8. <input type="hidden" name="id" value="{{ $recordId }}">
  9. @csrf
  10. </form>
  11.  
  12. @push('scripts3')
  13.  
  14.  
  15. <script src="{{ asset('assets/dropzone/dropzone.js') }}"></script>
  16.  
  17. <script type="text/javascript">
  18. var fileLimit = parseInt({{ $fileLimit }});
  19. function refreshFileList() {
  20. $(".dz-preview").remove();
  21. $.ajax({
  22. url: '{{ route('showFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}',
  23. type: 'get',
  24. dataType: 'json',
  25. headers: {
  26. 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
  27. },
  28. cache: false,
  29. success: function (response) {
  30. $.each(response, function (key, value) {
  31. var mockFile = {
  32. name: value.name,
  33. size: value.size
  34. };
  35. dpzMultipleFiles.emit('addedfile', mockFile);
  36. dpzMultipleFiles.emit('thumbnail', mockFile, value.path);
  37. dpzMultipleFiles.emit('complete', mockFile)
  38. })
  39. },
  40. error: function (response) {
  41. alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
  42. }
  43. });
  44. }
  45. function updatePhotoList()
  46. {
  47. $(".dz-filename span").each(function (index) {
  48. index = index + 1;
  49. $.ajax({
  50. headers: {
  51. 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
  52. },
  53. url: '{{ route('changeOrderFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}&index='+index+'&file='+ $(this).text(),
  54. dataType: 'text',
  55. type: 'post',
  56. cache: false,
  57. data: $(this).serialize(),
  58. success: function (data, textStatus, jQxhr) {
  59. },
  60. error: function (jqXhr, textStatus, errorThrown) {
  61. alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
  62. }
  63. });
  64. });
  65. }
  66. Dropzone.options.dpzMultipleFiles =
  67. {
  68. maxFiles: fileLimit,
  69. clickable: true,
  70. thumbnailWidth: 250,
  71. thumbnailHeight: 250,
  72. autoProcessQueue: true,
  73. dictDefaultMessage: '',
  74. uploadMultiple: true,
  75. paramName: "myFile",
  76. acceptedFiles: ".jpg,.jpeg",
  77. addRemoveLinks: true,
  78. timeout: 50000,
  79. dictRemoveFile: 'Usuń plik',
  80. init: function () {
  81. dpzMultipleFiles = this;
  82. refreshFileList();
  83. this.on("thumbnail", function (file, dataUrl) {
  84. $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
  85. }),
  86. this.on('completemultiple', function (file, json) {
  87. //$('.sortable').sortable('enable');
  88. refreshFileList();
  89. updatePhotoList();
  90. });
  91. this.on('success', function (file, json) {
  92. //alert('aa');
  93. });
  94. this.on('addedfile', function (file) {
  95. fileLimit = fileLimit - 1;
  96. });
  97. this.on('drop', function (file) {
  98. fileLimit = fileLimit + 1;
  99. });
  100. this.on("maxfilesexceeded", function (file) {
  101. alert('Plik ' + file.name + ' nie został wysłany na serwer. Limit plików został przekroczony!')
  102. this.removeFile(file);
  103. });
  104. },
  105. removedfile: function (file) {
  106. if (!confirm('Czy na pewno chcesz usunąć ten plik?')) {
  107. return;
  108. }
  109. $.ajax({
  110. headers: {
  111. 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
  112. },
  113. cache: false,
  114. type: 'POST',
  115. url: '{{ route('deleteDJS') }}?id=' + file.name + 'type={{ $pageType }}',
  116. data: {filename: file.name, id: file.name, type: '{{ $pageType }}'},
  117. success: function (data) {
  118. console.log("File has been successfully removed!!");
  119. //refreshFileList();
  120. updatePhotoList();
  121. },
  122. error: function (e) {
  123. console.log(e);
  124. }
  125. });
  126. var fileRef;
  127. return (fileRef = file.previewElement) != null ?
  128. fileRef.parentNode.removeChild(file.previewElement) : void 0;
  129. }
  130. };
  131. $(function () {
  132. $(".dropzone").sortable({
  133. items: '.dz-preview',
  134. cursor: 'move',
  135. opacity: 0.5,
  136. containment: '.dropzone',
  137. distance: 20,
  138. tolerance: 'pointer',
  139. update: function (event, ui) {
  140. $(".dz-filename span").each(function (index) {
  141. index = index + 1;
  142. $.ajax({
  143. headers: {
  144. 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
  145. },
  146. url: '{{ route('changeOrderFilesDJS') }}?type={{ $pageType }}&id={{ $recordId }}&index='+index+'&file='+ $(this).text(),
  147. dataType: 'text',
  148. type: 'post',
  149. cache: false,
  150. data: $(this).serialize(),
  151. success: function (data, textStatus, jQxhr) {
  152. },
  153. error: function (jqXhr, textStatus, errorThrown) {
  154. alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
  155. }
  156. });
  157. });
  158. }
  159. });
  160. });
  161. </script>
  162. @endpush
  163.  
  164. </div>
  165.  
  166. </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ć sad.gif

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


Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.08.2019 - 02:39