Trix attachments with Livewire's File Upload

Поделиться
HTML-код
  • Опубликовано: 20 июл 2020
  • In this video, you can see how to implement Trix's attachments using the File Upload feature from Livewire.
  • НаукаНаука

Комментарии • 13

  • @shegunbabs
    @shegunbabs 3 года назад

    Hello Tony,
    Can you please show a sample of how the trix editor is created on the form and validated on livewire?
    I have challenges validating the trix contents in livewire. Thanks.

  • @AddMotionLeb
    @AddMotionLeb 3 года назад

    great tutorial, but can you show what is in the component . thanks

  • @nikolanajdov3841
    @nikolanajdov3841 7 месяцев назад

    Hi Tony, nice tutorial! I have a question regarding s3 implementation, did you manage to do it?
    I have an issue where livewire stores the file only in the livewire-tmp folder on s3 when I call the store method. Let me know if you've experienced the same issue, any suggestion is welcomed.

  • @nikolicvladimir
    @nikolicvladimir 2 года назад

    Very useful! How do you handle it if the user changes his mind, and does not save the post. You will have an orphaned file on the server.

    • @TonyMessias
      @TonyMessias  2 года назад +1

      There's another event for when they remove the attachments that you can use to send an AJAX request to remove the file itself from storage. But, yeah, to handle orphaned attachments you need more stuff. From the top of my head: upload to a tmp bucket that auto deletes (or have a scheduled task cleaning old files in that tmp folder periodically) and do some post-processing to move the files to a permanent location when the rich text content is saved and update the rich text content with the new URLs.

  • @asadghazanfary9784
    @asadghazanfary9784 2 года назад +1

    hello tony
    how can unlick file in storage folder when click remove icon on image file after file succefully uploaded?
    thank you for youe help

    • @TonyMessias
      @TonyMessias  2 года назад

      Trix has another event for when an attachment is removed. You can listen to it and dispatch another ajax request to your backend to delete the file from storage.

    • @asadghazanfary9784
      @asadghazanfary9784 2 года назад

      @@TonyMessias Can you explain in the form of an example?

  • @AbrarAhmad-mz8vl
    @AbrarAhmad-mz8vl 3 года назад +2

    Can you please source code not your site :P just make a gist of Livewire and Trix thing working together?

  • @RyanMortier
    @RyanMortier 3 года назад +1

    Can you explain the need for btoa()?

    • @TonyMessias
      @TonyMessias  3 года назад

      Hey. That's how you can base64 encode a string in JS. Will check where I used it on the video and what for (it's been a while)

    • @TonyMessias
      @TonyMessias  3 года назад

      Yeah, so that's a bit more advanced, I think. I need a way to generate a unique event the backend will dispatch to the browser so I can finish the upload on Trix (setting the attachment attributes).
      For that, I'm using a base64 encoded version of the image temporary file name. Again, the backend will dispatch that event once the uploaded file is moved to the correct storage. I need the event name to be unique because I can upload multiple images at the same time, so I wanted each event handler to be called individually.

  • @chfurqanhameed2968
    @chfurqanhameed2968 2 года назад

    Hi every one, hope this help someone:
    This is the code that i have used to listen events for trix:
    Post content