CFF Coding Source - VB.NET - Upload Multiple Files with Thumbnail, Folders, and SQL Server Database

HTML

CSS

JavaScript

    $(function () {
        $("[id*=fuUpload]").change(function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = $("#dvPreview");
                dvPreview.html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

                $($(this)[0].files).each(function () {
                    var file = $(this);
                    // Here is where we check for the file size. This demo is set to 1mb.
                    // Change it to whatever size you need for your project.
                    // Change 1000 / 1000 -- to 5000 / 5000 = 5 in maxSize
                    const size = (file[0].size / 1000 / 1000).toFixed(2);
                    const theSize = size + (size > 1 ? "mb" : "kb");
                    var maxSize = 1 // Change this to the max allowed to upload. 1 = 1mb / 5 = 5mb / 10 = 10mb / 20 = 20mb

                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                         var strImage = e.target.result
                            if (size > maxSize) {
                                dvPreview.append("File size is larger than the allowed size. (Fize Size =" + theSize + ") <br />Please upload less than " + maxSize + "mb per image.<br />Upload button has been diabled. <br />Please change file size to meet the requirements, <br />Refresh and Re-Upload files.")
                                $("#btnUpload").prop('disabled', true);
                            } else {
                                dvPreview.append('<div class="row">' +
                                    '<div class="Sizes column">' + theSize + '</div>' +
                                    '<div class="ImageList column"><img src="' + strImage + '" style="height:100px;"></div>' +
                                    '<div class="theTitle column"><span class="Info">Title:</span><br /><input type="text" name="ImageTitle"/></div>' +
                                    '</div > ');
                            }
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        dvPreview.html(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });

SQL

-- Taken from https://www.cffcs.com/Code/1013
-- Create a new database called [Virtual-Class-01] in SQL Server.
-- Right-click and choose [New Query]
-- Copy and paste the code below and hit [Execute]

USE [Virtual-Class-01]
GO
/****** Object:  Table [dbo].[ImageUpload]    Script Date: 6/12/2022 2:55:37 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[ImageUpload](
    [PicsID] [int] IDENTITY(1,1) NOT NULL,
    [PicsFolder] [nvarchar](50) NULL,
    [Userid] [int] NULL,
    [DefaultFolder] [int] NULL,
    [PicsPath] [varchar](255) NULL,
    [PicsName] [nvarchar](50) NULL,
    [PicsSize] [int] NULL,
    [PicWH] [varchar](50) NULL,
    [PicDate] [datetime] NULL,
    [DateUpdated] [datetime] NULL,
 CONSTRAINT [PK_ImageUpload] PRIMARY KEY CLUSTERED 
(
    [PicsID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] 
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicsFolder]  DEFAULT ('Main') FOR [PicsFolder]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_DefaultFolder_1]  DEFAULT ((1)) FOR [DefaultFolder]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicsPath]  DEFAULT ('default.jpg') FOR [PicsPath]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicsName]  DEFAULT ('Enter a name for this image') FOR [PicsName]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicsSize]  DEFAULT ((0)) FOR [PicsSize]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicWH]  DEFAULT ('85x84') FOR [PicWH]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_PicDate]  DEFAULT (getdate()) FOR [PicDate]
GO
ALTER TABLE [dbo].[ImageUpload] ADD  CONSTRAINT [DF_ImageUpload_DateUpdated]  DEFAULT (((1)/(1))/(2017)) FOR [DateUpdated]
GO

ASP.NET

Imports System
Imports System.Web
Imports System.IO
Imports System.Drawing.Imaging
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Data
Imports System.Data.OleDb
Imports System.Data.SqlClient

Partial Class Load
    Inherits Page
    Public Class GlobalVariables
        Public Shared MovePath As String
        Public Shared theLocal As String = HttpContext.Current.Request.ServerVariables("SERVER_NAME")
    End Class

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim strid As String = Request.QueryString("ID")
        If strid <> "" Then
            IDLabel.Text = "Page set to Upload!"
            fuUpload.Enabled = True
            btnUpload.Enabled = True
        Else
            IDLabel.Text = "<a href='?ID=1'>Load ID into Query</a> to enable upload."
            fuUpload.Enabled = False
            btnUpload.Enabled = False
        End If
    End Sub

    Protected Sub Upload(sender As Object, e As EventArgs)
        Dim cn As New SqlConnection
        Dim objConnection As OleDbConnection = Nothing
        Dim objCmd As SqlCommand = Nothing
        Dim strSQL As [String]

        cn = New SqlConnection(ConfigurationManager.ConnectionStrings("Virtual-Learning").ConnectionString)
        cn.Open()


        GlobalVariables.MovePath = Context.Server.MapPath("ImageServer/")
            Dim strid As String = Request.QueryString("ID")
        Dim getun As String = "cffcoding" 'this will come from a cookie

        Try
            For i As Integer = 0 To Request.Files.Count - 1
                Dim postedFile As HttpPostedFile = Request.Files(i)
                If postedFile.ContentLength > 0 Then
                    '=-=-=-=-=-=-=-=-Code starts here-=-=-=-=-=-=-=-=
                    Dim bytes As Byte() = New Byte(postedFile.InputStream.Length - 1) {}
                    Dim getName As String() = Split(Request.Form("ImageTitle"), ",")
                    Dim ext As String = System.IO.Path.GetExtension(postedFile.FileName)
                    Dim Gallery As String = GlobalVariables.MovePath & getun & "/"
                    Dim thPath As String = ""
                    Dim thImageFolder As String = ""
                    Dim theImageFolder As String = ""
                    Dim savethPath As String = ""
                    Dim tempPath As String = ""
                    Dim savepath As String = ""
                    Dim now As DateTime = DateTime.Now
                    Dim getYear As String = (((((now.ToString("hh") & "") + now.ToString("mm") & "") + now.ToString("ss") & "") + now.ToString("mm") & "") + now.ToString("dd") & "") + now.ToString("yyyy") + now.ToString("fff") + ""

                    tempPath = Gallery & "\" & ConfigurationManager.AppSettings("BigFolderPath") ' Big Folder
                    thPath = Gallery & "\" & ConfigurationManager.AppSettings("thPath") ' Thumb Folder
                    thImageFolder = Gallery & "\" & ConfigurationManager.AppSettings("ImageFolderPath")
                    Dim changeSize As String = GlobalVariables.MovePath & getun & "\" & ConfigurationManager.AppSettings("thPath")

                    theImageFolder = (thImageFolder) ' ImageServer/ Folder
                    'savethPath = context.Server.MapPath(thPath) ' + getun
                    savethPath = Gallery + "\" + ConfigurationManager.AppSettings("thPath")
                    savepath = (tempPath)
                    Dim getFile As String = getYear + ext '+ clear 'And + clear
                    Dim subTpath As String = Path.Combine(theImageFolder, tempPath)
                    If Not Directory.Exists(subTpath) Then
                        Directory.CreateDirectory(subTpath)
                    End If

                    If Not Directory.Exists(savethPath) Then
                        Directory.CreateDirectory(savethPath)
                    End If

                    ' Get the Height and Width of the image and send it to the database.
                    Dim GetImageWH As Image
                    GetImageWH = Image.FromStream(postedFile.InputStream)
                    Dim PicW As String = GetImageWH.Height
                    Dim PicH As String = GetImageWH.Width
                    Dim PicWH As String = PicH + "x" + PicW

                    postedFile.SaveAs((savepath & "\") + getFile)

                    Dim ImageToSave As Image = resizeImage(Image.FromStream(postedFile.InputStream), New Size(130, 110))
                    ImageToSave.Save((Path.Combine(thPath, getFile.Insert(getFile.LastIndexOf("."c), ""))), ImageFormat.Jpeg)
                    Context.Response.StatusCode = 200

                    strSQL = "INSERT INTO ImageServer(PicsPath, PicsSize, PicWH, UserID, PicsName)VALUES(@PicsPath, @PicsSize, @PicWH, @UserID, @PicsName)"
                    objCmd = New SqlCommand(strSQL, cn)
                    objCmd.Parameters.Add(New SqlParameter("@PicsPath", getFile))
                    objCmd.Parameters.Add(New SqlParameter("@PicsSize", bytes.Length))
                    objCmd.Parameters.Add(New SqlParameter("@PicWH", PicWH))
                    objCmd.Parameters.Add(New SqlParameter("@Userid", strid))
                    objCmd.Parameters.Add(New SqlParameter("@PicsName", getName(i)))
                    objCmd.ExecuteNonQuery()
                    Response.Write(getFile & "(" & getName(i) & ") Uploaded Successfully!<br />")

                    '=-=-=-=-=-=-=-=-Code ends here=--=-=-=-=-=-=-=-=
                End If ' postedFile.ContentLength
            Next
        Catch ex As Exception
            Response.Write("Seems there was an issue, please try uploading your file again." + (ex.Message + TimeString) + "<br />")
            Response.Write(ex.StackTrace & "-" & TimeString)
        Finally
            cn.Close()
        End Try
    End Sub

    Private Shared Function resizeImage(ByVal imgToResize As Image, ByVal size As Size) As Image
        Dim sourceWidth As Integer = imgToResize.Width
        Dim sourceHeight As Integer = imgToResize.Height
        Dim nPercent As Single = 0
        Dim nPercentW As Single = 0
        Dim nPercentH As Single = 0

        nPercentW = (CSng(size.Width) / CSng(sourceWidth))
        nPercentH = (CSng(size.Height) / CSng(sourceHeight))

        If nPercentH < nPercentW Then
            nPercent = nPercentH
        Else
            nPercent = nPercentW
        End If

        Dim destWidth As Integer = CInt((sourceWidth * nPercent))
        Dim destHeight As Integer = CInt((sourceHeight * nPercent))

        Dim b As New Bitmap(destWidth, destHeight)
        Dim g As Graphics = Graphics.FromImage(DirectCast(b, Image))
        g.InterpolationMode = InterpolationMode.HighQualityBicubic

        g.DrawImage(imgToResize, 0, 0, destWidth, destHeight)
        g.Dispose()

        Return DirectCast(b, Image)
    End Function
End Class

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <connectionStrings configSource="database.config" />
  <appSettings>
    <add key="ImageFolderPath" value="ImageServer" />
    <add key="BigFolderPath" value="Big" />
    <add key="thPath" value="Thumbs" />
  </appSettings>
  <system.web>
    <compilation strict="false" explicit="true" targetFramework="4.7.2" />
    <httpRuntime targetFramework="4.7.2" maxRequestLength="1000" />
    <!--This is not per file, but all files combined that are uploaded.
        1000 KB = 1 mb / 5000 KB = 5 mb / 10000 KB = 10 mb / 20000 KB = 20 mb-->
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="1000000" />
        <!--This is not per file, but all files combined that are uploaded.
            1000000 Bytes = 1 mb / 5000000 Bytes = 5 mb / 10000000 Bytes = 10 mb / 20000000 Bytes = 20 mb-->
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

<?xml version="1.0"?>
<connectionStrings>
  <add name ="Virtual-Learning" connectionString="Data Source=sqlcorecs-01\sql2019;Database=Virtual-Class-01;User ID=testuser;Password=testuser;MultipleActiveResultSets=True"/>
</connectionStrings>

Resources

(Copy JS and CSS code below, and add it to your project. It is best to download and host from within your site. This will reduce bandwidth drain from your hosting server and the servers hosting the actual files.)

Preview

About Company

Top Viewed Articles