Remove specific image file from file uploader in asp.net MVC using Angular JS

Question

i am uploading multiple image. After selecting image it is showing in a list with delete button on the side. i was successful to remove the image(file name) from the scope but i am not able to delete the specific data from the file uploader or FormData(i.e js object that stores the data uploaded).

the view looks like this

my js file

angular.module('fupApp', [])
.directive('ngFiles', ['$parse', function ($parse) {
    function fn_link(scope, element, attrs) {

        var onchange = $parse(attrs.ngFiles);
        element.on('change', function (event) {
            onchange(scope, { $files: event.target.files });
        })
    }
    return {
        link: fn_link

    }

}])

.controller('fupController', function ($scope, $http) {
    var formdata = new FormData();
    $scope.imagesrc = [];
    $scope.getTheFiles = function ($files) {
        for (var i = 0; i < $files.length; i++) {
            var reader = new FileReader();
            reader.fileName = $files[i].name;
            reader.onload = function (event) {
                var image = {};
                image.Name = event.target.fileName;
                image.Size = (event.total / 1024).toFixed(2);
                image.Src = event.target.result;
                $scope.imagesrc.push(image);
                $scope.$apply();

            }
            reader.readAsDataURL($files[i]);
        }
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        })
    }
    $scope.deleteTempImage = function (idx) {

        $scope.imagesrc.splice(idx, 1);


      -->>>> how to delete the specific data from formdata in here??????????


        alert("deleted");
    }

        $scope.uploadFiles = function () {
            var request = {
                method: 'POST',
                url: '/api/FileUpload',
                data: formdata,
                headers: {
                    'Content-Type': undefined
                }
            };
            $http(request).success(function (d) {
                alert(d);
            }).error(function () {
                alert("Failed");
                $scope.reset();
            })
        }

        $scope.reset = function () {

            angular.forEach(
                angular.element("input [type='file']"),
                function (inputElem) {
                    angular.element(inputElem).val(null);

                }

                );
            $scope.imagesrc = [];
            formdata = new FormData();
        }

    })

this is my view

<div ng-app="fupApp" ng-controller="fupController">
     <div class="container">
         <div class="panel panel-info">
             <div class="panel-heading">
                 Photos
             </div>
             <div class="panel-body">
                 <table class="table table-hover table-boardered">
                     <thead>
                         <tr>
                             <td >Title</td>
                             <td>Image</td>
                             <td>Size</td>
                         </tr>

                     </thead>
                     <tbody>
                         <tr ng-repeat="image in imagesrc track by $index">
                             <td>{{image.Name}}</td>
                             <td>
                                 <img ng-src="{{image.Src}}" title="{{image.Name}}" style="width:100px" />
                            </td>
                             <td>{{image.Size}}</td>
                             <td><input type="button" class="btn btn-success " ng-click="deleteTempImage($index)" value="delete" />
                         </td>
                         </tr>
                     </tbody>

                 </table>
                 <div class="row">
                     <div class="col-lg-7">
                         <input type="file" multiple ng-files="getTheFiles($files)"/>
                     </div>
                     <div class="col-lg-5">
                         <input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
                         <input ng-disabled="!imagesrc.length"  type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

The problem here is after i press upload all the image I select gets uploaded. As you can see there is shown 6 files in the image but i have deleted two images already but as i click on upload all the image get saved including the one i deleted previously.

Will appreciate any help to prevent saving of the unwanted image.i am still learning AngularJS so please help.

Thank you.

UPDATE(SOLVED)

Well this solved my problem. i passed the file as well as the index

<input type="button" class="btn btn-success " ng-click="deleteTempImage($index,image)" value="delete" />

then i deleted the specific item in my formdata like this.

 $scope.deleteTempImage = function (idx,image) {
        debugger;
        $scope.imagesrc.splice(idx, 1);
        formdata.delete(idx, image);
        alert("deleted");
    }

Anyway thanks for instructing me.

Answer 1

You can use .delete() method of FormData to remove item from FormData object

var data = new FormData();
var arr = [0,1,2];
var val = ["a", "b", "c"];
arr.forEach(function(value, key) {
  data.append(key, val[key])
});
for (prop of data) console.log("before .delete() call", prop);
// delete item at index `2` within `data`:`FormData`
data.delete("2"); 
for (prop of data) console.log("following .delete() call", prop);

Answer 2

you are removing item form object list in ypur upload code you are sendig formData where is the file still exist. You need to remove it like this. PS. this raw code modify based on your req.

  $scope.deleteTempImage = function(idx) {

if(formData.has('yourKey-$files.key')) 
{
formData.delete('yourKey-$files.key');
alert("deleted");
}

}