Using the Trix Editor plus File Upload Attachments Discussion

Another possibility to add in Trix into your project is following the 2 steps in the installation guide.
https://edgeguides.rubyonrails.org/action_text_overview.html

Chris, How hard is that to add a html table and change the text color in the trix editor.

Hi everybody,
I'm facing an issue I'll quickly describe.
I'm using rails 6 and was using Webpack to get ActiveStorage ActionText and Trix working all togother. Everything was OK : text edit and multiple files uploading via trix. WOUHOU !!!!

But.

Now, I going back to Sprockets. My custommer is asking me for.
So, here is what I did.

• Checking ActiveStorage working with a simple f.file_field to upload images = OK!
• Installed Trix with one of the existing gems. = OK for text editing :)
• Trying to upload files with trix : KO !!

So,

• Why it was working with Webpack ? Is it because of the upload js file you're using in this video ? This file was present in the node_module trix but not in the gem ?
• I've tried the file you're using but it doesn't work. I've got console error : "Uncaught TypeError: Cannot read property 'preview' of undefined" on the line "Trix.config.attachments.preview.caption = ..."
• What gem would you use for my config : Rails6 + Sprockets ?

Can someone help me please ?

Thanks a lot.

Philippe

Thanks for the episode. Trix is easy and works great but is there a way to style the images. I managed to get them to align left or right but cannot get them to float left or right with text around them.

Hi there! Any idea why uploading works in development locally, but not on ngrok or in production?
I get this:
application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18352 Uncaught Error: Direct upload failed: Error creating Blob for "PHOTO-2023-08-07-19-34-45.jpg". Status: 0
at AttachmentUpload.directUploadDidComplete (application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18352:15)
at BlobRecord.callback (application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18125:17)
at BlobRecord.requestDidError (application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18067:16)
at XMLHttpRequest. (application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18035:62)
directUploadDidComplete @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18352
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18125
requestDidError @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18067
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18035
error (async)
BlobRecord @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18035
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18121
fileReaderDidLoad @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17952
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17943
load (async)
create @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17943
create @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17931
create @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18116
start @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18342
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18373
g @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:12279
notify @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17446
notifyEditorElement @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17300
compositionDidAddAttachment @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:17088
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15404
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15402
refreshAttachments @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15406
setDocument @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15007
insertText @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15020
insertAttachments @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15090
insertFiles @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15077
insertFiles @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:15590
(anonymous) @ application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:12396
application-f91eb14d1a71eb1bded7bacba5a2c9f6e50d1ef47606669468a65584ed3f021d.js:18050 POST http://localhost/rails/active_storage/direct_uploads net::ERR_CONNECTION_REFUSED

Thanks a lot!