ASP Upload File AJAX using Kendo

File Upload menggunakan setting di Web.config dan MyGlobalMessage.resx.

HTML code:

[code language=”html”]
<input name="files" id="kendo-upload" type="file" />
@Html.HiddenFor(model => model.FilePath)

<img id="uploaded-image" src="@(Model.Photo != null ? Url.Content(Model.Photo) : "")" class="img-responsive" alt="" />
[/code]

Tambahan di view cshtml

[code language=”csharp”]

@{
//…

string fileTypeErrMsg = HttpContext.GetGlobalResourceObject("MyGlobalMessage", "FileUploadImageTypeError").ToString();

string template = HttpContext.GetGlobalResourceObject("MyGlobalMessage", "FileUploadSizeError").ToString();
string fileSizeErrMsg = string.Format(template, System.Configuration.ConfigurationManager.AppSettings["maxImageWord"]);
}

[/code]

Javascript code:

[code language=”javascript”]

var fileInputSelector = ‘#FilePath’;
var fileNameSelector = ‘#uploaded-filename’;
var imageContainerSelector = ‘#uploaded-image’;

//functions
function onRemove(e) {
$(fileInputSelector).val("");
}

function onSelectFile(e) {
var flagExtension = 0;
var flagSize = 0;
var allowedExtension = [‘.pdf’, ‘.doc’, ‘.docx’, ‘.xls’, ‘.xlsx’];
var file = e.files;
var maxImage = ‘@System.Configuration.ConfigurationManager.AppSettings["maxImage"]’;

if (file[0].size > maxImage) {
flagSize = 1;
}

if ($.inArray((file[0].extension).toLowerCase(), allowedExtension) === -1) {
flagExtension = 1;
}

if (flagExtension == 1) {
alert("@fileTypeErrMsg");
e.preventDefault();
}
if (flagSize == 1) {
alert("@fileSizeErrMsg");
e.preventDefault();
}
}

function onSuccessFile(e) {
if (e.operation == "upload") {
var file = e.response;
$(fileInputSelector).val(file.filepath);
$(fileNameSelector).html(file.filepath);
$(imageContainerSelector).attr(‘src’, file.absolutepath);
$(imageContainerSelector).show();

}
}

$(document).ready(function () {
if ($(imageContainerSelector).attr(‘src’) === ”) {
$(imageContainerSelector).hide();
}

var initPrincipleFile = [];

@if(Model.PrincipleLicenseFile != null)
{
<text>
initPrincipleFile.push({ name: ‘@dfh.GetFileNameFromUniqueFileName(Model.PrincipleLicenseFile)’, size: ”, extension: ” });
</text>
}

$("#kendo-upload").kendoUpload({
multiple: false,
async: {
saveUrl: ‘@Url.Action("Save", "FileManagement", new { area = "" })’,
removeUrl: ‘@Url.Action("Remove", "FileManagement", new { area = "" })’,
autoUpload: true
},
files: initialFilesContent,
select: onSelectFile,
success: onSuccessFile,
remove: onRemove,
showFileList: true,
});
});
[/code]