Bonjour à tous,
je vous explique mon problème,
J'ai un input de type file sur le quel j'ai attaché une directive. file-upload.
Celle ci lui attache des événement drag and drop pour récupérer un fichier . Cependant tous fonctionne mais seulement qu'une seule fois. Ensuite mon drag and drope n'as plus d'effet et le navigateur ouvre le fichier dropé ..
auriez vous une piste ou un problèmde déjà rencontré similaire j'ai aucune idée du pourquoi du comment.
le tempalte :
<input ng-file-upload="searchAudio" id="drop" type="text" readonly class="dragndrop-title" ng-model="fileName">
la directive
app.directive("ngFileUpload", function($state, $stateParams, $localStorage, researchRepository, fileStorage, $rootScope, $compile, toolService) {
return {
link: function($scope, el, attr) {
var bar = $("#search-progress-bar"),
parentBar = bar.parent();
function addEventHandler(obj, evt, handler) {
if (obj.addEventListener) {
// W3C method
obj.addEventListener(evt, handler, false);
} else if (obj.attachEvent) {
// IE method.
obj.attachEvent('on' + evt, handler);
} else {
// Old school method.-
obj['on' + evt] = handler;
}
}
function cancel(e) {
if (e.preventDefault) { e.preventDefault(); }
return false;
}
if (attr.ngFileUpload == 'searchAudio') {
var drop = el[0];
var parent = el.parent();
// Tells the browser that we *can* drop on this target
addEventHandler(drop, 'mouseup', function(e){
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the mp3.
})
addEventHandler(drop, 'dragover', cancel);
addEventHandler(drop, 'dragleave',function(e){
angular.element('#drop').css("border","1px solid #797979");
});
addEventHandler(drop, 'dragover', function(e){
angular.element("#drop").css('border','2px solid rgba(255,255,255,1)');
});
addEventHandler(drop, 'dragenter', cancel);
addEventHandler(drop, 'drop', function(e) {
e.preventDefault();
angular.element('#drop').css("border","1px solid #797979");
var dt = e.dataTransfer;
var file = dt.files;
$scope.currentFile = file;
//now we have the file on the browser, we need to analyse it
if (file[0].type == 'audio/mpeg' || file[0].type == 'audio/wav' || file[0].type == 'audio/mp3') {
$scope.fileName = file[0].name;
$scope.fd = file[0];
angular.element($('#drop')).val($scope.fileName);
//we send directly the data to the query
fileStorage.removeFile();
if ($scope.fileName != undefined) {
//we remove the query from the search selectize
$("#researchBarId").empty();
var selectize = $("#researchBarId")[0].selectize;
selectize.lastQuery = "";
selectize.lastValue = "";
$scope.request = null;
selectize.setTextboxValue(selectize.lastQuery);
$localStorage.audioF = $scope.fd;
$stateParams = {} // on vide les autres paramètres
fileStorage.stockFile(file[0]);
$scope.removeAllPreviousTag();
}
} else {
alert(file[0].type)
file = null
$scope.fileName = null
$scope.fd = null
}
toolService.updateProgressBar(file,el,bar);
});
} else {
el.bind("click", function(e) {
if ($localStorage.currentUser)
$scope.sendFile($scope.file);
});
}
}
}
});
Je ne suis pas l'auteur de se composant mais en cas de question je peux vous éclairer si besoin ...
Merci beaucoup pour votre futur aide