Téléchargement de fichiers avec Backbone

Question

J'utilise Backbone.js dans une application Rails et j'ai besoin de télécharger des fichiers dans le cadre de l'un des modèles Backbone.

Je ne pense pas que Backbone permette le téléchargement de fichiers en plusieurs parties. Quelqu'un a-t-il réussi à le faire fonctionner via un plugin ou avec une autre bibliothèque externe? Comment puis-je étendre Backbone.js pour prendre en charge cela?

Answer 1

Pour répondre à ma propre question après quelques mois d'essai à l'aide de différentes méthodes. Ma solution est la suivante (avec Rails).

Pour tout formulaire qui requiert un téléchargement de fichier, je mettrais data-remote="true" et enctype="multipart/form-data" et comprennent rails.js et jquery.iframe-transport.js.

Paramètre data-remote="true" avec rails.js me permet de lier ajax:success et de créer la Backbone.js modèle à succès.

HTML:

<form action="/posts.js" method="post" data-remote="true" enctype="multipart/form-data">
  <input type="text" name="post[message]" />
  <input type="file" name="post[file]" />
  <button>Submit</button>
</form>

JavaScript:

Vous devez évidemment lier ajax:error pour traiter les cas d'erreur.

Pour moi, les données sont désinfectés dans l' ActiveRecord modèle, donc ne pas avoir à trop se soucier de la eval déclaration.

$('form').bind('ajax:success', function(event, data) {
  new Model(eval(data)); // Your newly created Backbone.js model
});

Rails De Contrôleur:

class PostsController < ApplicationController
  respond_to :js

  def create
    @post = Post.create(params[:post])
    respond_with @post
  end
end

Rails (Vue de créer.js.haml):

À l'aide de la remotipart gem.

Cela permettra de traiter le cas lorsque le formulaire ne les uploads de fichier avec enctype d'être ensemble, et quand il n'est pas.

Vous pouvez choisir d'appel sanitize sur votre réponse ici.

= remotipart_response do
  - if remotipart_submitted?
    = "eval(#{Yajl::Encoder.encode(@post)});"
  - else
    =raw "eval(#{Yajl::Encoder.encode(@post)});"

Answer 2

Vous voudrez peut-être consulter le plugin jquery.iframe.transport . Si vous utilisez rails 3, vous pouvez utiliser remotipart à la place (il regroupe le plugin iframe.transport), qui se connecte au pilote ujs de rails pour ajouter automatiquement la prise en charge du téléchargement de fichiers dans les demandes ajax.

Answer 3

Je pense que vous êtes l'incompréhension comment épine dorsale de travaux. Backbone est un MVC bibliothèque de javascript, pas d'un serveur web. Les téléchargements de fichiers sont négociés entre le navigateur client et le serveur. La dorsale est juste le moyen de la couche qui vous aide à organiser et présenter des données dans un facile, de manière pratique.

Cela étant dit, ce que vous devez faire pour associer un fichier avec votre modèle est 1) gérer l'upload avec rails et ensuite 2) stocker le nom de fichier et l'emplacement dans une chaîne de caractères au sein de votre modèle.

Voici donc le téléchargement du fichier de la partie:

http://khamsouk.souvanlasy.com/articles/ajax-file-uploads-in-rails-using-attachment_fu-and-responds_to_parent

Une fois que vous obtenez de retour le list_item objet, il faudrait créer un nouveau champ dans votre modèle et de stocker list_item.filename et asset_path(list_item).

Espérons que cela aide.

Answer 4

Si cela ne vous dérange pas de rompre la compatibilité descendante, vous pouvez profiter de XHR2 et FormData

C'est aussi simple que ça:

 var data = new FormData( $('form.someForm').get(0) );
$.ajax('http://*****.com', {
  type:'POST',
  data: data,
  processData: false,
  contentType: false // it automaticly sets multipart/form-data; boundary=...
});