Giter VIP home page Giter VIP logo

angular-file-uploader-how-to-upload-images-using-asp.net-core-api-controller's Introduction

Angular File Uploader - How to upload images using ASP.NET Core API Controller

This example contains an Angular client-side application with DevExtreme File Uploader. The control uploads image files to the ASP.NET Core API Controller and returns the uploaded images as the base64 strings to the client.

Files to look at:

Implementation:

  1. Configure your Angular application as described in the Add DevExtreme to an Angular CLI Application article. Register the DevExtreme FileUploader module in the app.module.ts file.
  2. Add the FileUploader component to one of your Angular components files. Specify its name option and set the uploadUrl option so that it points to your ASP.NET Core API Controller.
<dx-file-uploader name='myFile' uploadUrl="/FileUpload" [multiple]="true"
  accept="*"  uploadMode="instantly">
</dx-file-uploader>
  1. Create an API Controller in your ASP.NET Core application and a method to save an uploaded file. Note that the method's parameter name should be equal to your FileUploader's name.
 public async Task<IActionResult> AsyncUpload(IFormFile myFile) {
            string targetLocation = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
            try {
                if (!Directory.Exists(targetLocation))
                    Directory.CreateDirectory(targetLocation);
                using (var fileStream = System.IO.File.Create(Path.Combine(targetLocation, myFile.FileName))) {
                    myFile.CopyTo(fileStream);
                }
            } catch {
                Response.StatusCode = 400;
            }
            ...
 }
  1. (Optional) If you need to display an uploaded image file as a base64 string, convert it to a byte array in your Controller.Then get the base64 string from this array with Convert.ToBase64String and return the result from your method.
  2. (Optional) To display the image after uploading, handle the onUploaded event (see Angular - Component Configuration Syntax - Event Handling) and append the "IMG" tag in this event handler.
export class HomeComponent {
    onUploaded(e) {
        var image = document.createElement("IMG");
        image.setAttribute("src", "data:image/jpg;base64," + e.request.responseText);
        var container = document.getElementById("imagesContainer");
        container.appendChild(image);
    }
}

angular-file-uploader-how-to-upload-images-using-asp.net-core-api-controller's People

Contributors

dependabot[bot] avatar dxstanley avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.