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.

See stackoverflow.com/questions/29841147/… . What is purpose of angular.element(inputElem).val(null);? — guest271314
– guest271314, Commented Jul 3, 2016 at 10:10
angular.element(inputElem).val(null); ---> this just remove all data from the file uploader. But i want to only remove specific image file from uploader. — Avinash
– Avinash, Commented Jul 3, 2016 at 10:16
can you show the code for deleteTempImage($index) Or update on plunkr — Prianca
– Prianca, Commented Jul 3, 2016 at 10:23
this is on plunkr plnkr.co/edit/gBQC8QDeWilwHaJr7dal?p=preview — Avinash
– Avinash, Commented Jul 3, 2016 at 10:36

guest271314 · Accepted Answer · 2016-07-03 10:23:55Z

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

answered Jul 3, 2016 at 10:23

guest271314

1

Sign up to request clarification or add additional context in comments.

Comments

Prianca · Accepted Answer · 2016-07-03 11:02:00Z

0

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

}

answered Jul 3, 2016 at 11:02

Prianca

4842 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related