Загрузка файла при сбросе с помощью angular-wakanda

Для этого вы должны использовать свою собственную серверную часть метода. Вы можете использовать метод RPC, метод класса данных или обработчик HTTP.

Решение, которое я покажу вам здесь, использует последнее, обработчик HTTP.

Вы должны отправить файл, выбранный в файле, а затем выполнить процесс на стороне сервера внутри метода на стороне сервера.

Вот мой клиентский код

function uploadFiles() {
    return new Promise(function(resolve,refuse){
        var fileInputs = $('#editorsDiv input[type="file"]'),
            fd = new FormData(),
            atLeastOneFile = false;

        fileInputs.each(function(index,value){
            if(this.files.length !== 0){
                fd.append(this.id,this.files[0],this.files[0].name);
                atLeastOneFile = true;
            }
        });
        if(atLeastOneFile){
            $.ajax({
                url: '/uploadFile',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: fd,
                success:function(evt){
                    app.data.templateImages = evt;
                    resolve(true);
                }
            });
        }else{
            resolve(true); 
        }
    });
}

Этот метод возвращает обещание, но вам это не нужно.

А вот мой код на стороне сервера

/*
 * This method can handle the upload of files send via http request
 * The files are stored in the DateFolder/uploadFiles
 * It return an JSON containing the id and the name of the fileuploaded. The name can change if there is an existing file with the same name.
 *
 */

function uploadFile(request,response){
    var i,
        j=1,
        nameTemp,
        files=[],
        returnJSON = [],
        newName;

    for(i=0;i<request.parts.length;i++){
        files.push(new File(getFolder('path')+'/DataFolder/uploadFiles/'+request.parts[i].fileName.replace(/\s/g,'_')));
        returnJSON[i]={};
        returnJSON[i].name = request.parts[i].name
        returnJSON[i].value = request.parts[i].fileName;
    }

    for(i=0;i<files.length;i++){
        j=1;
        if(!files[i].exists){
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
        }else{
            while(files[i].exists){
                nameTemp = files[i].name.replace(/\s/g,'_');
                files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+files[i].nameNoExt.replace(/\s/g,'_')+j+'.'+files[i].extension);
                newName = files[i].name;
                if(files[i].exists){
                    files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+nameTemp);
                }
                j++;
            }
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
            returnJSON[i].value = newName;
        }
    }
    returnJSON = JSON.stringify(returnJSON);
    response.contentType = 'application/json';
    return returnJSON;
}

Здесь вы можете видеть, что я обрабатываю свои файлы. Здесь я создаю файл в местоположении <PROJECT_PATH>/DataFolder/Upload/, затем мне нужно записать содержимое в новый созданный файл с расширением BinaryStream. Если файл с таким именем уже существует, я добавляю счетчик, который увеличивается до тех пор, пока имя файла, связанное с номером, не будет существовать.

Итак, здесь вы можете делать с файлом все, что хотите. Вы также можете указать идентификатор, а затем сохранить файл для объекта.

Другое решение, как сказал Иссам, заключается в использовании события проверки атрибута изображения, после чего вы сможете обрабатывать файл внутри события.

Это также зависит от процесса, который вы хотите сделать с файлом?

чтобы добавить поддержку перетаскивания в элемент html, добавьте следующий код к приведенному выше ответу: https://stackoverflow.com/a/37348103/4685398

добавить проверку удаленных файлов в uploadFiles(). если нет dropppedFiles используйте fileInputs:

    // file upload
    $scope.uploadFiles = function(droppedFiles) {
        return new Promise(function(resolve, refuse) {
            var fileInputs = $('input[type="file"]');
            var formData = new FormData();
            var atLeastOneFile = false;

            // validate if dropzone or file input
            if (droppedFiles) {
                for (var i = 0; i < droppedFiles.length; i++) {
                    formData.append('dropzone', droppedFiles[i], droppedFiles[i].name);
                    atLeastOneFile = true;
                };
            }
            else {
                fileInputs.each(function(index, value) {
                    if (this.files.length !== 0) {
                        formData.append('form', this.files[0], this.files[0].name);
                        atLeastOneFile = true;
                    }
                });
            }
            if (atLeastOneFile) {
                $.ajax({
                    url: '/uploadFile',
                    type: 'POST',
                    processData: false, // important
                    contentType: false, // important
                    dataType: 'json',
                    data: formData,
                    success: function(evt) {
                        resolve(true);
                    }
                });
            }
            else {
                resolve(true);
            }
        });
    };

добавить событие drop в дропзону и вызвать uploadFiles(e.originalEvent.dataTransfer.files)с удаленными файлами:

    // dropzone for file upload
    $("#drop-box").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
        })
        .on('dragover dragenter', function() {
            $(this).addClass('is-dragover');
        })
        .on('dragleave dragend drop', function() {
            $(this).removeClass('is-dragover');
        })
        .on('drop', function(e) {
            $scope.uploadFiles(e.originalEvent.dataTransfer.files);
        });

Вы можете использовать Атрибут событий, в зависимости от ваших потребностей, попробуйте подтвердить или сохранить событие. они позволяют вам запускать метод перед сохранением файла.