Skip to content

Commit a21c7e1

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent a89cce0 commit a21c7e1

File tree

85 files changed

+74706
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+74706
-2
lines changed

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# Explore-form-support-in-the-Vue-File-Uploader-component
2-
A quick-start Vue project that shows how to use the Syncfusion Vue File Upload component in an HTML form to upload files to a server. This project contains code to add the uploader component and upload a file to the server along with form data.
1+
# Explore form support in the Vue File Uploader component
2+
3+
A quick-start Vue project that shows how to use the Syncfusion [Vue File Upload](https://www.syncfusion.com/vue-components/vue-file-upload?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-file-upload-form-support-sample) component in an HTML form to upload files to a server. This project contains code to add the uploader component and upload a file to the server along with form data. It also shows how to customize the drop area so that the end user can drop files on the specified drop area on the form.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the following documentation to learn about the Vue File Upload component: https://ej2.syncfusion.com/vue/documentation/uploader/form-support
8+
9+
Check out this online example of the Vue File Upload component: https://ej2.syncfusion.com/vue/demos/#/material3/uploader/file-upload-with-forms.html
10+
11+
Before working on this project, make sure you have the latest versions of Node.js, Visual Studio Code, and Visual Studio 2022 on your machine.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `Explore-Form-support-in-the-Vue-File-Uploader-component` repository and open the `myvueapp` client application in Visual Studio Code. Then, you can install all the necessary Vue packages in your project using the `npm install` command and run your project using the `npm run dev` command. To run the server-side ASP.NET Core application, open the application `FormSubmitServerSample` in Visual Studio 2022. Now, build and run the project to accept the data from the client application.

‎SyncfusionUploaderServerSample/Controllers/HomeController.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
3+
namespace SyncfusionUploaderServerSample.Controllers
4+
{
5+
public class HomeController : Controller
6+
{
7+
public IActionResult Index()
8+
{
9+
return View();
10+
}
11+
12+
[HttpPost]
13+
public IActionResult Submit(List<IFormFile> UploadFiles, string Name, string Email, string MobileNo, string FileNames, string Address)
14+
{
15+
//Save the details in database
16+
return Ok(new { Message = "Your details have been updated successfully, Thank you." });
17+
}
18+
}
19+
}

‎SyncfusionUploaderServerSample/Program.cs‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
using Microsoft.AspNetCore.Http.Features;
2+
3+
var builder = WebApplication.CreateBuilder(args);
4+
5+
// Add services to the container.
6+
builder.Services.AddControllersWithViews();
7+
builder.Services.AddControllersWithViews();
8+
builder.Services.Configure<IISServerOptions>(options =>
9+
{
10+
options.MaxRequestBodySize = long.MaxValue; // you can customize the maximum file size as per your need
11+
12+
});
13+
builder.Services.Configure<FormOptions>(x =>
14+
{
15+
x.ValueLengthLimit = int.MaxValue;
16+
x.MultipartBodyLengthLimit = long.MaxValue; // you can customize the maximum file size as per your need
17+
});
18+
builder.Services.AddCors();
19+
builder.Services.Configure<CookiePolicyOptions>(options =>
20+
{
21+
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
22+
options.CheckConsentNeeded = context => true;
23+
options.MinimumSameSitePolicy = SameSiteMode.None;
24+
});
25+
26+
27+
builder.Services.AddMvc();
28+
var app = builder.Build();
29+
30+
// Configure the HTTP request pipeline.
31+
if (!app.Environment.IsDevelopment())
32+
{
33+
app.UseExceptionHandler("/Home/Error");
34+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
35+
app.UseHsts();
36+
}
37+
38+
app.UseHttpsRedirection();
39+
app.UseStaticFiles();
40+
41+
app.UseRouting();
42+
app.UseAuthorization();
43+
app.UseCors(builder =>
44+
{
45+
builder.AllowAnyOrigin()
46+
.AllowAnyMethod()
47+
.AllowAnyHeader();
48+
});
49+
app.MapControllerRoute(
50+
name: "default",
51+
pattern: "{controller=Home}/{action=Index}/{id?}");
52+
53+
app.Run();

‎SyncfusionUploaderServerSample/Properties/launchSettings.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:55168",
7+
"sslPort": 44340
8+
}
9+
},
10+
"profiles": {
11+
"SyncfusionUploader": {
12+
"commandName": "Project",
13+
"dotnetRunMessages": true,
14+
"launchBrowser": true,
15+
"applicationUrl": "https://localhost:7060;http://localhost:5146",
16+
"environmentVariables": {
17+
"ASPNETCORE_ENVIRONMENT": "Development"
18+
}
19+
},
20+
"IIS Express": {
21+
"commandName": "IISExpress",
22+
"launchBrowser": true,
23+
"environmentVariables": {
24+
"ASPNETCORE_ENVIRONMENT": "Development"
25+
}
26+
}
27+
}
28+
}

‎SyncfusionUploaderServerSample/SyncfusionUploaderServerSample.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net6.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<UseRazorSourceGenerator>false</UseRazorSourceGenerator>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<Folder Include="Models\" />
12+
</ItemGroup>
13+
14+
</Project>

‎SyncfusionUploaderServerSample/SyncfusionUploaderServerSample.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.4.33110.190
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "SyncfusionUploaderServerSample", "SyncfusionUploaderServerSample.csproj", "{D52FFA5E-257F-4C2A-B72D-5379D39EE711}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{D52FFA5E-257F-4C2A-B72D-5379D39EE711}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{D52FFA5E-257F-4C2A-B72D-5379D39EE711}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{D52FFA5E-257F-4C2A-B72D-5379D39EE711}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{D52FFA5E-257F-4C2A-B72D-5379D39EE711}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {4D688D86-26BF-41DD-B784-8E751FFD44F5}
24+
EndGlobalSection
25+
EndGlobal

‎SyncfusionUploaderServerSample/Views/Home/Index.cshtml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@{
2+
ViewData["Title"] = "Home Page";
3+
<h2>Server started!</h2>
4+
}

‎SyncfusionUploaderServerSample/Views/Shared/_Layout.cshtml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@ViewData["Title"] - Syncfusion Uploader</title>
7+
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
8+
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
9+
</head>
10+
<body>
11+
<header>
12+
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
13+
<div class="container-fluid">
14+
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Syncfusion Uploader</a>
15+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
16+
aria-expanded="false" aria-label="Toggle navigation">
17+
<span class="navbar-toggler-icon"></span>
18+
</button>
19+
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
20+
<ul class="navbar-nav flex-grow-1">
21+
<li class="nav-item">
22+
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
26+
</li>
27+
</ul>
28+
</div>
29+
</div>
30+
</nav>
31+
</header>
32+
<div class="container">
33+
<main role="main" class="pb-3">
34+
@RenderBody()
35+
</main>
36+
</div>
37+
38+
<footer class="border-top footer text-muted">
39+
<div class="container">
40+
&copy; 2024 - Syncfusion Uploader - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
41+
</div>
42+
</footer>
43+
<script src="~/lib/jquery/dist/jquery.min.js"></script>
44+
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
45+
<script src="~/js/site.js" asp-append-version="true"></script>
46+
@await RenderSectionAsync("Scripts", required: false)
47+
<!-- Syncfusion ASP.NET Core Script Manager -->
48+
<ejs-scripts></ejs-scripts>
49+
</body>
50+
</html>

‎SyncfusionUploaderServerSample/Views/Shared/_Layout.cshtml.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
2+
for details on configuring this project to bundle and minify static web assets. */
3+
4+
a.navbar-brand {
5+
white-space: normal;
6+
text-align: center;
7+
word-break: break-all;
8+
}
9+
10+
a {
11+
color: #0077cc;
12+
}
13+
14+
.btn-primary {
15+
color: #fff;
16+
background-color: #1b6ec2;
17+
border-color: #1861ac;
18+
}
19+
20+
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
21+
color: #fff;
22+
background-color: #1b6ec2;
23+
border-color: #1861ac;
24+
}
25+
26+
.border-top {
27+
border-top: 1px solid #e5e5e5;
28+
}
29+
.border-bottom {
30+
border-bottom: 1px solid #e5e5e5;
31+
}
32+
33+
.box-shadow {
34+
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
35+
}
36+
37+
button.accept-policy {
38+
font-size: 1rem;
39+
line-height: inherit;
40+
}
41+
42+
.footer {
43+
position: absolute;
44+
bottom: 0;
45+
width: 100%;
46+
white-space: nowrap;
47+
line-height: 60px;
48+
}

‎SyncfusionUploaderServerSample/Views/Shared/_ValidationScriptsPartial.cshtml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
2+
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

0 commit comments

Comments
 (0)