filepicker-rails w/formulaire d'inscription: bouton pour supprimer le fichier dans Filepicker

Question

Dans mon application Rails 3.2 j'utilise Filepicker via la gemme filepicker-rails pour permettre aux utilisateurs de télécharger une photo de profil sur le formulaire d'inscription. Dans le f.filepicker_field J'utilise l'option onchange d'appeler une fonction onImageUpload() qui obtient des informations sur l'image nouvellement téléchargées à partir du généré automatiquement event.fpfile et désactive le bouton de navigation FilePicker:

function onImageUpload() { 
    file = event.fpfile 
    img = $("<img>").prop("src", file.url).css({ 
     width: '160px', 
     height: '160px', 
    }); 
    $("#profile_photo_preview").append(img); 
    $(".filepicker-button").toggleClass("disabled"); 
}; 

je lis sur le event.fpfile au FilePicker docs section on Widgets. Dans la forme, j'ai aussi un lien qui, lorsque vous cliquez dessus, supprime l'image récemment mis à jour à partir du DOM et réautorise le bouton FilePicker:

:javascript 
    $(document).ready(function() { 
    $("#picture-remover").click(function() { 
     $("#profile_photo_preview").html(""); 
     if ($(".filepicker-button").hasClass("disabled")) { 
     $(".filepicker-button").toggleClass("disabled"); 
     }; 
    }); 
    }); 
... 
... 
= link_to "Remove Picture", id: "picture-remover" 

Tout cela semble fonctionner assez bien. Le seul problème est que si un utilisateur supprime la première image puis utilise le navigateur Filepicker pour en télécharger un autre, l'image originale est toujours enregistrée dans mon compte Filepicker. Je souhaite que mon lien "Supprimer l'image" supprime l'image non seulement du DOM, mais aussi de mon compte Filepicker. Les docs Filepicker ont une section sur la suppression/suppression des fichiers here mais je ne comprends pas vraiment l'exemple de code ou comment l'implémenter pour moi-même. Je suis particulièrement confus au sujet de la relation entre le InkBlob qui est mentionné pour la suppression d'un fichier et l'objet event.fpfile que j'utilise pour afficher un aperçu en miniature.

Jusqu'à présent, j'ai essayé d'ajouter la ligne suivante à mon « Supprimer l'image » lien, mais rien ne se passe:

:javascript 
    $(document).ready(function() { 
    $("#picture-remover").click(function() { 
     $("#profile_photo_preview").html(""); 
     if ($(".filepicker-button").hasClass("disabled")) { 
     $(".filepicker-button").toggleClass("disabled"); 
     }; 
     filepicker.remove(InkBlob); #added this line 
    }); 
    }); 

Un grand merci à tous ceux qui peuvent me diriger dans la bonne direction!

Answer 1

Les objets InkBlob et event.fpfile ont le même rôle et les mêmes attributs.

Dans votre exemple, vous pouvez passer l'objet event.fpfile à la fonction remove.

var file = event.fpfile; 
filepicker.remove(
    file, 
    function(){ 
    console.log("Removed"); 
    } 
); 

Généralement, pour supprimer le fichier filepicker vous avez seulement besoin de son URL.

Donc, ce code fonctionne aussi très bien:

var someObject = {url: 'https://www.filepicker.io/api/file/xaXphhT9R0GB1tPYUQAr'}; 
filepicker.remove(
    someObject, 
    function(){ 
    console.log("Removed"); 
    } 
);