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:
- when i fill up fileName of the first image data seconf image file name automatics fills out
- 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)
-
0
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 :