Base solution for your next web application
Open Closed

How we send a list of data from view to script of view page #1014


User avatar
0
abu created

following are the script:

(function () {
    var controllerId = 'resourceUploadController';
    angular.module('app').controller(controllerId, [
        '$scope', '$location', 'abp.services.vault.resource', 'abp.services.vault.subCategory', 'abp.services.vault.category', 'abp.services.vault.fileType',
        'abp.services.vault.season', 'abp.services.vault.numberOfPeople','abp.services.vault.scenario','$http',
        function ($scope, $location, resourceService, subCategoryService, categoryService, fileTypeService, seasonService, numberOfPeopleService, scenarioService, $http) {
            var vm = this;
            var localize = abp.localization.getSource('Vault');
            vm.resourceInfo = {};
            $scope.subCategory = function () {
                subCategoryService.getSubCategories().success(function (data) {
                   
                    vm.subcategories = data.subCategories;
                });
            }
            $scope.subCategory();

            $scope.category = function () {
                categoryService.getCategories().success(function (data) {
                  
                    vm.categories = data.categories;
                });
            }
            $scope.category();

            $scope.fileType = function () {
                fileTypeService.getFileTypes().success(function (data) {
             
                    vm.filetypes = data.fileTypes;
                });
            }
            $scope.fileType();

            $scope.season = function () {
                seasonService.getSeasons().success(function (data) {
                
                    vm.seasons = data.seasons;
                });
            }
            $scope.season();

            $scope.numberofPeople = function () {
                numberOfPeopleService.getNumberOfPeoples().success(function (data) {
                   
                    vm.numberOfPeoples = data.numberOfPeoples;
                });
            }
            $scope.numberofPeople();

            $scope.scenario = function () {
                scenarioService.getScenarios().success(function (data) {
              
                    vm.scenarios = data.scenarios;
                });
            }
            $scope.scenario();

            vm.saveResource = function (element) {
                $scope.fileList = [];
                // get the files
                var files = element.files;
                var data = new FormData();
                debugger;
                for (var i = 0; i < files.length; i++) {

                    data.append("HelpSectionImages" + i, files[i]);
                }
                $.ajax({
                    url: '../ResourceUpload/SaveFiles', type: "POST", processData: false,
                    data: data, dataType: 'json',
                    contentType: false,
                    success: function (data) {
                        debugger;
                        abp.notify.info("Images Saved");
                        for (var i = 0; i < data.length; i++)
                        {
                            var url = data[i]
                            resourceService.createResource(vm.resourceInfo, url).success(function () {
                            });
                        }
                        abp.notify.info("Image Saved");
                        $location.path('/admin');
                    },
                    error: function (er) {
                        
                    }

                });
               
            };
           
            //============== DRAG & DROP =============

           var dropbox = document.getElementById("dropbox")
            $scope.dropText = 'Drop files here...'

            function dragEnterLeave(evt) {
                evt.stopPropagation()
                evt.preventDefault()
                $scope.$apply(function () {
                    $scope.dropText = 'Drop files here...'
                    $scope.dropClass = ''
                })
            }
            dropbox.addEventListener("dragenter", dragEnterLeave, false)
            dropbox.addEventListener("dragleave", dragEnterLeave, false)
            dropbox.addEventListener("dragover", function (evt) {
                evt.stopPropagation()
                evt.preventDefault()
                var clazz = 'not-available'
               
            }, false)
            dropbox.addEventListener("drop", function (evt) {
           
                evt.stopPropagation()
                evt.preventDefault()
                $scope.$apply(function () {
                    $scope.dropText = 'Drop files here...'
                    $scope.dropClass = ''
                })
                var files = evt.dataTransfer.files
           
                if (files.length > 0) {
    
                 
                    $scope.$apply(function () {
                        $scope.files = []
                        $scope.stepsModel = [];
                        for (var i = 0; i < files.length; i++) {
                       
                            $scope.files.push(files[i])
                            var file = files[i];
                            var reader = new FileReader();
                            reader.onload = $scope.imageIsLoaded;
                            reader.readAsDataURL(file);
                        }

                    })
                }
               
            }, false)

            $scope.imageIsLoaded = function (e) {
                $scope.$apply(function () {
                    $scope.stepsModel.push(e.target.result);
                });
            }
            //============== END DRAG & DROP =============
        }]);

 
})();

following are the View :

<script>

    $(document).ready(function () {
        $("body").removeClass("body_background");
        $("body").addClass("search_background");
        $('#check_all').click(function () { //on click
            $('input:checkbox').prop('checked', true);
        });
        $('#uncheck_all').click(function () { //on click
            $('input:checkbox').prop('checked', false);
        });
    });
</script>
@*@*<script src="~/Scripts/design/filedrop.js"></script>*@
@*<script type="text/javascript">
    $(function () {
        $('#dropZone').filedrop({
            url: '@Url.Action("UploadFiles","ResourceUpload")',
            paramname: 'files',
            maxFiles: 5,
            dragOver: function () {
                $('#dropZone').css('background', 'blue');
            },
            dragLeave: function () {
                $('#dropZone').css('background', 'gray');
            },
            drop: function () {
                $('#dropZone').css('background', 'gray');
            },
            afterAll: function () {
                $('#dropZone').html('The file(s) have been uploaded successfully!');
            },
            uploadFinished: function (i, file, response, time) {
                debugger;
                $('#uploadResult').append('<li>' + file.name + '</li>');
                $('#uploadResult').append('<img src="'+response+file.name+'"/>');
            }
        });
    });
</script>*@
<div  ng-controller="resourceUploadController as vm">
    <div class="row">
        <div class="col-md-2 search-logo">
            <div class="admin_login_text">
                <label class="home_login_label">easyJet</label>
            </div>
            <div class="menu_topp">
                <span class="admin_menu">
                    <label><a href="#/resourceUpload">Upload</a></label>
                    <label><a href="#/lightbox">Lightbox</a></label>
                    <label><a href="#">LogOut</a></label>
                </span>
            </div>
        </div>
    </div>
    <div id="main-wrap" class="clearfix">
        <div class="search-container clearfix ">
            <div class="addre-box-header search-header">
                <form class="header-addre-form">
                    <input id="search" placeholder=" Search" type="text">
                    <div class="selectParent">
                        <select>
                            <option ng-selected="true">Select</option>
                            <option ng-repeat="category in  vm.categories">{{category.catagoryName}}</option>
                        </select>
                        <button id="search_btn" class="fa fa-search" onclick="window.location.href='#/search'"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 sidebar_align">
            <div id='cssmenu'>
                <ul>
                    <li class='active'><span class="filter_options">UPLOAD OPTION</span></li>
                    <li class='last'><a href='' id="check_all"><span>Check All</span></a></li>
                    <li class='last'><a href='' id="uncheck_all"><span>Clear Selection</span></a></li>
                    <li class='last'><a href=''><span>Delete</span></a></li>
                    <li class='last'><a href='' ng-click="vm.saveResource()"><span>Save</span></a></li>
                </ul>
                <ul>
                    <li class='active'><span class="filter_options">GROUP OPTIONS</span></li>
                    <li class='last'><a href=''><span>Group</span></a></li>
                    <li class='last'><a href=''><span>Ungroup</span></a></li>
                    <li class='last'><a href=''><span>Copy</span></a></li>
                    <li class='last'><a href=''><span>Paste</span></a></li>
                    <li class='last'><a href=''><span>Asign Main File</span></a></li>
                </ul>
                <ul>
                    <li class='active'><span class="filter_options">Review Options</span></li>
                    <li class='last'><a href=''><span>Show Expired</span></a></li>
                    <li class='last'><a href=''><span>Show Deleted</span></a></li>
                </ul>
                <ul>
                    <li class='active'><span class="filter_options">File Managment</span></li>
                    <li class='last'><a href=''><span>Erase Deleted Files</span></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-10">
            <div class="container-fluid">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3>Upload Images</h3>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div id="dropbox" class="dropbox" ng-class="dropClass"><span>{{dropText}}</span></div>
                    </div>
                    <form method="post" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-md-12 UploadResult">
                                <div id="uploadFile" class="MyUploadFile" ng-show="files.length">
                                    <div>
                                        <div id="imageDiv" class="col-md-5">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div ng-repeat="step in stepsModel">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label style="padding: 20px 20px 20px 20px;"></label>
                                                            </div>
                                                        </div>
                                                        <div style="width:250px; height:250px; padding: 25px;">
                                                            <img id="img{{$index+1}}" ng-src="{{step}}" style=" width:250px; height:250px; padding:25px;" alt="No Image"/>
                                                        </div>

                                                        <span style="width:250px; height:250px; padding: 25px;"></span>
                                                        <span ng-switch="file.size > 1024*1024">
                                                            <span ng-switch-when="true"></span>
                                                            <span ng-switch-default></span>
                                                        </span>
                                                        <div class="row" style="margin: 20px 0px 30px 90px;">
                                                            <div class="col-md-6">
                                                                <input type="checkbox">
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div ng-repeat="file in files">
                                            <div class="col-md-7" style="float:right">
                                                <div class="row">
                                                    <table>
                                                        <tr>
                                                            <td class="uploadform_td">
                                                                <input id="fileName{{$index+1}}" type="text" class="uploadForm" ng-model="vm.resourceInfo.FileName" placeholder="File Name" />
                                                            </td>

                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td rowspan="4" class="uploadform_td">
                                                                <textarea id="description{{$index+1}}" class="uploadForm" ng-model="vm.resourceInfo.Description" placeholder="Description" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <select id="category{{$index+1}}" class="col-md-6 uploadForm_select" ng-model="vm.resourceInfo.CategoryId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="category in  vm.categories" value="{{category.id}}">{{category.categoryName}}</option>
                                                                </select>
                                                                <select id="subcategory{{$index+1}}" class="col-md-6 uploadForm_select" ng-model="vm.resourceInfo.SubCategoryId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="subcategory in  vm.subcategories" value="{{subcategory.id}}">{{subcategory.subCategoryName}}</option>
                                                                </select>
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <select id="fileType{{$index+1}}" class="uploadForm_td_select" ng-model="vm.resourceInfo.FileTypeId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="filetype in  vm.filetypes" value="{{filetype.id}}">{{filetype.fileTypeName}}</option>
                                                                </select>
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <select id="season{{$index+1}}" class="uploadForm_td_select" ng-model="vm.resourceInfo.SeasonId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="season in  vm.seasons" value="{{season.id}}">{{season.seasonName}}</option>
                                                                </select>
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <input type="text" id="keyword{{$index+1}}" class="uploadForm" ng-model="vm.resourceInfo.Keywords" placeholder="Keywords" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <select id="numberOfPeople{{$index+1}}" class="uploadForm_td_select" ng-model="vm.resourceInfo.NumberOfPeopleId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="numberOfPeople in  vm.numberOfPeoples" value="{{numberOfPeople.id}}">{{numberOfPeople.numberOfPeopleName}}</option>
                                                                </select>
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <select id="scenario{{$index+1}}" class="uploadForm_td_select" ng-model="vm.resourceInfo.ScenarioId">
                                                                    <option ng-selected="true">Select</option>
                                                                    <option ng-repeat="scenario in  vm.scenarios" value="{{scenario.id}}">{{scenario.scenarioName}}</option>
                                                                </select>
                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td class="uploadform_td">
                                                                <input id="email{{$index+1}}" type="text" class="uploadForm" placeholder="Your Email" ng-model="vm.resourceInfo.Email" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td">
                                                                <input type="text" class="uploadForm" placeholder="User Defined" />
                                                            </td>
                                                            <td class="uploadform_td"><input type="text" class="uploadForm" placeholder="User Defined" /></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

i just want to save the all data present in ng-repeat=files in files

getting following issue:

  1. when i fill up fileName of the first image data seconf image file name automatics fills out
  2. when i click on save button two images stores in the folder but in database only one entry present.

following is the Controller to save image:

[HttpPost]
        public JsonResult SaveFiles()
        {
            var filePath="";
            try
            {
                if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
                {
                    for(int i=0;i<System.Web.HttpContext.Current.Request.Files.AllKeys.Length;i++)
                    { 
                    var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"+i];
                    HttpPostedFileBase filebase = new HttpPostedFileWrapper(pic);
                    var fileName = Path.GetFileName(filebase.FileName);
                    filePath = "../App/Main/resources/" + fileName;
                     var path = Path.Combine(Server.MapPath("../App/Main/resources/"), fileName);
                    filebase.SaveAs(path);
                    }
                    return Json(filePath,JsonRequestBehavior.AllowGet);
                }
                else { return Json("No File Saved."); }
            }
            catch (Exception ex) { return Json("Error While Saving."); }
        }

following are the service.cs code:

public void CreateResource(CreateResourceInput input, string url)
        {
            var userData = _userRepository.GetAll().Where(x => x.Email == input.Email).FirstOrDefault();

            var resourceInfo = new Resource
            {
                FileName=input.FileName,
                Description=input.Description,
                Keywords=input.Keywords,
                SubCategoryId=input.SubCategoryId,
                CategoryId=input.CategoryId,
                FileTypeId=input.FileTypeId,
                SeasonId=input.SeasonId,
                NumberOfPeopleId=input.NumberOfPeopleId,
                ScenarioId=input.ScenarioId,
                Email=input.Email,
                FileUrl=url,
                UserId=userData.Id

            };
            _resourceRepository.Insert(resourceInfo);

        }

please anyone help me out

thanks in advance


1 Answer(s)
  • User Avatar
    0
    abu created

    some changes in the script:

    (function () {
        var controllerId = 'resourceUploadController';
        angular.module('app').controller(controllerId, [
            '$scope', '$location', 'abp.services.vault.resource', 'abp.services.vault.subCategory', 'abp.services.vault.category', 'abp.services.vault.fileType',
            'abp.services.vault.season', 'abp.services.vault.numberOfPeople','abp.services.vault.scenario','$http',
            function ($scope, $location, resourceService, subCategoryService, categoryService, fileTypeService, seasonService, numberOfPeopleService, scenarioService, $http) {
                var vm = this;
                var localize = abp.localization.getSource('Vault');
                vm.resourceInfo = {};
                $scope.subCategory = function () {
                    subCategoryService.getSubCategories().success(function (data) {
                       
                        vm.subcategories = data.subCategories;
                    });
                }
                $scope.subCategory();
    
                $scope.category = function () {
                    categoryService.getCategories().success(function (data) {
                      
                        vm.categories = data.categories;
                    });
                }
                $scope.category();
    
                $scope.fileType = function () {
                    fileTypeService.getFileTypes().success(function (data) {
                 
                        vm.filetypes = data.fileTypes;
                    });
                }
                $scope.fileType();
    
                $scope.season = function () {
                    seasonService.getSeasons().success(function (data) {
                    
                        vm.seasons = data.seasons;
                    });
                }
                $scope.season();
    
                $scope.numberofPeople = function () {
                    numberOfPeopleService.getNumberOfPeoples().success(function (data) {
                       
                        vm.numberOfPeoples = data.numberOfPeoples;
                    });
                }
                $scope.numberofPeople();
    
                $scope.scenario = function () {
                    scenarioService.getScenarios().success(function (data) {
                  
                        vm.scenarios = data.scenarios;
                    });
                }
                $scope.scenario();
    
                vm.saveResource = function (element) {
                    $scope.fileList = [];
                    // get the files
                    var files = element.files;
                    var data = new FormData();
                    debugger;
                    for (var i = 0; i < files.length; i++) {
    
                        data.append("HelpSectionImages" + i, files[i]);
                    }
                    $.ajax({
                        url: '../ResourceUpload/SaveFiles', type: "POST", processData: false,
                        data: data, dataType: 'json',
                        contentType: false,
                        success: function (data) {
                            debugger;
                            var url = data;
                                resourceService.createResource(vm.resourceInfo, url).success(function () {
                                    abp.notify.info("Image Saved");
                                    $location.path('/admin');
                                });
                     
                            
                        },
                        error: function (er) {
                            
                        }
    
                    });
                   
                };
               
                //============== DRAG & DROP =============
    
               var dropbox = document.getElementById("dropbox")
                $scope.dropText = 'Drop files here...'
    
                function dragEnterLeave(evt) {
                    evt.stopPropagation()
                    evt.preventDefault()
                    $scope.$apply(function () {
                        $scope.dropText = 'Drop files here...'
                        $scope.dropClass = ''
                    })
                }
                dropbox.addEventListener("dragenter", dragEnterLeave, false)
                dropbox.addEventListener("dragleave", dragEnterLeave, false)
                dropbox.addEventListener("dragover", function (evt) {
                    evt.stopPropagation()
                    evt.preventDefault()
                    var clazz = 'not-available'
                   
                }, false)
                dropbox.addEventListener("drop", function (evt) {
               
                    evt.stopPropagation()
                    evt.preventDefault()
                    $scope.$apply(function () {
                        $scope.dropText = 'Drop files here...'
                        $scope.dropClass = ''
                    })
                    var files = evt.dataTransfer.files
               
                    if (files.length > 0) {
        
                     
                        $scope.$apply(function () {
                            $scope.files = []
                            $scope.stepsModel = [];
                            for (var i = 0; i < files.length; i++) {
                           
                                $scope.files.push(files[i])
                                var file = files[i];
                                var reader = new FileReader();
                                reader.onload = $scope.imageIsLoaded;
                                reader.readAsDataURL(file);
                            }
    
                        })
                    }
                   
                }, false)
    
                $scope.imageIsLoaded = function (e) {
                    $scope.$apply(function () {
                        $scope.stepsModel.push(e.target.result);
                    });
                }
                //============== END DRAG & DROP =============
            }]);
    
     
    })();
    

    some changes in the view:

    <li class='last'><a href='' ng-click="vm.saveResource(this)"><span>Save</span></a></li>
    

    please help me :