how do i send pictures in channels?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

how do i send pictures in channels?

fugee ohu
Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/fe5cab8e-22d4-4d7f-8805-f831dbb68ad4%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

Walter Lee Davis


> On Jan 19, 2020, at 4:10 PM, fugee ohu <[hidden email]> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/73566896-9468-43EB-BB2F-D05868DC64C4%40wdstudio.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

fugee ohu


On Sunday, January 19, 2020 at 4:56:19 PM UTC-5, Walter Lee Davis wrote:


> On Jan 19, 2020, at 4:10 PM, fugee ohu <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="SAyNhhbQDQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter


Having trouble loading actiontext.scss through application.scss
application.scss:
@import "actiontext";

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/8f75ecbb-3ff7-4f61-9b83-b9c03fc713cb%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

fugee ohu
In reply to this post by Walter Lee Davis


On Sunday, January 19, 2020 at 4:56:19 PM UTC-5, Walter Lee Davis wrote:


> On Jan 19, 2020, at 4:10 PM, fugee ohu <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="SAyNhhbQDQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter

I already have a Picture model with polymorphic associations for different models that use it I'll use that

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/70b1541c-3045-4176-8ff0-68962d72c164%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

fugee ohu
In reply to this post by Walter Lee Davis


On Sunday, January 19, 2020 at 4:56:19 PM UTC-5, Walter Lee Davis wrote:


> On Jan 19, 2020, at 4:10 PM, fugee ohu <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="SAyNhhbQDQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter


I'm using Trix I use this line to append to css selector in view from javascript channel but it doesn't render at all if I add an image to the form field with trix The content field is the trix field and it returns an object which is why I had to use data.content.body instead of just data.content

               $('#message_holder').append('<div class="container-right"><div class="subscript">' + data.sender_name + '<br>' + data.msg_time + '</div>' + data.content.body + '</div>');


--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/4a5d3c8a-2acb-4581-b9e2-4d4e3f6db805%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

fugee ohu
In reply to this post by Walter Lee Davis


On Sunday, January 19, 2020 at 4:56:19 PM UTC-5, Walter Lee Davis wrote:


> On Jan 19, 2020, at 4:10 PM, fugee ohu <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="SAyNhhbQDQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter


When I put images in Trix it returns an object How do I render the object in html by appending to a css selector ? In the code below I'm using data.content.body but it returns the string show below

               $('#message_holder').append('<div class="container-right"><div class="subscript">' + data.sender_name + '<br>' + data.msg_time + '</div>' + data.content.body + '</div>');

{
  "id": 39,
  "name": "content",
  "body": "<div><action-text-attachment sgid=\"BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vaWduYXR6bW91c2UvQWN0aXZlU3RvcmFnZTo6QmxvYi83P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--9e1bfda2422dee3f77beb04742e1f667a22e25c6\" content-type=\"image/jpeg\" url=\"http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f5de0e90b1f4146080f3d8482b1e535ff3204d79/Katana.jpg\" filename=\"Katana.jpg\" filesize=\"39537\" width=\"471\" height=\"512\" presentation=\"gallery\"></action-text-attachment></div>",
  "record_type": "Message",
  "record_id": 279,
  "created_at": "2020-01-20T07:16:41.274Z",
  "updated_at": "2020-01-20T07:16:41.312Z"
}

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/f6282c17-b4d2-4f87-90e3-c7e55dea2f49%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: how do i send pictures in channels?

fugee ohu
In reply to this post by Walter Lee Davis


On Sunday, January 19, 2020 at 4:56:19 PM UTC-5, Walter Lee Davis wrote:


> On Jan 19, 2020, at 4:10 PM, fugee ohu <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="SAyNhhbQDQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> wrote:
>
> Got my chat app working in rails 6 with channels but now how do I let users send  pictures in channels? I've seen chat apps where after you upload the picture it displays with a circled button that says send and you can also delete it instead How do I do that?
>

With JavaScript. One of the neatest implementations I've seen of this is in Trix (ActionText), which is open-source, so you could see how they do it there. Also GitLab has a nice one, and the source is available for that (unlike GitHub, who also have one). You're basically intercepting the drop and paste events, checking to see whether the payload was an image, and then doing some out-of-band trickery to make a file attachment using a separate model and controller. Trix uses the new ActiveStorage goodies for its implementation. Not sure what the others use.

Walter


Yes thanks I went with trix on this The problem I'm having now is ActionCable.server.broadcast unexpectedly sends a truncated version of the value of the rich text field over to my channel Maybe something in ActionCable config?

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/9a98d700-342a-416a-9ccc-ed8574365b30%40googlegroups.com.