Check image dimensions

[Baal]

Hi.

I have a RadUpload control in my page. I have set the AllowedMimeTypes to images only.

<telerik:RadUpload ID="ruImage" runat="server" InitialFileInputsCount="1" ControlObjectsVisibility="None" AllowedMimeTypes="image/bmp,image/gif,image/jpeg,image/pjpeg,image/tiff,image/x-png" />

I want to make sures the image being uploaded is of a specific dimension, let's say 300x100 pixels. I can check this on server side before uploading the file. But is there any way I can check it on client side after the user selects the file? If the image is not of the specified size then it should popus up an alert saying image is not of the appropriate dimension and the ruImage controls is blank again.

Thanks.

[Lubos Rousek]

Hi,

Check size picture can be perform in the following way

    

Protected Sub RadUpload1_ValidatingFile(ByVal sender As Object, ByVal e As Telerik.Web.UI.Upload.ValidateFileEventArgs) Handles RadUpload1.ValidatingFile

If Request.QueryString("tb") = "5" Or Request.QueryString("tb") = "6" Or Request.QueryString("tb") = "6" Then

Dim file As UploadedFile = e.UploadedFile

Dim FileLenght As Integer = file.ContentLength

Dim ContentType As String = file.ContentType

' File name

Dim soubor As String = Path.GetFileName(file.FileName)

'  Test for duplicity save picture

If objdata.sp_Dotaz2("re_TestNazevSouboruUpload", "Soubor", soubor, SqlDbType.NVarChar, "Funkce", Request.QueryString("tb"), SqlDbType.Int) > 0 Then

lblUploadError.Visible = True

lblUploadError.Text = "Obrázek je již v databázi uložen !"

e.IsValid = False

Else

' Testing picture dimension

'~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

' Variable for Upload file to database

Dim FileByte() As Byte

Dim FileName As String = file.FileName

' Test

FileByte = New Byte(FileLenght) {}

file.InputStream.Read(FileByte, 0, FileLenght - 1)

' Memory stream

Dim stream As MemoryStream = New MemoryStream()

' Write file to stream

stream.Write(FileByte, 0, FileLenght)

' Save stream to bitmap

Dim objBitmap As Bitmap = New Bitmap(stream)

' Declaration for picture dimension testing

Dim SizePicture As Size = objBitmap.Size

If (SizePicture.Width > 40 Or SizePicture.Width < 40) And Request.QueryString("tb") = "5" Then

lblUploadError.Visible = True

lblUploadError.Text = "Obrázek musí mít šířku 40 px !"

e.IsValid = False

ElseIf SizePicture.Width > 430 And Request.QueryString("tb") = "6" Then

lblUploadError.Visible = True

lblUploadError.Text = "Obrázek nesmí mít šířku > 430 px !"

e.IsValid = False

ElseIf (SizePicture.Width > 100 Or SizePicture.Width < 100) And Request.QueryString("tb") = "7" Then

lblUploadError.Visible = True

lblUploadError.Text = "Obrázek musí mít šířku 40 px !"

e.IsValid = False

Else

lblUploadError.Visible = False

e.IsValid = True

' Upload picture to database

Dim objCmd As New SqlCommand

objCmd.Connection = conn

objCmd.CommandType = CommandType.StoredProcedure

Dim objParam As New SqlParameter

Dim MyRadgrid As RadGrid = (TryCast(content.FindControl("PomTabGrid1").FindControl("RadGrid1"), RadGrid))

If Request.QueryString("tb") = "5" Then

objCmd.CommandText = "re_tblObrS_Insert"

ElseIf Request.QueryString("tb") = "6" Then

objCmd.CommandText = "re_tblObrB_Insert"

ElseIf Request.QueryString("tb") = "7" Then

objCmd.CommandText = "re_tblObrM_Insert"

End If

' Parameters setting for stored procedure

objParam = objCmd.Parameters.AddWithValue("Soubor", SqlDbType.NVarChar)

objParam.Value = Path.GetFileName(file.FileName)

objParam = objCmd.Parameters.AddWithValue("FileSize", SqlDbType.Int)

objParam.Value = file.ContentLength

objParam = objCmd.Parameters.AddWithValue("ContentType", SqlDbType.NVarChar)

objParam.Value = file.ContentType

objParam = objCmd.Parameters.AddWithValue("FileData", SqlDbType.Image)

objParam.Value = FileByte

objParam = objCmd.Parameters.AddWithValue("Provedl", SqlDbType.NVarChar)

objParam.Value = Session("PrihlasovaciJmeno")

Try

objCmd.Connection.Open()

objCmd.ExecuteNonQuery()

objCmd.Connection.Close()

' Close Upload from

tblUploadFile.Visible = False

' Cange RadGrid sorting

Dim Sort As New GridSortExpression

Sort.FieldName = "ID"

Sort.SortOrder = GridSortOrder.Descending

MyRadgrid.MasterTableView.SortExpressions.Add(Sort)

' Refresh RadGrid

MyRadgrid.EditIndexes.Clear()

MyRadgrid.Rebind()

MyRadgrid.MasterTableView.Rebind()

' Msg O.K.

Dim lblError As Label = New Label()

lblError.Text = "Obrazek byl přidan do databáze"

lblError.ForeColor = System.Drawing.Color.Green

MyRadgrid.Controls.Add(lblError)

Catch ex As Exception                          ' Msg ERROR

objCmd.Connection.Close()

Dim lblError As Label = New Label()

lblError.Text = "Položka nebyla aktualizována. Příčina: " + ex.Message

lblError.ForeColor = System.Drawing.Color.Red

MyRadgrid.Controls.Add(lblError)

End Try

End If

' Cancel testing object

objBitmap.Dispose()

' Close testing stream

stream.Close()

End If

e.SkipInternalValidation = Not e.IsValid

End If

End Sub ' RadUpload1_ValidatingFile

 

 

 

Best regards 
Lubos 

[Baal]

Here's what I ended up doing:

I wrote a method that popus up RadAlert:

    public void ShowError(string error)
    {
        string js = "Sys.Application.add_init(CRInit);";
        js += " function CRInit(){ Sys.Application.add_load(SRRunOnce);}";
        js += " function SRRunOnce(){ showAlert(); Sys.Application.remove_load(SRRunOnce);}";
        js += " function showAlert(){";
        js += " var oWnd = radalert('" + error + "', 450, 100, 'Error');";
        js += "}";

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Error", js, true);
    }

And on btnSave_Click, I did the image dimensions check first and threw this error if image is not of the appropriate dimension.

                if (ruImage.UploadedFiles.Count > 0)
                {
                    foreach (UploadedFile theFile in ruImage.UploadedFiles)
                    {
                        System.Drawing.Image myImage = System.Drawing.Image.FromStream(theFile.InputStream);

                        if (myImage.Width > 300 || myImage.Height > 100)
                        {
                            ShowError("Image bigger than 300px by 100px");
                            return;
                        }
                    }
                }

[Lubos Rousek]

Hi,
Your solution is much better than my. Thank for inspiration.
Best regards
Lubos