Im creating a social network where there's a modal for post, then when I upload a image into filepond, the modal automatically closes but the image stills there.

I want to upload image without automatic closing the modal.

Here's the video link of the problem: https://vimeo.com/653544395

Here's filepond blade:

   <div x-data 
 
    x-init="
    FilePond.registerPlugin(FilePondPluginImagePreview);
    
    FilePond.setOptions({
        allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
       server: {
           process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
               @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
           },
           revert: (filename, load, error) => {
               @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
           },
       },
    });
               FilePond.create($refs.input);"
                wire:ignore>
       <input type="file" x-ref="input" />
      
    </div>

Here's modal button:

<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white m-5 show-modal">show modal</button>

here's post form

 <div class="modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 hidden">
        <!-- modal -->
        <div class="bg-white rounded shadow-lg w-10/12 md:w-1/3">
          <!-- modal header -->
          <div class="border-b px-4 py-2 flex justify-between items-center">
            <h3 class="font-semibold text-lg">Create Post</h3>
            <button class="text-black close-modal">&cross;</button>
          </div>
          <!-- modal body -->
          <div class="p-3">
            <form  wire:submit.prevent="storePost">
    
              
            
                <div class="w-full h-auto py-2 px-4">
                    <label for="body" class="sr-only">Post Body</label>
                    <textarea name="body" id="body" class="border border-green-800 resize-none bg-transparent border-none outline-none w-full text-black 
                    {{-- text-clr-whitesmoke --}}
                     text-base pb-10" rows="3" placeholder="What's on your mind?" wire:model.defer="body" @error('body')
                    border-pink-500
                @enderror></textarea>
    
    
             
                    <div>
                        
                        <x-input.filepond wire:model="image_paths" multiple/>
                        @error('image_paths') <span >{{ $message }}</span> @enderror
                    </div>
              
               
              
                @error('body')
                           <span >{{ $message }}</span> 
                        @enderror
                </div>
    
               
                <!--post button-->
                <div >
                    <button type="submit" > Post </button>
                </div>
            </form>
          </div>
        
        </div>

Here's the script of modal:

<script>
        const modal = document.querySelector('.modal');
      
        const showModal = document.querySelector('.show-modal');
        const closeModal = document.querySelectorAll('.close-modal');
      
        showModal.addEventListener('click', function (){
          modal.classList.remove('hidden')
        });
      
        closeModal.forEach(close => {
          close.addEventListener('click', function (){
            modal.classList.add('hidden')
          });
        });
      </script>

CodePudding user response：

Per my comment

The modal does not have a wire:ignore which result to be reset to hidden when Livewire refresh it's components.