RSS

Dynamically Create Multiple File Upload Control with Vb.Net

15 Apr

MultipleFileUploadControl.aspx

1:Create Javascript Function for Generate Dynamic Control

<script type=”text/javascript”>

var rownum = 1;

function addRow() {

//Create div dynamically.

var dv = document.createElement(“div”);

//Assign different attributes to the element.

var divid = “div” + rownum;

dv.setAttribute(“ID”, divid);

rownum++;

// Create label dynamically

var label2 = document.createElement(“label”);

//Assign different attributes to the label.

label2.setAttribute(“ID”, “lbl” + rownum);

label2.setAttribute(“class”, ‘label1’);

label2.innerHTML = ‘Photo’;

rownum++;

//Create file upload dynamically(Thumbnail)

var element2 = document.createElement(“input”);

//Assign different attributes to the element.

element2.setAttribute(“type”, ‘file’);

element2.setAttribute(“name”, “fl” + rownum);

element2.setAttribute(“ID”, “flup” + rownum);

element2.setAttribute(“runat”, “Server”);

rownum++;

// Create remove link

var atag = document.createElement(“a”);

//Assign different attributes to the element.

atag.setAttribute(“ID”, “atg” + rownum);

atag.setAttribute(“style”, “cursor:pointer”);

atag.setAttribute(“onclick”, “return RemoveDiv(‘” + divid + “‘);”);

atag.innerHTML = ‘Remove’;

rownum++;

// create br

var br = document.createElement(“br”);

var upl1 = document.getElementById(“upl1”);

dv.appendChild(br);

//

dv.appendChild(label2);

dv.appendChild(element2);

dv.appendChild(atag);

upl1.appendChild(dv)

}

function RemoveDiv(obj) {

var parent = document.getElementById(‘upl1’);

var child = document.getElementById(obj);

parent.removeChild(child);

}    </script>

2: Write this code in aspx body tag

<div style=”padding-right:200px;”>

<asp:Label ID=”lblErrMSG” CssClass=”titlered” runat=”server” Visible=”false” Font-Bold=”true” />

</div>

<table cellpadding=”0″ cellspacing=”0″ width=”100%” border=”0″>

<tr runat=”Server”>

<td>

<label>

Photo:</label><asp:FileUpload ID=”uploadPhoto1″ runat=”server” CssClass=”” /><br />

<div id=”upl1″>

</div>

<label>

&nbsp;</label>

<asp:Button ID=”btnmore” Text=”More” runat=”server” />&nbsp;

<asp:Button ID=”btnAddPhoto” Text=”add photo” runat=”server” />&nbsp;

<asp:Button ID=”btnCancel” Text=”cancel” runat=”server” />

</td>

</tr>

</table>

CodeBehind  Code

MultipleFileUploadControl.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

btnmore.Attributes(“onclick”) = “addRow(); return false;”

End If

End Sub

Protected Sub btnAddPhoto_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAddPhoto.Click

SavePhotoContent()

End Sub

Private Sub SavePhotoContent()

Dim postFile As HttpPostedFile

Dim files As HttpFileCollection

Dim keys() As String

Dim totolupld As Integer = 0

Dim isupld As Boolean = False

lblErrMSG.Visible = True

lblErrMSG.Text = String.Empty

Dim  ImgPath As Byte()

Dim contentType As String = String.Empty

Dim imageName As String = String.Empty

Dim photoTitle As String = String.Empty

Try

Dim contentType As String = String.Empty

Dim imgContent As Byte() = Nothing

Dim ImageName As String = String.Empty

files = Request.Files

keys = files.AllKeys

For ndx As Integer = 0 To keys.Length – 1

postFile = Request.Files(keys(ndx))

If postFile.ContentLength > 1 Then

contentType = postFile.ContentType

If Uploads.ValidateImageContentType(contentType) Then

Dim objPhoto As New PhotosFO

imgContent = Uploads.GetFileContent(postFile.InputStream)

ImgPath  = imgContent

contentType  = contentType

ImageName = System.IO.Path.GetFileName(postFile.FileName)

imageName  = ImageName

photoTitle  = ImageName.Split(“.”)(0)

Insert Into db code here

isupld = True

totolupld += 1

Else

lblErrMSG.Visible = True

lblErrMSG.Text = “Select a valid image.”

lblErrMSG.ForeColor = Drawing.Color.Red

isupld = True

Exit Sub

End If

End If

Next

If isupld = True Then

Response.Redirect(“galleryPhotos.aspx)

End If

Catch ex As Exception

Throw ex

End Try

End Sub

CREATE THIS CLASS FOR TO CREATE A METHOD OR FUNCTION OR YOU CREATE THIS FUNCTION IN SAME ABOVE CLASS

Public Class Uploads

Public Shared Function ValidateImageContentType(ByVal contentType As String) As Boolean
If (contentType = “image/jpg” Or contentType = “image/jpeg” Or contentType = “image/png” Or contentType = “image/gif”) Then
Return True
Else
Return False
End If
End Function

Public Shared Function GetFileContent(ByVal inpstrm As System.IO.Stream) As Byte()
Dim fs As Stream = inpstrm
Dim br As New BinaryReader(fs)
Dim bytes As Byte() = br.ReadBytes(fs.Length)
Return bytes
End Function

End Class

Advertisements
 
Leave a comment

Posted by on April 15, 2011 in Vb.Net

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: