Search code examples
laraveldropify

Laravel, how can I remove file from dropify?


I'm using dropify for my project.

 <form action="{{route('ticket.update')}}" enctype="multipart/form-data" method="post">
 @csrf
 <label>Ticket</label>
 <input type="file" name="ticket" class="dropify" data-max-file-size="5M"
 data-default-file="{{$foo->ticket ?? ''}}"
 data-allowed-file-extensions="pdf png jpg jpeg"/>
 <input type="submit" class="button"/>
 </form>

When I remove the image, also should be deleted from the database. remove-event

In Controller (After posting form with removed)

dd($request->ticket);

Output

Null

Input even if its value already exists posted value is outputted as null.

Can someone help?


Solution

  • This code will do it for you....

    $(document).ready(function(){
      $('.dropify').dropify(); //initializing dropify
    
      //Handling click event on Remove button of dropify
      $('.dropify-clear').click(function(e){
        e.preventDefault();
        alert('Remove Hit'); //Here you can manage you ajax request to delete 
                             //file from database.
      });
    });
    

    $(document).ready(function(){
      $('.dropify').dropify();
      
      $('.dropify-clear').click(function(e){
        e.preventDefault();
        alert('Remove Hit');
        
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" />
    
    <input type="file" class="dropify">

    Add enctype="multipart/form-data" to form.

    <form action="{{route('ticket.update')}}" method="post" enctype="multipart/form-data">
    

    Read More About multipart/form-data