Dynamic Upload Documents option

Question

Hi I want to create Dynamic Upload Documents option. Thanks

Aman Gupta · Answer

Hi Ramco, To create a dynamic document upload option in a .NET application, you can use ASP.NET MVC or ASP.NET Core MVC. The idea is to allow users to upload multiple documents with the flexibility to add or remove file input controls dynamically. Steps to Implement a Dynamic Document Upload Option: 1. Create the Model: Define a model to hold the uploaded file data. public class DocumentUploadModel { public List Files { get; set; } = new List (); } 2. Create the View: Create a view that allows users to dynamically add or remove file input fields. @model DocumentUploadModel Add Another Document document.getElementById("addFileInput").addEventListener("click", function() { var fileInputs = document.getElementById("fileInputs"); var newInput = document.createElement("div"); newInput.className = "file-input"; newInput.innerHTML = ' '; fileInputs.appendChild(newInput); }); 3. Create the Controller: Implement the controller to handle the form submission and save the uploaded files. using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System.IO; using System.Threading.Tasks; public class DocumentsController : Controller { private readonly IWebHostEnvironment _environment; public DocumentsController(IWebHostEnvironment environment) { _environment = environment; } [HttpGet] public IActionResult Upload() { return View(new DocumentUploadModel()); } [HttpPost] public async Task UploadDocuments(DocumentUploadModel model) { if (model.Files != null && model.Files.Count > 0) { foreach (var file in model.Files) { if (file.Length > 0) { var filePath = Path.Combine(_environment.WebRootPath, "uploads", file.FileName); using (var stream = new FileStream(filePath, FileMode.Create)) { await file.CopyToAsync(stream); } } } return RedirectToAction("UploadSuccess"); } return View("Upload"); } public IActionResult UploadSuccess() { return View(); } } 4. Set Up the Environment: Ensure that the necessary directory (e.g., wwwroot/uploads) exists for saving uploaded files. Explanation : Dynamic File Inputs: The JavaScript function dynamically adds new file input elements to the form when the user clicks "Add Another Document." Form Submission: When the form is submitted, the files are uploaded to the server, where they are processed in the controller. Saving Files: The files are saved to a directory on the server. You can modify the file path and logic as needed to store the files in a database or another storage service. Advanced Features: Validation: Implement validation to check file types, sizes, etc. Database Integration: Save file metadata (e.g., names, upload dates) in a database. Progress Bar: Add a progress bar to give users feedback on the upload process. This setup gives you a flexible and dynamic document upload solution in .NET, suitable for various applications.

Deepak Rawat · Answer

Try this private setupUploaders() { const uploaderFields = this.getUploaderFields(); uploaderFields.forEach((uploaderField) => { // must be an array since form can have multiple uploaders this.uploader[uploaderField] = new FileUploader({url: ENDPOINT + '/upload/' + uploaderField, itemAlias: 'photo'}); this.uploader[uploaderField].onAfterAddingFile = (file) => { file.withCredentials = false; }; this.uploader[uploaderField].onCompleteItem = (item: any, response: any, status: any, headers: any) => { const data = JSON.parse(response); if (status === 200) { console.log(item); console.log(data.type); // this.baseForm.get('') } else { this.message = { type: 'danger', message: 'Uploaded failed :' + data.message, title: 'Error: ', status }; } }; }); } backend.. import {UploadController} from "../controllers/upload.controller"; export class UploadRoutes { public uploadController: UploadController = new UploadController() public routes(app): void { app.route('/upload/:type').post(this.uploadController.process) } } controller import { Request, Response } from 'express'; import {_} from 'lodash'; import * as Resize from '../libraries/Resize'; export class UploadController{ public process(req: Request, res: Response){ //req.params.type == type is pass as response back to angular Resize.resize(req, res,req.params.type); // inside the Resize class.. snippet below.. // response.type = type; // res.send(response) } }

Dynamic Upload Documents option

Answers (2)