Monday, January 20, 2020
I need to append this json object including images to a css selector Anyone can tell me how
{
"id": 43,
"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": 283,
"created_at": "2020-01-20T13:12:09.813Z",
"updated_at": "2020-01-20T13:12:09.846Z"
}
"id": 43,
"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": 283,
"created_at": "2020-01-20T13:12:09.813Z",
"updated_at": "2020-01-20T13:12:09.846Z"
}
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/4488ccba-1b8e-4522-b62a-75d12f0dfe9c%40googlegroups.com.
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.
Sunday, January 19, 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
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 rubyonrails-talk+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/4a5d3c8a-2acb-4581-b9e2-4d4e3f6db805%40googlegroups.com.
Subscribe to:
Posts (Atom)