Hello everyone!
I'm a new asp.net coder. When I develop my project, I have a trouble, that is how to validate Image size(width - height, not length) before uploading. My valid size is 640px - 640px.
I use Telerik RadAsyncUpload to do this function. I think Telerik is very good to use, it can check valid extension, file size(not include width - height). But It is not enough for me.
And the validation must be checked in client site, not in server. When each file choosed, it must be checked size first and there is an message said "you are choose invalid file". And RadAsyncUpload can upload multifile or one file. With one file I can valid size, but multifile I can NOT valid them.
I have Upload control and some divs to show error like that:
<div class="qsf-demo-canvas">
<div class="t-cs_productimg_multi_upload_box">
<div class="t-cs_productimg_multi_upload-left">
<telerik:RadAsyncUpload runat="server" ID="AsyncUpload" MaxFileInputsCount="10" MaxFileSize="5012000" OnClientFileUploaded="OnClientFileUploaded" OnClientFilesSelected="OnClientFilesSelected" OnClientFilesUploaded="OnClientFilesUploaded"
MultipleFileSelection="Disabled" Width="100%" TemporaryFileExpiration="10" TemporaryFolder="~/Temp_files" OnClientFileSelected="OnClientFileSelected" önClientFileUploading="OnClientFileUploading" AllowedFileExtensions="jpg,jpeg,png,bitmap,gif" OnClientValidationFailed="validationFailed" UploadedFilesRendering="BelowFileInput">
</telerik:RadAsyncUpload>
</div>
</div>
<div class="t-cs_productimg_multi_upload_box">
<asp:Panel ID="InvalidFiles" Visible="false" runat="server" CssClass="qsf-error">
<h3>The Upload failed for:</h3>
<ul class="qsf-list ruError" runat="server" id="InValidFilesList">
<li>
<p class="ruErrorMessage">This file is invalid size.</p>
</li>
</ul>
</asp:Panel>
</div>
</div>
And the javascript is
var fileName;
var countSelectedFiles;
var timestamp;
function RowDblClick(sender, eventArgs) {
sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
}
function validationFailed(radAsyncUpload, args) {
var $row = $(args.get_row());
var erorMessage = getErrorMessage(radAsyncUpload, args);
var span = createError(erorMessage);
$row.addClass("ruError");
$row.append(span);
}
function OnClientFilesSelected(sender, args) {
countSelectedFiles = args.get_count();
}
function OnClientFileSelected(sender, args) {
timestamp = Number(new Date());
fileName = timestamp + args.get_fileName();
}
function OnClientFileUploading(sender, args) {
}
function OnClientFileUploaded(sender, args) {
var imgUpload = new Image();
imgUpload.onload = function (a) {
var width = imgUpload.width;
var height = imgUpload.height;
var $row = $(args.get_row());
if (width == 640 && height == 640) {
var span = createSuccess("File is ready to upload");
$row.addClass("ruSuccess");
$row.append(span);
}
else {
var span = createError("Invalid file, file size must be 640px - 640px");
$row.addClass("ruError");
$row.append(span);
}
};
imgUpload.src = '/Temp_files/' + fileName;
}
function OnClientFilesUploaded(sender) {
}
function getErrorMessage(sender, args) {
var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);
if (args.get_fileName().lastIndexOf('.') != -1) {
if (sender.get_allowedFileExtensions().indexOf(fileExtention) == -1) {
return ("This file type is not supported.");
}
else {
return ("This file exceeds the maximum allowed size of 5 MB.");
}
}
else {
return ("not correct extension.");
}
}
function createError(erorMessage) {
var input = '<span class="ruErrorMessage">' + erorMessage + ' </span>';
return input;
}
function createSuccess(successMessage) {
var input = '<span class="ruSuccessMessage">' + successMessage + ' </span>';
return input;
}
I post the Stylesheet if you want to try it
.qsf-demo-canvas .ruInputs .ruRemove {
margin: 0 0 0 10px;
padding: 0 0 0 20px;
position: absolute;
left: 100%;
top: 0;
color: rgb(243, 71, 71);
font-size: 11px;
}
.RadUpload .ruInputs {
list-style: none;
margin: 0;
padding: 0;
}
.RadUpload .ruInputs li {
margin: 0 0 5px;
}
.qsf-demo-canvas .ruInputs li {
position: relative;
line-height: 1.1;
}
.qsf-demo-canvas .ruError {
padding: 5px 5px 5px 20px;
border: 1px solid #ef0000;
background: #f9e8e8;
}
.qsf-demo-canvas .ruError .ruFileWrap {
height: auto;
overflow: visible !important;
display: block;
color:#333;
font-weight:bold;
}
.qsf-demo-canvas .ruSuccess {
padding: 5px 5px 5px 20px;
border: 1px solid #009933;
background: #f1f1f1;
}
.qsf-demo-canvas .ruSuccess .ruFileWrap {
height: auto;
overflow: visible !important;
display: block;
color:#333;
font-weight:bold;
}
.qsf-error {
float: left;
width: 100%;
margin: 10px 0 0 0;
}
.qsf-demo-canvas {
width: 100%;
color: #555555;
background: #f6f6f6;
font-size: 13px;
position: relative;
}
.ruErrorMessage {
color:red;
font-weight:bold;
}
.ruSuccessMessage {
color:green;
}
Let me explain my algorithms.
- RadAsyncUpload has document here
http://www.telerik.com/help/aspnet-ajax/asyncupload-onclientselected.html[
^]
- I knew, To get image info I have to upload file to server, because the browser can not access to client file to get info on it, whenever file is uploaded to server, browser can get info from it. When upload file by RadAsyncUpload, it will locate the temp files to folder that specify by property 'TemporaryFolder' and I set it TemporaryFolder="~/Temp_files".
- Telerik support many client function. When you choose file, the function OnClientFileSelected runs, and you can get file name, now you have file name and Folder name so you can get Image info from Temp_file, but Telerik save temp files name like that: timespan + file name. How do I get timspan, I get it in function OnClientFileSelected, when is fired telerik get timespan at this moment you choose. I save timespan and file name to use later.
- After OnClientFileSelected is OnClientFileUploading, i do nothing
- After OnClientFileUploading is the function 'OnClientFileSelected', and i do everything here,
I create an Image variable, and I get fileName and create Image by use 'imgUpload.src = '/Temp_files/' + fileName'; so I can get image info then I valid my file, If valid I add a green border to image name, if invalid i add a red border to it.
And I want to ask
1. Onefile selected is ok, but multifile is not valid.
2. I have an Button, and I want to disable it if one of files is invalid, how can i do.
3. I know, someone can hack client side, so that I have to valid the server side.
RadSyncUpload has below function, and I can get info of each file valid or not valid.
I have an Save_Click(){} function. How can I save the valid file, and ignore the invalid file?
protected void AsyncUpload_FileUploaded(object sender, FileUploadedEventArgs e)
{
var liItem = new HtmlGenericControl("li");
liItem.InnerText = e.File.FileName;
e.File.GetFieldValue(e.File.FileName);
System.Drawing.Bitmap img = new System.Drawing.Bitmap(e.File.InputStream);
int h = img.Height;
int w = img.Width;
img.Dispose();
if (h != 640 && w != 640)
{
uploaded = false;
e.IsValid = false;
}
else
{
e.IsValid = true;
}
if (e.IsValid)
{
}
else
{
InvalidFiles.Visible = true;
InValidFilesList.Controls.AddAt(0, liItem);
}
}
Can you give me some advices, thanks a lot!
Submit an article or tip