<cite>hikalkan: </cite> Hi again,
No, it's not bad to mix custom MVC controllers with dynamic web api layer. They are different responsibilities. But, maybe we can make it easier with ABP. Currently, I use such a code:
Used angular module: <a class="postlink" href="https://github.com/nervgh/angular-file-upload">https://github.com/nervgh/angular-file-upload</a>
Example controller action:
public void ChangeProfilePicture() { if (Request.Files.Count <= 0 || Request.Files[0] == null) { throw new Exception("..."); } var file = Request.Files[0]; //change the picture.. }
Angular side controller:
(function () { appModule.controller('common.views.profile.changePicture', [ '$scope', 'appSession', '$modalInstance', 'FileUploader', function ($scope, appSession, $modalInstance, fileUploader) { var vm = this; vm.uploader = new fileUploader({ url: abp.appPath + 'Profile/ChangeProfilePicture', queueLimit: 1, filters: [{ name: 'imageFilter', fn: function (item, options) { //File type check var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|'; if ('|jpg|jpeg|'.indexOf(type) === -1) { abp.message.warn(app.localize('ProfilePicture_Warn_FileType')); return false; } //File size check if (item.size > 30720) //30KB { abp.message.warn(app.localize('ProfilePicture_Warn_SizeLimit')); return false; } return true; } }] }); vm.save = function () { vm.uploader.uploadAll(); }; vm.cancel = function () { $modalInstance.dismiss(); }; vm.uploader.onSuccessItem = function (fileItem, response, status, headers) { $modalInstance.close(); }; } ]); })();
Angular view related part
<input type="file" nv-file-select uploader="vm.uploader" />
I have tried using this same method to upload a video, but it doesn't get to the Controller.