Fine Uploader with Rails form

Question

Недавно я установил Fine Uploader в наше приложение Rails. Я читал документацию и немного экспериментировал с ней, но, похоже, я не понимаю, как это работает на самом деле, и из-за этого у меня много проблем с ее внедрением.

Что я сделал: Установил его (два способа, один «классический» и второй, используя драгоценный камень fineuploader, который, похоже, делает то же самое).

Создал файл для кофе, содержащий это.

$ -> 
    uploader = new (qq.FineUploader)(
    debug: true 
    element: document.getElementById('fine-uploader') 
    request: endpoint: '/uploads') 
    template: 'test-template' 

И что создает кнопку «загрузить файл» (который, конечно, не работает, потому что нет никакой конфигурации для обработки этого на сайте сервера), но я хотел бы иметь эту кнопку в простом -форматное поле ввода.

Кроме того, шаблоны не работают, я действительно не понимаю, почему.

Несчастливо, документация не нужна для рельсов.

Я открыт для изменения этой библиотеки к чему-то еще, до тех пор, как он содержит функции, которые мне нужны, которые:

• Приостановка и возобновление загрузки
• файл отрывов (в случае выхода из строя, пользователь не будет вынужден начать)
• прогресс бар (не жизненно)

Answer 1

мне удалось заставить его работать, и у меня есть некоторые знания о том, как это работает, так что я собираюсь поделиться этим знанием е. Но я хочу особо отметить, что я это сделал сам по себе, поэтому могут быть недостатки в том, что я предоставляю. Используйте свои знания и опыт, и если вы думаете, что что-то может быть сделано лучше, вы можете быть правы.

Прежде всего, скачайте библиотеку, используя npm. Я нашел для него два камня, но не использую их. В то время, когда я пишу это, эти драгоценные камни устарели и не будут работать. GitHub ссылки:

github.com/mezis/fineuploader-rails
github.com/zakgrant/fine-uploader-rails

Если вы случайно загрузить те, вам придется переустановить библиотеку.

После этого вы создадите javascript. Я создал файл с именем «fine-uploader.coffee», и положить туда что-то вроде этого:

$ -> 
    uploader = new (qq.FineUploader)(
    element: document.getElementById('fine-uploader') 
    request: 
     endpoint: '/upload' 
     params: 
     authenticity_token: $('#fine-uploader').data('authenticity-token') 
    template: 'template-name' 
    chunking: 
     enabled: true 
     mandatory: true 
     success: 
     endpoint: "/upload/finish" 
) 

Я не собираюсь описывать то, что есть что, потому что все это можно найти в документации , вместо этого я сосредоточу внимание на том, что для нас важно. В «запросе» у вас есть конечная точка, для этого случая нам нужно будет добавить его к нашим маршрутам, как это.

post 'upload', to: 'uploads#create' 

Затем нам нужно будет создать наш контроллер. Как вы можете видеть, я создал выделенный контроллер для обработки загрузок, и я рекомендую вам это сделать.

В контроллере дата загрузки мы это действие:

def create 
    file = params[:qqfile] 

    #code that does whatever you need 

    respond_to do |format| 
     format.json { 
      render json: { success: true } 
     } 
    end 
end 

В контроллере, вы будете иметь некоторые Params (вы можете проверить их все в документации), но один, что важно для вас qqfile. Это будет файл, который был опубликован. Вы можете делать все, что хотите. Я использовал несущую волну, чтобы сохранить и обработать ее, и я предполагаю, что это не требует дополнительного описания (так как вы можете найти ее в dosc, но вы можете использовать что-то еще, например refile).

Вам также нужно добавить параметр с токеном, вы можете увидеть его в 7-й строке файла javascript. Я рекомендую читать о токенах CSRF.

Важно, что если вы выбрали опцию chunking (как я), это НЕ будет весь файл, а только его часть. Вы можете найти более подробные руководства о том, как обращаться с разделенными файлами, но на что нужно обратить внимание - это qquuid, который вы будете отправлять в params. Этот идентификатор идентифицирует загружаемый файл, и вам понадобится его, чтобы определить, к какой части загруженной части принадлежит, поэтому вы не смешиваете два файла. Каждая часть отправляется отдельным почтовым запросом, поэтому я рекомендую добавить столбец, например qquuid, к модели, обрабатывающей файлы. Например:

Attachment.new(params[:qqfile], params[:qquuid]) 

После сохранения всех файлов, вы можете комбинировать их (проверить рубиновый класс File, чтобы узнать, как).

Attachment.where(qquuid: params[:qquuid]).combine_them_all 

выше линии можно поставить либо в создании действия в конце его, с условием о том, что это последняя часть (есть PARAMS с общим числом частей и порядковым номером тока часть, которая может быть Uset, чтобы определить, что), или в «чистовой» действия, которые вы можете использовать, если вы

chunking: 
    success: 
     endpoint: "/upload/finish" 

вы должны создать маршрут (точно так же, как показано выше) и действие , Это действие будет активировано после отправки последней части. Если файл был слишком мал, чтобы его можно было разделить, это не будет вызвано, если вы не установите обязательное значение «true».

Последнее, что ответ json. Эта часть проста, прекрасный загрузчик ожидает, что вы ответите (с помощью json), что вы получили файл, и все прошло гладко. Если это не получится, предполагается, что что-то пошло не так (вы можете больше узнать о ожидаемом json в документах загрузчика). Важно то, что в случае сбоя он попытается снова отправить неудачную часть (если для параметра autoRetry установлено значение true).

Теперь для зрения (Haml):

#fine-uploader{"data- authenticity-token" => form_authenticity_token} 
%script#template-name 
    Here goes the template 

Подробнее о шаблонировании вы можете прочитать в документации, но главное, не используйте форму рельсов (или простую форму) для этого. Существует способ подключения форм с прекрасным загрузчиком, но я не смог заставить его работать, и мне не нужно было использовать форму, но если вам это нужно, вы можете создать скрытое поле с созданным токеном , чтобы идентифицировать его и использовать вместо qquuid для идентификации файлов. Вы можете предоставить его в разделе params одинаково, вы предоставили токен CSRF и используете его в действии «create» в контроллере uploads.

И все. Надеюсь, это поможет кому-то.

EDIT: Существует пример приложение сделано пользователем Panczo размещена in the comments