CFF Coding Source - C# - 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

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Security;
using System.Text;
using System.Threading.Tasks;
using Microsoft.VisualBasic;
using System.Web;
using System.Drawing.Imaging;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Data;
using System.Data.OleDb;
using System.Data.SqlClient;
using System.Configuration;

public partial class Load : System.Web.UI.Page
{

    public class GlobalVariables
    {
        public static string MovePath;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string strid = Request.QueryString["ID"];

            if (strid != null && strid != string.Empty)
            {
                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;
            }
        }
    }

    protected void Upload(object sender, EventArgs e)
    {
        {
            var cn = new SqlConnection();


            cn = new SqlConnection(ConfigurationManager.ConnectionStrings["Virtual-Learning"].ConnectionString);
            cn.Open();
            GlobalVariables.MovePath = Context.Server.MapPath("ImageServer/");
            string strid = Request.QueryString["ID"];
            string getun = "cffcoding"; // this will come from a cookie

            try
            {
              
                for (int i = 0, loopTo = Request.Files.Count - 1; i <= loopTo; i++)
                    {
                      HttpPostedFile postedFile = Request.Files[i];
                      if (postedFile.ContentLength > 0)
                        {
                            // =-=-=-=-=-=-=-=-Code starts here-=-=-=-=-=-=-=-=
                            var bytes = new byte[postedFile.InputStream.Length];

                                string GetNames = Request.Form["ImageTitle"];
                                string[] GetName = GetNames.Split(',');
                                string ext = Path.GetExtension(postedFile.FileName);
                                string Gallery = GlobalVariables.MovePath + getun + "/";
                                string thPath = "";
                                string thImageFolder = "";
                                string theImageFolder = "";
                                string savethPath = "";
                                string tempPath = "";
                                string savepath = "";
                                var now = DateTime.Now;
                                string getYear = 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"];
                                string changeSize = GlobalVariables.MovePath + getun + @"\" + ConfigurationManager.AppSettings["thPath"];

                                theImageFolder = thImageFolder; // ImageServer/ Folder
                                                                // savethPath = context.Server.MapPath(thPath) ' + getun
                                savethPath = Gallery + @"\" + ConfigurationManager.AppSettings["thPath"]; // "ImageServer\carrzkiss\Thumbs\"
                                savepath = tempPath;
                                string getFile = getYear + ext; // + clear 'And + clear

                                if (!Directory.Exists(theImageFolder))
                                {
                                    Directory.CreateDirectory(theImageFolder);
                                }


                                if (!Directory.Exists(savethPath))
                                {
                                     Directory.CreateDirectory(savethPath);
                                }
                        

                                // Get the Height and Width of the image and send it to the database.
                                Image GetImageWH;
                                GetImageWH = Image.FromStream(postedFile.InputStream);
                                int PicW = GetImageWH.Height;
                                int PicH = GetImageWH.Width;
                                string PicWH = PicH + "x" + PicW;

                                postedFile.SaveAs(savepath + @"\" + getFile);

                                Image ImageToSave = resizeImage(Image.FromStream(postedFile.InputStream), new Size(130, 110));
                                ImageToSave.Save((Path.Combine(thPath, getFile.Insert(getFile.LastIndexOf('.'), ""))), ImageFormat.Jpeg);
                                Context.Response.StatusCode = 200;
                                SqlCommand objCmd = new SqlCommand();
                                string strSQL;
                                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=--=-=-=-=-=-=-=-=
                           
                        } // postedFile.ContentLength
                    }
            }
            catch
            {
                Response.Write("Seems there was an issue, please try uploading your file again.");
            }
            finally
            {
                cn.Close();
            }
        }

    }
    private static Image resizeImage(Image imgToResize, Size size)
    {
        int sourceWidth = imgToResize.Width;
        int sourceHeight = imgToResize.Height;
        float nPercent = 0f;
        float nPercentW = 0f;
        float nPercentH = 0f;

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

        if (nPercentH < nPercentW)
        {
            nPercent = nPercentH;
        }
        else
        {
            nPercent = nPercentW;
        }

        int destWidth = (int)Math.Round(sourceWidth * nPercent);
        int destHeight = (int)Math.Round(sourceHeight * nPercent);

        var b = new Bitmap(destWidth, destHeight);
        Graphics g = Graphics.FromImage((Image)b);
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;

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

        return (Image)b;
    }

}

<?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