ASP.NET - Viewing images stored on a users PC

I want to create a file upload web page which will allow photographs to be uploaded to the web server.  What I really want is for the user to specify a folder and for the web page to display thunbnails of each of the images in the folder with checkboxes so that the user can select which images to upload and then upload them.

My main question is how would I display a thumbnail image of a photo located on the users PC without first uploading it?  The images are likely to be very large as they will be high resolution photos.
ChrisMDrewAsked:
Who is Participating?
 
Kamal KhaleefaConnect With a Mentor Information Security SpecialistCommented:
try to upload files one by one and store them in a session
once you upload all the files upload the session to the server
here is an example

ASPx Code
-------------------------------
<tr>
                         
                         
                           
                            <td width="15%">
                                <asp:Label ID="Label1436" runat="server" CssClass="FieldName" Text="upload:"
                                    ToolTip="Select a file"></asp:Label>
                            </td>
                            <td width="25%">
                               
                                <asp:FileUpload ID="FileUpload2" runat="server"  CssClass="textbox_m"
                                    TabIndex="51" />
                         
                            </td>
                            <td align="justify">
                                &nbsp;&nbsp;
                                <asp:Button ID="btnUploadNew" runat="server"                                     CssClass="button" Text="upload" ToolTip="Upload File" TabIndex="52" />
                            </td>
                           </tr>
<tr>
                        <td style="width: 100%; vertical-align: middle" colspan="2" align="center">
                            <table width="100%" border="1" cellpadding="0" cellspacing="0">
                                <tr style="height: 10px">
                                    <td align="center" colspan="2">
                                        <asp:GridView ID="gvNewAttachement" runat="server" CssClass="datagrid_back" BorderWidth="1"
                                            BorderStyle="Dashed" Width="80%" AllowPaging="true" PageSize="20">
                                            <HeaderStyle CssClass="FormMenuBar" HorizontalAlign="center" />
                                            <RowStyle CssClass="GridRowStyle" />
                                            <AlternatingRowStyle CssClass="GridAlternatingRowStyle" />
                                            <Columns>
                                            </Columns>
                                        </asp:GridView>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>



code behind
--------------------
Private Sub btnUploadNew_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUploadNew.Click
       

        If Not Session("CurrentDataNew") Is Nothing Then

            Dim dt As DataTable = CType(Session("CurrentDataNew"), DataTable)
            Dim dtPreview As DataTable = CType(ViewState("CurrentDataPreviewNew"), DataTable)

            Dim count As Integer = dtPreview.Rows.Count
            BindGridNew(count)
        Else
            BindGridNew(1)
        End If
    End Sub

    Sub BindGridNew(ByVal rowcount As Integer)

        gvNewAttachement.Columns.Clear()

        Dim dt As DataTable = New DataTable
        Dim dtPreview As DataTable = New DataTable

        Dim dr As DataRow
        Dim drPreview As DataRow

        dt.Columns.Add(New System.Data.DataColumn("Extension", GetType(String)))
        dt.Columns.Add(New System.Data.DataColumn("FileName", GetType(String)))
        dt.Columns.Add(New System.Data.DataColumn("PostedFile", GetType(Object)))
        dt.Columns.Add(New System.Data.DataColumn("FileSize", GetType(Object)))

        dt.Columns.Add(New System.Data.DataColumn("Comments", GetType(Object)))

        dtPreview.Columns.Add(New System.Data.DataColumn("Extension", GetType(String)))
        dtPreview.Columns.Add(New System.Data.DataColumn("FileName", GetType(String)))
        dtPreview.Columns.Add(New System.Data.DataColumn("Comments", GetType(String)))
        If Not Session("CurrentDataNew") Is Nothing Then



            dt = CType(Session("CurrentDataNew"), DataTable)

            If Not ViewState("CurrentDataPreviewNew") Is Nothing Then
                dtPreview = CType(ViewState("CurrentDataPreviewNew"), DataTable)
            End If


            If (dt.Rows.Count > 0) Then

                dr = dt.NewRow()
                drPreview = dtPreview.NewRow()

                dr(0) = FileUpload2.PostedFile.ContentType
                'Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length)
                '

                drPreview(0) = FileUpload2.PostedFile.ContentType
                'Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length)
                '

                '    drPreview(0) = Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length) 'FileUpload1.PostedFile.ContentType


                'Dim x As Integer = FileUpload1.PostedFile.FileName.LastIndexOf(".")
                'Dim r As String = Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length)

                If Not FileUpload2 Is Nothing AndAlso FileUpload2.PostedFile.FileName <> "" Then

                    dr(1) = FileUpload2.PostedFile.FileName
                    drPreview(1) = FileUpload2.PostedFile.FileName
                    dr(2) = FileUpload2
                    dr(3) = FileUpload2.PostedFile.ContentLength
                End If
                drPreview(2) = txtAttachementComentNew.Text
                dr(4) = txtAttachementComentNew.Text

                dt.Rows.Add(dr)
                dtPreview.Rows.Add(drPreview)
            End If

            '



        Else
            ' drUpload = dtUpload.NewRow()
            dr = dt.NewRow
            drPreview = dtPreview.NewRow
            dr(0) = FileUpload2.PostedFile.ContentType
            'Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length) '
            drPreview(0) = FileUpload2.PostedFile.ContentType
            ' Mid(FileUpload1.PostedFile.FileName, FileUpload1.PostedFile.FileName.LastIndexOf(".") + 1, FileUpload1.PostedFile.FileName.Length)
            '


            If Not FileUpload2 Is Nothing AndAlso FileUpload2.PostedFile.FileName <> "" Then


                dr(1) = FileUpload2.PostedFile.FileName
                drPreview(1) = FileUpload2.PostedFile.FileName



                dr(2) = FileUpload2
                dr(3) = FileUpload2.PostedFile.ContentLength
            End If

            ' dr(2) = TextBox3.Text
            drPreview(2) = txtAttachementComentNew.Text
            dr(4) = txtAttachementComentNew.Text

            dt.Rows.Add(dr)
            dtPreview.Rows.Add(drPreview)

            '  dtUpload.Rows.Add(drUpload)
        End If


        ' If ViewState has a data then use the value as the DataSource
        If Not Session("CurrentDataNew") Is Nothing Then


            gvNewAttachement.DataSource = CType(ViewState("CurrentDataPreviewNew"), DataTable)


            Dim ss As DataControlField
            ss = New ButtonField()
            CType(ss, ButtonField).HeaderText = "select"
            CType(ss, ButtonField).Text = "delete"
            CType(ss, ButtonField).CommandName = "select"
            CType(ss, ButtonField).ItemStyle.ForeColor = Drawing.Color.Red

            gvNewAttachement.Columns.Add(ss)
            gvNewAttachement.DataBind()
            'GridView1.Columns(1).HeaderText = "filetype"
            'GridView1.Columns(2).HeaderText = "filename"

        Else

            gvNewAttachement.DataSource = dtPreview

            Dim ss As DataControlField
            ss = New ButtonField()
            CType(ss, ButtonField).HeaderText = "select"
            CType(ss, ButtonField).Text = "delete"
            CType(ss, ButtonField).CommandName = "select"
            CType(ss, ButtonField).ItemStyle.ForeColor = Drawing.Color.Red
            gvNewAttachement.Columns.Add(ss)
            gvNewAttachement.DataBind()
            'GridView1.Columns(1).HeaderText = "Filetype"
            'GridView1.Columns(2).HeaderText = "filename"

        End If

        Session("CurrentDataNew") = dt
        ViewState("CurrentDataPreviewNew") = dtPreview
        'GridView1.Columns(1).HeaderText = "Filetype"
        'GridView1.Columns(2).HeaderText = "filename"


    End Sub
0
 
ChrisMDrewAuthor Commented:
After more browsing it seems that I cannot get a list of images on the users selected folder - seems obvious really as it would be a security risk.  Is there a better way of being able to select multiple files to upload and then getting a thumbnail of each?
0
 
Jesse HouwingScrum Trainer | Microsoft MVP | ALM Ranger | ConsultantCommented:
You will need to use Silverlight, Flash or Java to get this done. Standard HTML controls doe not have access to the information you want.

These plugins can request additional rights to show data through user selected folders (file picker) or after a security prompt can get full access to a users machine. And they have specific built in support for these kinds of scenario's (plus these scenarios are well documented).

If you want to stick to HTML and Javascript, there are browser specific API's to gain access to the local file system. Firefox for example can request access to your local filesystem through the following call:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

But this only works if you have signed your javascript file:
http://www.mozilla.org/projects/security/components/signed-scripts.html

The CommonJS project is also working on Filesystem access libraries for Javascript. I'm not sure how far along they are:
http://wiki.commonjs.org/wiki/CommonJS

0
 
ChrisMDrewAuthor Commented:
Sorry took a while to get back to this as the project hasn't yet got the go-ahead
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.