레일에 Carrierwave가있는 중첩 된 양식, 인라인 업로드 및 진행률 막대

Question

중첩 된 양식, 다중 파일 업로드 및 레일스의 진행률 표시 줄에 대한 비전이 있습니다. 지금까지 이것에 관해 온라인 토론을 찾지 못했습니다. 내가 뭔가를 간과했다면, 나는 미안하다. 제발 고쳐주세요. 여기

내가 원하는 것입니다 :

1. 주어진 형태는 복수의 동적 필드가 있습니다. 그 중 하나는 '파일 첨부'입니다.
2. '첨부 파일'의 경우 본질적으로 Gmail과 비슷한 인터페이스를 사용하고 싶습니다.
3. 해당 인터페이스를 통해 다음을 수행 할 수 있습니다.
   1. '첨부 파일'을 클릭하십시오.
   2. 로컬 파일을 선택하면 백그라운드에서 즉시 업로드가 시작되고 그 동안 평균적으로 진행률 막대가 표시됩니다.
   3. 이렇게하면 메시지를 쓰거나 파일을 더 추가 할 수 있습니다.
   4. 실시간 업로드를 취소하고 사실 확인 후 상자의 선택을 취소하여 첨부 파일을 삭제할 수도 있습니다. 여기

내가 작업하고있는 모델 및 단체입니다.

1. 많은 AudioFiles가있는 모델 녹음이 있습니다.
2. 각 AudioFile에는 크기, 유형, 만든 날짜 등의 메타 데이터뿐만 아니라 오디오 데이터가 포함되어 있습니다.
3. 녹음에는 몇 가지 다른 하위 모음도 있습니다. 나는, 그것은 여러 개의 오디오 파일을 포함하여 아동 분야의 여러 수를 추가하는 데 사용한다

   1. ..
   2. 을 지금까지 : 여기

   양식 행동해야 '녹화 만들기'방법입니다 우수한 중첩 된 양식 (https://github.com/ryanb/nested_form) gem을 사용하여 녹음의 비 -FileFile 하위를 만듭니다. IT는 훌륭하게 작동합니다.

4. 내가 원하는 것은 여러 개의 오디오 파일을 비동기 적으로, 진행률 표시기로 업로드하고, 업로드 된 파일을 취소하거나 삭제할 수있는 유사한 중첩 된 필드를 가질 수 있다는 것입니다.

업로드 프로그램을 반송파와 함께 사용하여 진행 정보가있는 파일을 저장하는 방법을 보여주는 많은 자료가 있습니다. 예를 들어, https://github.com/yortz/carrierwave_jquery_file_upload 및 https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5입니다.

기본적으로 이러한 예제는 캐리어 업 로더가 연결된 모델의 컨트롤러 만들기 작업에 대한 요청 인이 업 로더 중 하나에서 요청을 생성하는 것입니다. 나는 이것을 많이 받아 들여 OK.

내가 알 수없는 것은 중첩 된 양식 컨텍스트에서이를 수행하는 방법입니다. 까다로운 부분은 다음과 같습니다.

5. 'Create Recording'양식에서 게시물을 작성하고 해당 게시물에서 새 AudioFile 레코드를 작성한다고 가정합니다. 해당 오디오 파일을 아직 생성되지 않은 녹음과 어떻게 연관시킬 수 있습니까?
6. 사용자가 트랜잭션을 중단하면 생성 된 AudioFile 레코드는 어떻게 정리됩니까?

위의 두 가지를 모두 수행 할 수있는 해킹 방법을 생각할 수 있지만 더 세련된 접근 방법이 있는지 궁금합니다. 나는 오히려 레일을 처음 사용하기 때문에 나는 그것을 최대한으로 사용하지 않을 것이라고 짐작하고있다.

덕분에, Apurva

Answer 1

나는 내가이 문제를 해결하는 방법을 공유하여 다시 사회에 기여할 것이라고 생각했다. 요약하면, 주요 문제점은 CarrierWave의 동작, 중첩 된 양식 및 파일 업로드의 세부적인 제어를 조정하는 것이 었습니다.

중첩 된 양식은 루트 레코드와 루트 컨트롤러의 #create 작업에 대한 단일 POST 작업의 모든 연결을 만듭니다.

위 예제에서 Recording 모델은 루트이고 AudioFile, Note 및 Categorization은 레코딩과 함께 생성되는 연관입니다.

중첩 된 양식을 사용하면 이러한 레코드를 모두 하나의 POST로 작성해야 별도로 업로드를 취소하거나 Notes와 같은 다른 필드를 추가하는 것과 병행하여 업로드 할 수 없게됩니다.

사용자 만족도가 좋지는 않습니다. 내 솔루션은 정말 간단했습니다 :

1. 중첩 된 양식을 사용하지 않기로 선택했습니다.
2. Recording # create 항상을 빈 매개 변수와 함께 호출해야합니다. 레코딩 속성은 작성 조작에서 의미있는 기본값을 갖습니다.
3. 사용자는 녹음 # 편집 페이지 만 볼 수 있습니다.
4. 녹음 # 편집 페이지에서 AJAX 호출을 통해 다른 컨트롤러로 연결되는 관련 모델에 CRUD 작업을위한 독립 컨트롤이 있습니다. 이것은 관련된 각 모델이 사용할 유효한 recording_id를 가지고 있기 때문에 효과가있었습니다.
5. 다양한 컨트롤러가 주 녹음 페이지에 쓰여지는 HTML 조각을 반환합니다.

이 필드가 다른 (관련) 모델에 매핑 되었더라도 녹음 페이지의 모든 필드를 인라인 편집 할 수 있습니다. 따라서 사용자는 여러 파일을 업로드하고, 업로드하는 동안 메모를 추가하고, 이미 업로드 된 파일을 재생하고, 마음대로 업로드를 취소 할 수 있습니다.

그 결과 전체 사용자 경험이 훨씬 원활 해졌습니다. 정의에 의해 중첩 된 양식으로는 결코 달성 할 수 없었을 것입니다.