Fine Uploader mit Rails Formular

Question

Ich habe vor kurzem Fine Uploader in unserer Rails App installiert. Ich habe Dokumentation gelesen und ein wenig damit experimentiert, aber ich verstehe nicht, wie das Ding wirklich funktioniert, und deswegen habe ich viele Probleme, es zu implementieren.

Was ich getan habe: Installierte es (zwei Möglichkeiten, eine "klassische" und die zweite mit dem Fineuploader Edelstein, der das gleiche zu tun scheint).

Erstellt eine Kaffeedatei mit dieser.

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

Und das schafft eine „laden Sie eine Datei“ -Taste (was natürlich nicht funktioniert, denn es gibt keine Konfiguration ist dies auf dem Server-Site zu behandeln), aber ich möchte diese Schaltfläche haben in der einfachen -Form Eingabefeld.

Auch Templating funktioniert nicht, ich verstehe nicht wirklich warum.

Pech, Dokumentation fehlt Hilfe für Rails.

Ich bin offen für diese Bibliothek, um etwas zu ändern sonst, solange es die Eigenschaften enthält, die ich brauche, die sind:

• Pausieren und Fortsetzen herunterladen
• Datei Chunking (im Falle des Scheiterns, Benutzer nicht gezwungen, von vorn beginnen)
• Fortschrittsbalken (nicht unbedingt notwendig)

Answer 1

ich habe es geschafft, damit es funktioniert, und ich habe einige Kenntnisse darüber, wie es funktioniert, so werde ich teile dieses Wissen e. Aber ich möchte stark darauf hinweisen, dass ich das alleine herausgefunden habe, also könnte es Fehler geben bei dem, was ich anbiete. Nutzen Sie Ihr Wissen und Ihre Erfahrung, und wenn Sie denken, dass etwas besser gemacht werden kann, haben Sie vielleicht Recht.

Laden Sie zuerst die Bibliothek mit npm herunter. Ich habe zwei Edelsteine ​​dafür gefunden, aber benutze sie nicht. Zu der Zeit, als ich das schreibe, sind diese Edelsteine ​​veraltet und werden nicht funktionieren. Github Links:

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

Wenn Sie diejenigen herunterladen passiert, werden Sie Bibliothek neu installieren.

Danach werden Sie das Javascript erstellen. Ich habe eine Datei namens „fine-uploader.coffee“ erstellt, und setzen es so etwas wie folgt aus:

$ -> 
    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" 
) 

Ich werde beschreiben, nicht das, was was ist, weil all dies kann in der Dokumentation gefunden werden Stattdessen konzentriere ich mich auf das, was für uns wichtig ist. In der "Anfrage" haben Sie einen Endpunkt, für diesen Fall müssen wir ihn wie folgt zu unseren Routen hinzufügen.

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

Dann müssen wir unseren Controller erstellen. Wie Sie sehen können, habe ich einen dedizierten Controller für die Verarbeitung von Uploads entwickelt, und ich empfehle Ihnen, dies zu tun.

Im Upload-Controller haben wir diese Aktion:

def create 
    file = params[:qqfile] 

    #code that does whatever you need 

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

In Ihrem Controller, werden Sie einige params haben (Sie alle von ihnen in der Dokumentation überprüfen kann), aber derjenige, der Ihnen wichtig ist qqfile. Dies wird die Datei sein, die gepostet wurde. Sie können damit machen, was Sie wollen. Ich habe Carrierwave verwendet, um es zu speichern und zu verarbeiten, und ich denke, dass dies keine weitere Beschreibung erfordert (wie Sie es im carrierwave-dosc finden können, vielleicht verwenden Sie auch etwas anderes, wie Refil).

Sie müssen auch einen Parameter mit Token hinzufügen, Sie können es in der 7. Zeile der Javascript-Datei sehen. Ich empfehle, über CSRF-Token zu lesen.

Wichtig ist, dass, wenn Sie (wie ich) die Chunking-Option gewählt haben, dies nicht die ganze Datei ist, nur der Teil davon. Sie können größere Tutorials finden, wie man mit geteilten Dateien umgehen kann, aber was Sie beachten müssen, ist die qquuid, die Sie in params senden werden. Diese ID identifiziert die Datei, die hochgeladen wird, und Sie benötigen sie, um zu bestimmen, zu welcher Datei der hochgeladene Teil gehört, sodass Sie zwei Dateien nicht mischen. Jedes Teil wird per separater Postanforderung gesendet. Daher empfehle ich, die Spalte qquuid dem Modell hinzuzufügen, das die Dateien verarbeitet. Zum Beispiel:

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

Nachdem Sie alle Dateien gespeichert haben, können Sie sie kombinieren (überprüfen Sie den Ruby-Datei-Klasse, um zu lernen, wie).

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

Die obige Zeile am Ende davon, entweder in erstellen die Tat umgesetzt werden, das besagt, mit der Bedingung, dass dies der letzte Teil ist (es gibt params mit der Gesamtteilenummer und der Indexnummer der aktuellen Teil, die uset werden kann, dass), um zu bestimmen, oder in der „finish“ Aktion, die Sie verwenden können, wenn Sie

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

Sie tun eine Route (die gleiche Art und Weise zu schaffen haben, wie oben gezeigt) und die Aktion . Diese Aktion wird ausgelöst, nachdem der letzte Teil gesendet wurde. Wenn die Datei zu klein ist, um geteilt zu werden, wird dies NICHT ausgelöst, es sei denn, Sie haben "obligatorisch" auf "wahr" gesetzt.

Die letzte Sache, ist der JSON antworten. Dieser Teil ist einfach, ein guter Uploader erwartet von Ihnen, dass Sie (mit json) antworten, dass Sie die Datei erhalten haben und alles reibungslos funktioniert. Wenn es nicht verstanden wird, wird davon ausgegangen, dass etwas schief gelaufen ist (Sie können mehr über den erwarteten JSON in der Uploader-Dokumentation lesen). Es kommt darauf an, dass im Falle eines Fehlers versucht wird, den fehlerhaften Teil erneut zu senden (wenn "autoRetry" auf "true" gesetzt ist).

Nun, für die Ansicht (haml):

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

Mehr über Templating Sie in docs lesen können, aber wichtige Sache ist, keine Schienen Form (oder einfache Form) dafür. Es gibt eine Möglichkeit, Formulare mit einem feinen Uploader zu verbinden, aber ich konnte es nicht funktionieren lassen, und ich musste das Formular nicht verwenden, aber wenn Sie es brauchen, können Sie ein verstecktes Feld mit dem generierten Token erstellen , um es zu identifizieren, und verwenden Sie es anstelle von qquuid, um die Dateien zu identifizieren. Sie können es im Abschnitt params auf die gleiche Weise bereitstellen, Sie haben ein CSRF-Token bereitgestellt und es in der Aktion "create" im Upload-Controller verwendet.

Und das ist es. Ich hoffe, es wird jemandem helfen.

EDIT: Es gibt ein Beispiel App von user Panczo gemacht posted in the comments