search

avo-hq / avo

Build Ruby on Rails apps 10x faster
https://avohq.io
Other
1.48k stars 232 forks source link

attaching image to post #413

Closed vitaly107 closed 3 years ago

vitaly107 commented 3 years ago

When I attach an image to a post (even on your demo site) it appears as clickable one and also inserts the hyperlink as well.

That hyperlink can be then edited as caption, otherwise it stays and shows as a link to image.

However we do not need that caption or link. Indeed, we do not want to have image clickable either.

How can this be fixed?

Your default images in demo are not clickable and do not show any hyperlinks or captions - we want to replicate exactly the same behaviour but failed to do that locally on our own app as well as in your online demo as stated above.

Please help.

adrianthedev commented 3 years ago

We'll have to add an option for that. I'm putting it on the roadmap.

vitaly107 commented 3 years ago

so if this is not a bug but the current state of the gem then why the demo does not reflect that? the image is not clickable on the demo and there are no links for those images that are already there? and what can could we do for now?

adrianthedev commented 3 years ago

The demo is populated with dummy data through seeders. They are not uploaded through Trix.

adrianthedev commented 3 years ago

You can test that by editing a record and adding an image to the demo site.

vitaly107 commented 3 years ago

yes, I tried that and as stated above, the ugly link is inserted into demo in the same way we have it locally. this is very annoying really as we do not want to have it and do not know how to remove it. the only way is to fill in caption but then that caption becomes a link. and also the whole image is clickable and this is something unwanted.

adrianthedev commented 3 years ago

We'll add an option to remove the link, not sure about the caption. It's how Trix works. We'll see what we can do about that too.

vitaly107 commented 3 years ago

This is probably the solution we need:

https://stackoverflow.com/questions/63345323/rails-trix-editor-showing-image-and-image-size-when-caption-is-not-specified

However, how to find and amend that file inside Avo engine?

Can you do that from your end or? Many thanks

adrianthedev commented 3 years ago

Not sure if that can be done. You could give it a try.

adrianthedev commented 3 years ago

If trix is not working for you, perhaps using the custom fields feature and implementing a WYSIWYG editor that better fits your needs might be a better solution.

vitaly107 commented 3 years ago

I tried it on a file that is from the app here

app/views/active_storage/blobs/_blob.html.erb

and it did not help, is there any other _blob.html.erb file sitting inside the engine?

can we try and change it as suggested?

vitaly107 commented 3 years ago

I understand that I need to edit this file app/views/active_storage/blobs/_blob.html.erb

I also understand that the file I have in the app is not the one to be edited but the file that comes as a dependence of avo since avo comes with trix editor already

I also know that if the same file is presen tin the app and external engine then the latter takes precedence.

If those pints above are correct then can someone tell me how can I monkey patch so my app/views/active_storage/blobs/_blob.html.erb file from the app takes the precedence over the same file that sits inside avo engine?

any help and insight would be greatly appreciated.

adrianthedev commented 3 years ago

We haven't been working with Trix that deep. I recommend you clone Avo locally and try to monkey patch it and test out your ideas.

We'll schedule adding files without a link as a to-do for next week.

vitaly107 commented 3 years ago

Hi

Can you help with this and add some instructions how to add TinyMCE editor filed instead of Trix to your docs.

I have seen progress bar example and tried follow that with little success.

Also how can I customise edit view ?

Please see the problem I face with trix field in the screen shot attached.

As soon as I switch to make it code it overflows the screen to the right – tailwind css or whatever is the bit responsible for that should be fixed.

Can you kindly fix this CSS issue from your end?

Many thanks

Vitaly

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Thursday, 27 May 2021 at 15:58 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

If trix is not working for you, perhaps using the custom fields feature and implementing a WYSIWYG editor that better fits your needs might be a better solution.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-849705548, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYHF6JR5WQ2ZDFNP6P3TPZMXZANCNFSM45UJ32BA.

adrianthedev commented 3 years ago

Hey Vitaly, we can't see the image if you attached one. Maybe try attaching it on GitHub on the issue page directly?

vitaly107 commented 3 years ago

Hi

Sorry forgot to attach the file.

Here you are.

Please let me know what you think.

Best regards

Vitaly

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 14:17 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

Hey Vitaly, we can't see the image if you attached one. Maybe try attaching it on GitHub on the issue pagehttps://github.com/avo-hq/avo/issues/413 directly?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851485635, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYDFWLBYWTY5P643NX3TQOD53ANCNFSM45UJ32BA.

adrianthedev commented 3 years ago

We still can't see it. I think you need to visit this page https://github.com/avo-hq/avo/issues/413 and upload it there.

vitaly107 commented 3 years ago

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 14:19 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

We still can't see it. I think you need to visit this page #413https://github.com/avo-hq/avo/issues/413 and upload it there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851487255, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYE66N333C5MC6Y4W2TTQOEHZANCNFSM45UJ32BA.

vitaly107 commented 3 years ago

I sent it as email attachment.

I cannot see how to attach/upload it to GH issue page?

Regards

Vitaly

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 14:19 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

We still can't see it. I think you need to visit this page #413https://github.com/avo-hq/avo/issues/413 and upload it there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851487255, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYE66N333C5MC6Y4W2TTQOEHZANCNFSM45UJ32BA.

vitaly107 commented 3 years ago

[Graphical user interface, text, application, email Description automatically generated]

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 14:19 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

We still can't see it. I think you need to visit this page #413https://github.com/avo-hq/avo/issues/413 and upload it there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851487255, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYE66N333C5MC6Y4W2TTQOEHZANCNFSM45UJ32BA.

vitaly107 commented 3 years ago

Hi

I am trying tiny mce now as a custom field.

Now I need to figure out how to process image upload into page content attribute.

In JS I currently have

images_upload_url: '/uk/text_images',

I think I need to post to create action in avo page resource controller

So I can see that class so I create a create action there and can you give me some guidance here how to customise that controller in the correct way?

Many thanks

Vitaly

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 14:19 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

We still can't see it. I think you need to visit this page #413https://github.com/avo-hq/avo/issues/413 and upload it there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851487255, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYE66N333C5MC6Y4W2TTQOEHZANCNFSM45UJ32BA.

adrianthedev commented 3 years ago

Sorry about that. I closed it by mistake.

adrianthedev commented 3 years ago

When you create a new field with TinyMCE, it's the same as you would implement it in a page for your app.

You can add any action methods to a controller and upload and store the file there.

vitaly107 commented 3 years ago

So do I add a create or upload action to the relevant resource controller?

From: Adrian Marin @.> Reply to: avo-hq/avo @.> Date: Monday, 31 May 2021 at 15:40 To: avo-hq/avo @.> Cc: Vitaly Amos @.>, Author @.***> Subject: Re: [avo-hq/avo] attaching image to post (#413)

When you create a new field with TinyMCE, it's the same as you would implement it in a page for your app.

You can add any action methods to a controller and upload and store the file there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/avo-hq/avo/issues/413#issuecomment-851534349, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEDJYEZ537KNKJHMO5ZAELTQONVDANCNFSM45UJ32BA.

adrianthedev commented 3 years ago

Probably not create because that would interfere with the resource create method. Something else. upload could be one.

vitaly107 commented 3 years ago

and how do I find the page (model) instance (that I need to update) in that action?

adrianthedev commented 3 years ago

Now you're in regular rails mode. You can change the path to something like /uk/text_images/posts/25. Or something similar. That's totally up to you (all regular rails code, not dependent on Avo).

vitaly107 commented 3 years ago

sorry I am trying to add something like this

def image_upload if params[:file].class == ActionDispatch::Http::UploadedFile @page.update(image: params[:file]) respond_to do |format| if @image.save format.json { render json: { "location": @image.image.url }.to_json, status: :ok } else format.json { render json: @image.errors, status: :unprocessable_entity } end end end end

do you mean this should go into my apps pages_controller or into this class

class Avo::PagesController < Avo::ResourcesController ?

if this goes into avo class then what is instance finder method that I should use? I mean something like @page = Page.find(params[:id])

adrianthedev commented 3 years ago

You can put it wherever make more sense for your app. Whichever controller you think it's best. Then add the route to that action. It's totally up to you.

Yes, that's how you find that model.

vitaly107 commented 3 years ago

what would be the route if I use avo::pages_controller?

post 'image_upload', to: 'pages#image_upload' how do I wrap this in routes.rb file?

adrianthedev commented 3 years ago

Again, this is regular Rails code. Whatever makes sense for you. For example: post '/uk/pages/25/text_images', to: 'pages#image_upload'. *but again, that's up to you and your integration.

vitaly107 commented 3 years ago

I am stuck with this


Started POST "/uk/bj-admin/resources/pages/about-boilerjuice/edit" for 127.0.0.1 at 2021-05-31 17:11:49 +0100
Processing by Avo::RelationsController#create as */*
  Parameters: {"file"=>#<ActionDispatch::Http::UploadedFile:0x00007fe31918ccf8 @tempfile=#<Tempfile:/var/folders/h7/qc4l3t9d08z7p3t9641l8jkm0000gn/T/RackMultipart20210531-60070-1gjws7j.png>, @original_filename="about-boilerjuice.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"about-boilerjuice.png\"\r\nContent-Type: image/png\r\n">, "resource_name"=>"pages", "id"=>"about-boilerjuice", "related_name"=>"edit"}
Can't verify CSRF token authenticity.

Please help.

Not sure why is says: Processing by Avo::RelationsController#create as */* whereas my route is as follows:

  scope module: 'avo' do
      post '/pages/:id/image_upload', to: 'pages#create'
    end

so I would expect Avo::PagesController#image_upload to process the action notAvo::RelationsController#create`

I tried adding
skip_before_action :verify_authenticity_token, only: [:upload_image]

to this controller class Avo::PagesController < Avo::ResourcesController

but that did not help.

adrianthedev commented 3 years ago

Again Vitaly, don't overthink it. Don't think you should use Avo controllers. You can use your own.

Add the method as if you're implementing TinyMCE for your own. Uploading that file has nothing to do with Avo.

adrianthedev commented 3 years ago

Fixed by https://github.com/avo-hq/avo/pull/425

adrianthedev commented 3 years ago

Released in 1.7.3