Suppression d'un fichier renommé avec dropzone
Bonjour,
Je rencontre actuellement un petit soucis avec la librairie dropzone.js. Tout se passe bien, je fais mon upload, mon redimensionnement et je modifie le nom de la photo pour l'enregistrer sur le serveur. Le soucis est que suite à ce renommage, il m'est impossible de supprimer la photo (avec dropzone j'entends).
Une fois la photo uploadée je change pourtant le nom de l'image uploadée :
success: function(file,done) {
var nameElement = file.previewElement.querySelector('[data-dz-name]');
nameElement.innerHTML = '';
nameElement.innerHTML = done.newImageName;
}Mais pourtant au moment de la suppression dropzone me garde l'ancien nom en paramètre, que je tente de récupérer comme ceci :
this.on('removedfile', function(file) {
$.ajax({
type: 'DELETE',
url: url + '/' + file.name,
data: {name: file.name},
success: function(data){
if( data.code == 200 ) {
console.log('success');
}
}
});
});Si quelqu'un pouvait m'expliquer comment changer le nom du fichier une fois celui ci uploadé ou si quelqu'un s'est déjà retrouvé confronté au problème je suis preneur =)
Merci à vous =)
12 réponses
Salut,
Tu peux peut-être créer un objet :
var files = {};et, dans ton success faire :
files[file.name] = done.newImageName;et dans ton onRemovedFile :
data: {name: files[file.name]}Non ?
++
Effectivement, c'est une solution à laquelle je n'avais pas pensé. Tellement omnubilé par le fait qu'une solution interne à dropzone puisse exister je n'ai pas pensé à tenter cette option. Je teste ça demain et je fais un retour ;)
J ai mis en place dropzone sur mon site. je regarde ce que j'ai fait Et je te réponds des un possible.
Déjà avant de donner le code, je te présente le comportement de ce que j'ai réalisé : il s'agit de l'ajout d'une image (pas d'une bibliothèque d'images) - Pour moi c'était pour ajouter une image à la Une dans l'édition d'un article. Ci-dessous le comportement en gif animé. Est-ce que c'est ce que tu cherches à faire ?
Oui et c'est ce que je fais actuellement, j'autorise juste l'upload simultané de plusieurs uploads. Mon soucis c'est de pouvoir supprimer la ou les images une fois celles-ci uploadées et envoyées sur le serveur (que j'ai renommée lors de l'upload). Je renvois donc le nouveau nom du fichier avec ma réponse mais celui-ci n'est pas pris en compte par dropzone, et je ne vois pas vraiment où dropzone stocke le nom de ce fichier. Je pense que je vais partir sur la solution de jeremylevy pour faire la suppression à la volée ;)
Je te donne mon code de configuration de dropzone, brut de pomme ( à analyser) - J'avais rencontré la même difficulté que toi
Code que je charge juste après avoir chargé le CSS et le JS de dropzone
Explication :
1/ les 2 lignes suivantes en haut du code sont à ajouter pour configurer le lien de suppression et son libellé
addRemoveLinks: true,
dictRemoveFile: "Supprimer l'image à la Une"
2/ en bas dans le code je passe un appel ajax qui gère la suppression lorsque l'utilisateur cliquera sur le lien "Supprimer l'image à la Une"
(dans this.on('removedfile', function(file) {
//console.log(file.name);
$.ajax({ ......
)
Le code complet :
<script>
Dropzone.options.featuredImagePostForm = {
url: "/urlDeSuppression/idDeLimageASupprimer",
maxFilesize: 5, //MB
maxFiles:1,
dictDefaultMessage: 'Insérer une image à la Une',
acceptedFiles: ".jpeg,.jpg,.png,.JPEG,.JPG,.PNG",
thumbnailWidth:"750",
thumbnailHeight:"375",
addRemoveLinks: true,
dictRemoveFile: "Supprimer l'image à la Une",
dictCancelUpload : "Annuler l'upload",
dictCancelUploadConfirmation :"Confirmer l'annulation de l'upload",
dictInvalidFileType : "Uniquement des images .jpg ou .png",
dictFileTooBig :"Le fichier doit être inférieur à {{maxFilesize}}M",
dictResponseError : "Désolé, il y a eu une erreur serveur {{statusCode}}",
accept: function(file, done) {
// console.log('upoloaded'); //debuging the upload
// injecte le message flash de succès et l'affiche
done();
},
init: function() {
this.on("maxfilesexceeded", function(file) {
alert('Vous ne pouvez pas ajouter une autre image à la Une. Supprimez d\'abord l\'image actuelle');
this.removeFile(file);
});
this.on("success", function(file, response) {
console.log(response);
});
this.on('removedfile', function(file) {
//console.log(file.name);
$.ajax({
type: 'POST',
url: '/urlDeSuppression/idDeLimageASupprimer',
//data: { 'filename': file_name },
success: function(report) {
$('#message').html('');
$('#message').html('<div class="alert alert-success" id="alert">L\'image a été supprimée</div>').fadeIn('slow').delay(2000).fadeOut('slow');
// console.log(report);
},
error: function(report) {
console.log(report);
}
});
});
}
};
</script>Effectivement jeremylevy c'était une bonne idée je te remercie =)
Et merci Entrepreneo.fr mais c'est exactement ce que je faisais actuellement ;)
Et ça ne fonctionne pas pour toi avec la mème méthode ? Etrange, ça marche bien chez moi.
Non c'est ma méthode Ajax pour supprimer le fichier qui ne marchait pas, parce que le fichier sur le serveur était renommé ;). Donc forcément en utilisant les paramètres de dropzone le nom ne correspondait pas.
Ah OK rien à voir avec dropZone donc :) Idem je renomme le fichier, c'est pour ça que je t'avais passé mon code avec en url Ajax '/urlDeSuppression/idDeLimageASupprimer' (parce que je renomme les fichiers image uploadés aussi. Ici avec l'id du post auxquels ils sont liés). Cool si ça marche.