Monday, January 20, 2020
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 <fuge...@gmail.com> 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"
}
"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 rubyonrails-talk+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/f6282c17-b4d2-4f87-90e3-c7e55dea2f49%40googlegroups.com.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment