ASP.Net Vb.Net - Upload images to server using Server.MapPath, Random folder creation, and display or preview uploaded images in GridView or Repeater


To uplaod images in vb.net / asp.net using a gridview and display the images after the user uploads the pictures. Can do multiple picture uploads. Here I use the repeater instead of the Gridview in order to have the images float horizontally instead of in a column. This makes it like thumbnails for the pics and also it allows my form submit/cancel buttons to not be pushed down the page out of sight.
 
HTML MARKUP 
 

 <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" css />
            
          <%--with a gridview , I'm not using
              
              <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false" OnLoad="Page_Load" Visible="false">
                <Columns>
                    <asp:BoundField DataField="Text" visible="false" />
                    <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="150" ControlStyle-Width="150" ControlStyle-BorderStyle="Inset" ControlStyle-BorderWidth="5" ControlStyle-BorderColor="#003366" />
                </Columns>
            </asp:GridView>
              --%>
            <br clear="all" />
          <asp:Repeater ID="Repeater1" runat="server">
              <ItemTemplate>
                    <div style="padding:20px;float:left;">
                        <asp:Image ImageUrl='<%# Eval("srcLink")%>' ID="Image1" runat="server" width="100" height="100" style="float:left;" />
                        <br />
                        <asp:Button ID="btnRemove" runat="server" Text="Remove" OnClick="ButtonRemove_Click" CommandArgument='<%# Eval("srcLink")%>' />
                    </div>
              </ItemTemplate>
            </asp:Repeater>

 

 
IMPORTED CLASSES in code behind:
Imports System.IO
Imports System.Collections.Generic
 
The Upload Method in code behind that sets the filepath with the filename
 
Protected Sub Upload(sender As Object, e As EventArgs) Handles btnUpload.Click
        'set the paths
        Dim UpPath As String
        Dim UpName As String
        'use date for the folder
        Dim today As String = Date.Today
        'disregard the fileName and just get the extension of the filename uploaded to know what type of file has been uploaded
        Dim filePath As String
        Dim fileExtension As String
        'our Session directory has been set on page_load, using it here to build the path
        UpPath = Server.MapPath("~") & "\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\" & Session("cDir")
        'use vbDirectory for Directory access to UpPath, if it is empty, create us a directory to upload to
        UpName = Dir(UpPath, vbDirectory)
        If UpName = "" Then
            MkDir(Server.MapPath("~") & "\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\" & Session("cDir"))
        End If
        'get files from FileUpload html input
        If FileUpload1.HasFile Then
            fileExtension = System.IO.Path.GetExtension(FileUpload1.PostedFile.FileName)
            'make the filename random using rand() function, use ceiling to make it an integer
            filePath = Server.MapPath("~") & "\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\" & Session("cDir") & "\_" & CInt(Math.Ceiling(Rnd() * 12000)) & fileExtension
            FileUpload1.PostedFile.SaveAs(filePath)
            'call the page_load so the image can be added to the list that is bound to the gridview on postback
            Me.Page_Load(sender, e)
        End If
    End Sub
 
The page_load event that binds the images to the gridview control or repeater control once the user uploads the files. This is done on Postback and the folder directory is built using a session variable that only gets removed once the form is submitted, otherwise the user will see the same images they have uploaded within the timeframe of a day until they submit the form since the directory we are checking for is date driven:
 
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
....
  'For binding images
        'vars for a filepath
        Dim today As String = Date.Today
        Dim baseVirtualPath As String = "~\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\"
        Dim uploadDir As String = ""
        Dim baseCheckURL As String = "~\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-")
        Dim activeDir As String = ""
        'set a session var to create a new folder for each session upload on a certain day. if the SessionDir is already set then the activeDir
        'will be set to the existing Session cDir and we don't need to loop through the folders to get a new directory
        If Session("cDir") Is Nothing Then
            Session("cDir") = 1
            activeDir = Session("cDir")
            baseCheckURL = "~\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\" & activeDir
            Do While Directory.Exists(Server.MapPath(baseCheckURL))
                'since the directory already existed
                Session("cDir") = Session("cDir") + 1
                activeDir = Session("cDir")
                baseCheckURL = baseVirtualPath & activeDir
            Loop
        Else
            activeDir = Session("cDir")
            baseCheckURL = "~\UserUploads\" & globals.User("UserLogin") & "\disputes\" & today.Replace("/", "-") & "\" & activeDir
        End If
        uploadDir = baseCheckURL

        'only load when isPostback, we could check to see if fileupload1.hasFile but we also want to bind the repeater when a pic is removed and fileupload1 does not
        'contain a file
        If IsPostBack Then
            'check to see if the directory exists first or else don't bind the data to the gridview
            'the Exists Method must have the absolute url so must use Server.MapPath
            If Directory.Exists(Server.MapPath(uploadDir)) Then
                Dim dt As New DataTable
                dt.Columns.Add("srcLink")
                'must use virtual path here for MapPath which builds the absolute url including the filename
                Dim filePaths As String() = Directory.GetFiles(Server.MapPath(uploadDir))
                'for gridview
                'Dim files As New List(Of ListItem)()
                'loop through the files and get their names
                For Each filePath As String In filePaths
                    Dim fileName As String = Path.GetFileName(filePath)
                    'don't add the automatically created file thumbs.db
                    If Not fileName = "Thumbs.db" Then
                        Dim srcLink As String = uploadDir & "\" & fileName
                        dt.Rows.Add(srcLink)
                        'for Gridview
                        'files.Add(New ListItem(fileName, uploadDir & "/" & fileName))
                    End If
                Next
                'bind the List to the gridview control
                'GridView1.DataSource = files
                'GridView1.DataBind()

                Repeater1.DataSource = dt
                Repeater1.DataBind()
                'Debug.DebugValue(dt, "dt")
            End If
        End If
        'end for binding images
.....
End Sub
 
In order to add a button to remove the images, we have to send the url to the code-behind by using command-argument attribute on the remove button control. Here's the html, which is already contained in the html above but here to look at:
<asp:Button ID="btnRemove" runat="server" Text="Remove" OnClick="ButtonRemove_Click" CommandArgument='<%# Eval("srcLink")%>' /> 
the CommandArgument is the srcLink from a dataTable bound to the control.
So..
the
ButtonRemove_Click method (see also the enableEventValidation below):
Protected Sub ButtonRemove_Click(ByVal sender As Object, ByVal e As EventArgs)
        'Get the reference of the clicked button which sends the virtual path of the image 'to remove
        Dim button As Button = CType(sender, Button)
        Dim srcLink As String = button.CommandArgument
        File.Delete(Server.MapPath(srcLink))
        Me.Page_Load(sender, e)
    End Sub
The method above calls Me.Page_Load instead of using Response.Redirect(Request.Url.AbsoluteUri)

because if we redirect then we would lose all the info in the form and the user would have to re-enter the fields with every image they uploaded.

Since we are using another method besides the page_load to control the page events on postback, we need to turn event validation off. In short, This allows one ASP.NET control to use the event of another control, if it is set to true, then the ISS server will not allow the event to take place and throw an Argument/Event Validation error Exception

<%@ Page Language="VB" AutoEventWireup="true" EnableEventValidation="false"  CodeFile="CustomerComplaintForm.aspx.vb" Inherits="CustomerComplaintForm"
    CodeFileBaseClass="ExpandIT.Page" AspCompat="true" MasterPageFile="~/masters/default/main.master"
    RuntimeMasterPageFile="ThreeColumn.master" %>
The screenshot
 
 
 
 
 
 
Last update:
2014-08-14 23:27
Author:
Mark
Revision:
1.4
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.

Records in this category

Tags