I have been searching for solutions, but so far I haven't found anything that works for my specific case. I have an upload button that currently works on a click event, but I also want it to be able to drag and drop files for uploading.
Here is the HTML code snippet:
<div style="margin-top: 0px; width: 45%" ng-model="files" class="drop-box" onclick="document.getElementById('step-image-upload').click()" ng-disabled="instruction.locked || uploading">
<p>Drop image files<br/></br/>or click to upload</p>
</div>
Javascript and Angular code:
scope.fileSelected = function(files)
{
var promises = [];
$scope.uploading = true;
uploadService.uploadMultiple(files)
.then(function(images)
{
if(!images)
{
return $q.reject();
}
images.forEach(function(image)
{
image.highlightAreas = [];
promises.push($scope.selected.step.addImage(image)
.then(function()
{
return $q.resolve(image);
}));
});
return $q.all(promises);
})
.then(function(images)
{
var promises = [];
var newImageNumber = $scope.selected.step.images.length;
images.forEach(function(image, index)
{
promises.push(ImageExtension.createLinked({
imageNumber: newImageNumber + index,
caption: ""
},
image)
.then(function(imageExtension)
{
image.imageExtension = imageExtension;
return $q.resolve(true);
}));
});
return $q.all(promises);
})
.then(function()
{
$scope.uploading = false;
})
.catch(function()
{
$scope.uploading = false;
toastService.toastTranslation("CLIENT.EDIT.STEP.UPLOAD_ERROR");
});
};
Note: My main goal is to enable dragging and dropping of files to trigger the upload functionality, utilizing the existing file handling function.