Перетащите и загрузите

Question

Я искал вокруг, нашел несколько решений, но ни одно из них не помогло мне в моем случае.У меня есть кнопка загрузки, которая работает при нажатии, я хочу, чтобы она также могла перетаскивать файл для загрузки.

HTML:

        <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 + angular: $

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");
        });

    };

obs: мне просто нужно перетащить его и получить из него данные, чтобы я мог вызвать этот файл и использовать уже готовую функцию.

Answer 1

хорошо, если кому-то когда-нибудь понадобится это, вот как я исправил мою проблему: используя модуль ng-file-upload (https://www.npmjs.com/package/ng-file-upload) HTML:

<div ngf-drop="dragDrop($file)" ngf-select="fileSelected($files)" ng-model="file" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true" accept="image/*,application/pdf" ngf-pattern="'image/*,application/pdf'" ngf-drop="upload($file)" style="width:45%; cursor: pointer">

в ngf-drop = "dragDrop ($ file) "будет вызывать перетаскивание функции всякий раз, когда файл будет сброшен в поле. in ngf-select =" fileSelected ($ files) "при нажатии активирует поиск по вашим папкам для загрузки файла

Javascript:

    $scope.dragDrop = function(file) 
    {
        var files = [
            file
        ];
}

и

    $scope.fileSelected = function(file)
    {
         var files = [file];
}

Надеюсь, это будет полезно для кого-то еще.