Dropzone in Modal does not work

[dpawar2015]

Uploading files using Dropzone in Modal does not work for me. Is anybody else facing this issue? How did you resolve it?
Blade file without modal works fine.

[PhiloNL]

Use one of the Livewire hooks to initiate Dropzone once the component is initialized or updated:

<script>
    document.addEventListener("DOMContentLoaded", () => {
        Livewire.hook('component.initialized', (component) => {})
        Livewire.hook('element.initialized', (el, component) => {})
        Livewire.hook('element.updating', (fromEl, toEl, component) => {})
        Livewire.hook('element.updated', (el, component) => {})
        Livewire.hook('element.removed', (el, component) => {})
        Livewire.hook('message.sent', (message, component) => {})
        Livewire.hook('message.failed', (message, component) => {})
        Livewire.hook('message.received', (message, component) => {})
        Livewire.hook('message.processed', (message, component) => {})
    });
</script>

[arifhossen-dev]

Help needed, how can I fix it?

In blade file working fine

In modal not working

Modal Open button in blade file

<a class="btn btn-secondary" onclick='Livewire.emit("openModal", "task.create")'>
         Create task modal
</a>

Modal Open button in livewire component

<a wire:click='$emit("openModal", "task.edit", {{ json_encode([$task->id]) }})' class="text-green-400 cursor-pointer hover:text-pink-400">
     Edit task
</a>

Render blade component in form

<x-dropzone 
    id="files" 
    name="files" 
    action="{{ route('admin.tasks.storeMedia') }}" 
    collection-name="task_files" 
    max-file-size="2"
/>

Dropzone blade component

<div wire:ignore>
  <div class="dropzone" {{ $attributes }}></div>
</div>

<script>
    Dropzone.options[_.camelCase("{{ $attributes['id'] }}")] = {
      url: "{{ $attributes['action'] }}",
      maxFilesize: {{ $attributes['max-file-size'] ?? 2 }},
      maxFiles: {{ $attributes['max-files'] ?? 'null' }},
      addRemoveLinks: true,
      headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
      },
      params: {
        @if ($attributes['max-width'])
          max_width: {{ $attributes['max-width'] }},
        @endif
        @if ($attributes['max-height'])
          max_height: {{ $attributes['max-height'] }},
        @endif
        size: {{ $attributes['max-file-size'] ?? 2 }},
        model_id: {{ $attributes['model-id'] ?? 0 }},
        collection_name: "{{ $attributes['collection-name'] ?? 'default' }}"
      },
      success: function(file, response) {
        @this.addMedia(response.media)
      },
      removedfile: function(file) {
        file.previewElement.remove()

        if (file.status === 'error') {
          return;
        }

        if (file.xhr) {
          var response = JSON.parse(file.xhr.response)
          @this.removeMedia(response.media)
        } else {
          @this.removeMedia(file)

          if (this.options.maxFiles !== null) {
            this.options.maxFiles++
          }
        }
      },
      init: function() {
        document.addEventListener("livewire:load", () => {
          let files = @this.mediaCollections["{{ $attributes['collection-name'] ?? 'default' }}"]
          if (files !== undefined && files.length) {
            files.forEach(file => {
              let fileClone = JSON.parse(JSON.stringify(file))
              this.files.push(fileClone)
              this.emit("addedfile", fileClone)

              if (fileClone.preview_thumbnail !== undefined) {
                this.emit("thumbnail", fileClone, fileClone.preview_thumbnail)
              } else {
                this.emit("thumbnail", fileClone, fileClone.url)
              }

              this.emit("complete", fileClone)
              if (this.options.maxFiles !== null) {
                this.options.maxFiles--
              }
            })
          }
        });
      },
      error: function(file, response) {
        file.previewElement.classList.add('dz-error')
        let message = $.type(response) === 'string' ? response : response.errors.file
        return _.map(file.previewElement.querySelectorAll('[data-dz-errormessage]'), r => r.textContent = message)
      }
    }
  </script>

[PhiloNL]

Have you tried using one of the hooks I mentioned earlier?