FineUploader OnComplete méthode ne se déclenche pas. Newbie, besoin d'un certain handhanding

Question

Donc, j'utilise FineUploader 3.3 dans une application MVC 4, et c'est un plugin très cool, qui vaut bien le coût nominal. Merci d'avoir construit cela, très utile. Maintenant, j'ai juste besoin de le faire fonctionner correctement. Je suis un nouveau venu chez MVC et je suis absolument novice en ce qui concerne le renvoi de JSON. J'ai donc besoin d'aide pour que cela fonctionne. Voici ce que j'utilise, tous dans doc.ready.

var manualuploader = $('#files-upload').fineUploader({ 
request: 
{ 
    endpoint: '@Url.Action("UploadFile", "Survey")', 
    customHeaders: { Accept: 'application/json' }, 
    params: { 
     //variables are populated outside of this code snippet 
     surveyInstanceId: (function() { return instance; }), 
     surveyItemResultId: (function() { return surveyItemResultId; }), 
     itemId: (function() { return itemId; }), 
     imageLoopCounter: (function() { return counter++; }) 
    }, 
    validation: { 
     allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp'] 
    }, 
    multiple: true, 
    text: { 
     uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files' 
    },        
    callbacks: { 
     onComplete: function(id, fileName, responseJSON) { 
      alert("Success: " + responseJSON.success); 
      if (responseJSON.success) { 
       $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">'); 
       } 
      } 
    } 
} 

EDIT: J'avais été à l'aide d'Internet Explorer 9, puis passer à Chrome, Firefox et je peux télécharger très bien. Qu'est-ce qui est requis pour IE9? La validation ne fonctionne pas, quel que soit le navigateur.

Les points d'extrémité se déclenchent, et les fichiers/paramètres sont remplis, donc tout cela est bon! La validation n'empêche pas un utilisateur de sélectionner quelque chose en dehors de cette liste, mais je peux travailler avec ceci pour le moment. Je peux enregistrer avec succès et faire ce que j'ai besoin de faire avec mon téléchargement, moins obtenir le OnComplete à feu. En fait, dans IE, j'obtiens un dialogue OPEN/SAVE avec ce que j'ai actuellement. Question: Les paramètres de la fonction onComplete (id, filename, responseJSON) sont-ils remplis par le retour ou par le renvoi? Je suis juste confus à ce sujet. Est-ce que mon JSON doit avoir ces paramètres dedans, et peuplé?

Je ne le fais pas (remplir ces paramètres), et ma méthode de sortie en C# retourne JsonResult qui ressemble à ceci, juste (le cas échéant) retour « succès »:

return Json(new { success = true }); 

Ai-je besoin d'ajouter plus? Cette ligne est après que la sauvegarde a lieu, et tout ce que je veux faire est de dire à l'utilisateur tout est bon ou pas. Est-ce que la propriété 'success' de mon Json correspond au fichier responseJSON.success?

Que manque-t-il ou que je me trompe? Je suis sûr que cela aidera aussi les autres, alors j'espère que vous prendrez le temps et vous aider. Je vous en suis reconnaissant! Merci.

Answer 1

Aborder les éléments de votre question:

1. En ce qui concerne les restrictions à l'intérieur de la boîte de dialogue "sélectionner les fichiers", vous devez également définir l'option de validation acceptFiles. Voir le validation option section in the readme pour plus de détails. Votre propriété validation option au mauvais endroit. Il ne devrait pas être sous la propriété/option request. La même chose est vraie pour vos options/propriétés text, multiple et callbacks. En outre, vous ne définissez pas vos rappels correctement pour le plug-in jQuery.
2. La boîte de dialogue Ouvrir/Enregistrer dans IE est provoquée par le fait que votre serveur ne renvoie pas une réponse avec l'en-tête "Content-Type" correct. Le type de contenu de votre réponse doit être "texte/brut". Voir le server-side readme pour plus de détails.
3. Tout ce que votre serveur renvoie dans sa réponse sera analysé par Fine Uploader à l'aide de JSON.parse lors de la gestion du client côté réponse. Le résultat de l'appel de JSON.parse sur la réponse de votre serveur sera transmis en tant que paramètre responseJSON à votre gestionnaire de rappel onComplete. Si vous souhaitez transmettre des informations spécifiques de votre serveur à votre code côté client, comme du texte que vous souhaitez afficher côté client, le nouveau nom du fichier téléchargé, etc., vous pouvez le faire en ajoutant les propriétés appropriées à votre réponse du serveur. Ces données seront ensuite mises à votre disposition dans votre gestionnaire onComplete.Si vous n'en avez pas besoin, vous pouvez simplement renvoyer la réponse "succès" que vous renvoyez actuellement. Le fichier readme côté serveur, auquel j'ai été associé, fournit plus d'informations sur tout cela.

Pour clarifier ce que je l'ai dit dans # 2, votre code devrait ressembler à ceci:

$('#files-upload').fineUploader({ 
    request: { 
     endpoint: '@Url.Action("UploadFile", "Survey")', 
     customHeaders: { Accept: 'application/json' }, 
     params: { 
      //variables are populated outside of this code snippet 
      surveyInstanceId: (function() { return instance; }), 
      surveyItemResultId: (function() { return surveyItemResultId; }), 
      itemId: (function() { return itemId; }), 
      imageLoopCounter: (function() { return counter++; }) 
     } 
    }, 
    validation: { 
     allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp'] 
    }, 
    text: { 
     uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files' 
    } 
}) 
    .on('complete', function(event, id, fileName, responseJSON) { 
     alert("Success: " + responseJSON.success); 
     if (responseJSON.success) { 
      $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">'); 
     } 
    });