Plots2: 이미지 업로드 실패

또한 사소한 문제에 대해서는 #9442를 참조하십시오.

@waridrox 감사

문제를 추가로 디버그하려고 하면 로컬 파일 저장소에서 이미지를 업로드할 때 발생한 오류가
Paperclip::Errors::CommandNotFoundError: Could not run the 'identify' command. Please install ImageMagick.
로컬 개발 환경에서. 이것은 파일 업로드를 처리하는 paperclip gem에 대한 새로운 종속성이라고 생각합니다.

sudo apt-get install imagemagick 또는 brew install imagemagick 명령으로 imagemagick 를 설치한 후 development.rb 파일에 이 두 줄의 코드를 추가했습니다.

Paperclip.options[:image_magick_path] = "/opt/ImageMagick/bin"
Paperclip.options[:command_path] = "/opt/ImageMagick/bin"

그 후 나는 단순히 서버를 다시 시작했고 jpeg , png 및 gif 와 같은 파일 형식으로 파일 업로드가 다시 작동했습니다. 다음은 동일한 내용입니다.

https://user-images.githubusercontent.com/58583793/113514702-c308e700-958d-11eb-8e12-59c7a9648b24.mp4

stackoverflow의 _이 스레드_ 에서 프로덕션 앱의 변경 사항을 반영하기 위해 production.rb에도 이 두 줄을 추가해야 합니다.

또한 https://github.com/publiclab/plots2/blob/main/doc/PREREQUISITES.md#image -libraries-optional에 image-magick을 설치하는 선택적 매개변수로 인해 이 동작이 처음에 관찰되었습니다.

@waridrox 에게 감사합니다. 변경 사항을 가져왔는데 여전히 오류가 발생합니다. 다른 사람이 시도할 수 있을까요? 감사

아 😂 정말 죄송합니다. 그러면 풀을 되돌려 주세요. 그래도 로컬에서 작동합니까? sudo apt-get update 먼저 시도한 다음 sudo apt-get install imagemagick 시도하면 도움이 될 수 있습니다...

안녕 모두, 로컬에서는 그것이 imagemagick이지만(또는 imagemagick이 없는) 어느 정도 이해가 되지만 안정적인 상태에서는 설치되어야 합니다. 안정적인 버그인지 궁금합니다. Sentry.io에서 교차 확인해야 합니다. 세스 액세스 권한이 있습니까?

찾아주셔서 문서화해주셔서 감사합니다!!

프로필 사진(스팸 및 공격으로 인한 경우가 많음)을 제외하고 이미지 업로드 시 센트리 오류가 표시되지 않습니다.

오류의 경로는 무엇입니까? 500 오류인가요?

죄송합니다. /최근/ 오류를 의미합니다.

@waridrox 로컬에서 작동하지 않아서 버전이 잘못되었을 수 있습니다. @jywarren 내 쪽에서는 302 오류가 더

아 302에러 진짜... 🕵️

왜 그럴 수 있는지 살펴보겠습니다. 감사합니다!

GitPod에서 실행하여 302를 재현할 수 있는지 확인하려고 합니다...

좋아요, GitPod에서 로그를 받았습니다!

Started POST "/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"nid"=>"null", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x00007f444ce23c30 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-4879-sla487.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}
Can't verify CSRF token authenticity.
Redirected to https://3000-aquamarine-bass-qsunlo8p.ws-us03.gitpod.io/login?return_to=/images
Filter chain halted as :require_user rendered or redirected
Completed 302 Found in 2ms (ActiveRecord: 0.0ms)


Started GET "/login?return_to=/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by UserSessionsController#new as JSON
  Parameters: {"return_to"=>"/images"}
  User Load (0.5ms)  SELECT  `rusers`.* FROM `rusers` WHERE `rusers`.`id` = 1 LIMIT 1
   (0.2ms)  BEGIN
  User Update (0.5ms)  UPDATE `rusers` SET `last_request_at` = '2021-04-13 18:36:40', `updated_at` = '2021-04-13 18:36:40' WHERE `rusers`.`id` = 1
   (28.6ms)  COMMIT
Redirected to https://localhost/home?return_to=%2Flogin
Filter chain halted as :require_no_user rendered or redirected
Completed 302 Found in 35ms (ActiveRecord: 29.7ms)

알겠습니다. 로그인하도록 리디렉션되는 이유는 무엇입니까? 찾는 중...

CSRF 토큰이 작동하지 않는 것 같습니다... 보자...

https://github.com/publiclab/plots2/blob/bd7b2e26c1edbd85a9754d8b25bc27950fd99770/app/views/editor/rich.html.erb#L344 -L347

우리는 여기에 전달합니다.

$('meta[name="csrf-token"]').attr('content') 토큰을 올바르게 가져오므로 그게 아닙니다...

GitPod에서는 기본 이미지 업로더가 작동합니다. 동일한 컨트롤러를 사용하므로 문제는 편집기의 서식 있는 텍스트 모듈 코드 자체에 있는 것 같습니다.

Started POST "/images" for 10.4.0.248 at 2021-04-13 18:47:45 +0000
Cannot render console from 10.4.6.181! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"authenticity_token"=>"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==", "uid"=>"1", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x000055644bef1898 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-5664-bsht8f.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}

그리고 실제로 기본 이미지 업로더는 요청에 토큰을 사용합니다.

https://github.com/publiclab/PublicLab.Editor/blob/59e5bf6fd1ac2b6f9108e522baa7cab36e0bb64/src/modules/PublicLab.MainImageModule.js#L94

다음을 사용하여 올바르게 가져옵니다.

editor.options.mainImageModule.token
"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg=="

확인했습니다. 기본 이미지 업로드에는 양식 요청에 다음 매개변수 세트가 있습니다.

authenticity_token: 5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==
uid: 1
image[photo]: (binary)

인라인 이미지 업로드에는 다음 항목만 있습니다.

nid: null
image[photo]: (binary)

코드의 해당 섹션에 대한 최근 변경 사항과 모듈 옵션 자체를 확인하여 생성자에서 적절하게 저장/전달되는지 확인합니다.

와, 딥 버그. https://github.com/jywarren/woofmark/pull/2 를 통해 woofmark 라이브러리로 다시 추적: https://github.com/bevacqua/woofmark/pull/44

woofmark 의 분기에 있습니다.

https://github.com/jywarren/woofmark/blob/plots2/src/prompts/prompt.js#L133

28일 전의 이 PR이 관련이 있을 수 있다고 생각합니다. 우리가 사용하는 woofmark 분기에 대한 마지막 변경은 2020년 9월에 발생했습니다.

https://github.com/jywarren/woofmark/pull/76/files

woofmark 의 코드에 아무 것도 표시되지 않습니다. 이제 2개의 경로가 있습니다.

1. Woofmark를 통해 upload.xhrOptions 매개변수를 추적하고 올바르게 가져왔는지 확인
2. xhr npm 모듈이 변경되었는지 확인

https://www.npmjs.com/package/xhr 은 5개월 전에 2.6을 게시했지만 우리 프로젝트에서 수개월 동안 2.2.1을 유지했습니다. package-lock.json에서 확인됨

자, upload.xhrOptions param beforeSend 는 JS 콘솔에서 테스트한 대로 woofmark 로 만듭니다.

실제로 추가 헤더를 생성합니까?

xhrOptions: { 
        beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) }
      },

맙소사 이것이 언제 작동을 멈췄는지 모르겠지만 잠재적으로 다른 formData 매개변수를 추가하고 그렇게 할 수 있다고 생각합니다??? 그러나 다른 사람들과 함께 전달되는지 또는 xhr lib가 이를 무시할지 확신이 서지 않습니까?

이에 하나 2020년 11월 5일 일어난 것이다 지적 https://github.com/publiclab/PublicLab.Editor/releases/tag/v3.0 28 일 전 또는 https://github.com/publiclab/plots2/pull/ 9323

이 줄에 따르면 formData 가 정상적으로 전달되어야 한다고 생각합니다.

https://github.com/bevacqua/woofmark/pull/44/files#diff -b70752c6e4fb751c6aa381f57afac66c25cc2d401b141b03e1751d81e60efcd2R216

GitPod에서 시도합니다:

      formData: {nid: null, authenticity_token: _module.options.token},

... 해냈다:

에서 해결됩니다 https://github.com/publiclab/PublicLab.Editor/pull/712 , 3.0.3을 출시하고, 또한 별도의 추가 formData 에 토큰을 https://github.com/publiclab/plots2 /당기기/9504.

아휴!

안정적으로 완료 및 확인되었습니다!

@publiclab-mimi가 오늘 보고했습니다.

연구 노트 편집기에서 JPEG, PDF 또는 PNG를 업로드할 수 없습니다.
Google Chrome 및 Safari에서 드래그 앤 드롭 및 탐색 옵션

@ebarry , 현재 버전에는 변경 사항을 라이브 버전으로 푸시하는 데 필요한 버퍼 시간으로 인해 여전히 위의 변경 사항이 없다고 생각합니다. 이미지/파일 업로드가 안정 버전 과 레거시 버전에서 작동하기 때문입니다.

새 코드가 어제 밤에 공개되었습니다! 살펴보니 500 오류라는 새로운 오류가 있습니다.

Cess가 찾은 것과 동일한 302인 이것으로 시작합니다.

그런 다음 이 새로운 500 오류로 리디렉션되었습니다.

실제로 로그인에 성공했을 때라고 생각하지만 이미 로그인했기 때문에 이상합니까?

Sentry가 여기에 기록했다고 생각하지만 로그인 시도 전후에 오류가 발생하는지 확실하지 않습니다.

https://sentry.io/share/issue/13e10e65210c4ceb9860ec687482d9b7/

```
ActionView::템플릿 누락
{:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :가 있는 홈/홈 템플릿 누락: 루비, :커피, :jbuilder]}. 검색 위치:

• "/앱/앱/보기"
• "/usr/local/bundle/gems/grape-swagger-ui-2.2.8/app/views"
• "/usr/local/bundle/gems/grape-swagger-rails-0.3.1/app/views"
• ```

허, 이걸 추적하는데 문제가 있어서 GitPod에서 다시 재생해 볼까???

좋아, @icarito 와 나는 실 업데이트 문제를 해결하여 실제 3.0.3 편집기 코드를 가져 오고 확인한 다음 SSL과 관련된 nginx 구성 문제를 하나 더 수정했고 지금입니다. 라이브 사이트에서 작업 중입니다. 감사합니다!

: 그때:: 그때:: 그러면:

대박!!! 감사합니다