Async in EJ2 TypeScript File Upload

08 Sep 202624 minutes to read

The Uploader component allows you to upload files asynchronously. The upload process requires save and remove action URLs to manage the upload process on the server.

  • The save action is necessary to handle the upload operation.
  • The remove action is optional and handles removing files from the server.

The name attribute must match the name of a parameter in the POST method. For more information, refer here. The name attribute is automatically generated from the control’s ID property. If the name attribute needs to be different from the ID property, you can use the htmlAttributes property to set the name attribute directly on the input element. For more information, refer here.

Files can be uploaded automatically or manually. For more information, refer to the Auto Upload section of the documentation.

Multiple file upload

By default, the Uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear them by clicking the clear button shown in the footer. You can add the multiple attribute to the original file input element by enabling multiple file selection. The default value of the multiple property is true. The following example explains multiple file upload settings.

import { Uploader } from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    }
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Single file upload

You can select and upload a single file by disabling the multiple file selection property. The file list item is removed for every selection and it always maintains a single file to upload. You can remove the multiple attribute from the original file input element by enabling the single file upload property.

The following example explains single file upload settings.

import { Uploader } from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    multiple: false
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Save Action

The save action handler uploads the files that need to be specified in the saveUrl property. The save handler receives the submitted files and manages the save process on the server. After uploading the files to the server location, the color of the selected file name changes to green and the remove icon changes to a bin icon.

  • When the file is uploaded successfully, the success event triggers to handle the operation after upload.
  • When the file fails to upload, the failure event triggers with information about what caused the failure.

You can cancel the upload by setting the upload event argument args.cancel to true.

import { Uploader } from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save'
    }
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Server-side configuration for save action

Here’s how to handle the server-side action for saving the file on the server. The uploads variable below represents the target upload directory path (for example, Path.Combine(env.WebRootPath, "uploads")).

public async Task<IActionResult> Save(IFormFile UploadFiles)
{
    if (UploadFiles.Length > 0)
    {
        if (!Directory.Exists(uploads)) // Create the directory if it does not exist
        {
            Directory.CreateDirectory(uploads);
        }

        var filePath = Path.Combine(uploads, UploadFiles.FileName); // Get the file path
        using (var fileStream = new FileStream(filePath, FileMode.Create)) // Create the file
        {
            await UploadFiles.CopyToAsync(fileStream); // Save the file
        }
    }
    return Ok();
}

Server-side configuration for saving and returning responses

The following examples demonstrate separate server-side actions for saving files on the server and returning responses in JSON, String, and File formats. These are mutually exclusive alternatives—choose the one that matches your response format.

JSON response:

[AcceptVerbs("Post")]
public IActionResult Save()
{
    try
    {
        // Process uploaded data
        var responseData = new
        {
            Success = true,
            Message = "Files uploaded successfully",
            // Additional data can be added here
        };

        return Json(responseData);
    }
    catch (Exception e)
    {
        var errorResponse = new
        {
            Success = false,
            Message = "File upload failed: " + e.Message
        };

        return Json(errorResponse);
    }
}

String response:

// for String Data
try
{
    // Process string data
    var data = "success";
    // Return the string data
    return Content(data);
}
catch (Exception)
{
    var data = "failed";
    return Content(data);
}

// for File Data
try
{
    // Example: Retrieve file path for stream.txt
    var filePath = "stream.txt"; // Example file path
    
    // Get full file path
    var fullPath = Path.GetFullPath(filePath);

    // Return the file
    return PhysicalFile(fullPath, "text/plain");
}
catch (Exception e)
{
    // Handle file retrieval failure
    return Content("Failed to retrieve file response: " + e.Message, "text/plain");
} }


### Client-side configuration for saving and returning responses

The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats.




<div class="tabs">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#7pw1s99ykwqqnj5u8wfjk6ynf3ql8ckc-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.ts" data-original-lang="ts">index.ts</a></li>
<li role="presentation" class=""><a data-target="#olt1k1uidopkc0o37jazbd257g7z6z83-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
<li role="presentation" class=""><a data-target="#4pbjvmz27mvl5th041g2w8bso9cgesb4-css" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="styles.css" data-original-lang="css">styles.css</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="7pw1s99ykwqqnj5u8wfjk6ynf3ql8ckc-ts" data-original-lang = "ts" ><div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">Uploader</span><span class="p">,</span> <span class="nx">SuccessEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;@syncfusion/ej2-inputs&#39;</span><span class="p">;</span>

<span class="c1">// initialize Uploader component</span>
<span class="kd">let</span> <span class="nx">uploadObject</span>: <span class="kt">Uploader</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Uploader</span><span class="p">({</span>
    <span class="nx">asyncSettings</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">saveUrl</span><span class="o">:</span> <span class="s1">&#39;/api/FileUploader/Save&#39;</span>
    <span class="p">},</span>
    <span class="nx">success</span>: <span class="kt">OnSuccessHandler</span><span class="p">,</span>
<span class="p">});</span>

<span class="c1">// render initialized Uploader</span>
<span class="nx">uploadObject</span><span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="s1">&#39;#fileupload&#39;</span><span class="p">);</span>

<span class="kd">function</span> <span class="nx">OnSuccessHandler</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">SuccessEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">e</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="c1">// Check if the event argument is not null</span>
    <span class="p">{</span> 
        <span class="kd">const</span> <span class="nx">responseText</span>: <span class="kt">string</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">responseText</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">responseText</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span> <span class="o">!==</span> <span class="s2">&quot;&quot;</span><span class="p">)</span> <span class="p">{</span>

            <span class="c1">// for JSON and File Datas</span>
            <span class="kd">var</span> <span class="nx">jsonResponse</span> <span class="o">=</span> <span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">responseText</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">jsonResponse</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="nx">jsonResponse</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">&quot;Success&quot;</span><span class="p">))</span>
            <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">isSuccess</span> <span class="o">=</span> <span class="nx">jsonResponse</span><span class="p">[</span><span class="s2">&quot;Success&quot;</span><span class="p">];</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">isSuccess</span><span class="p">)</span> <span class="p">{</span>
                    <span class="c1">// File upload success</span>
                    <span class="kd">const</span> <span class="nx">message</span>: <span class="kt">string</span> <span class="o">=</span> <span class="nx">jsonResponse</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">&quot;Message&quot;</span><span class="p">)</span> <span class="o">?</span> <span class="nx">jsonResponse</span><span class="p">[</span><span class="s2">&quot;Message&quot;</span><span class="p">]</span> <span class="o">:</span> <span class="s2">&quot;File uploaded successfully&quot;</span><span class="p">;</span>
                    <span class="c1">// Additional processing as needed</span>
                <span class="p">}</span>
            <span class="p">}</span>

            <span class="c1">// for string Data</span>
            <span class="kd">const</span> <span class="nx">message</span>: <span class="kt">string</span> <span class="o">=</span> <span class="nx">responseText</span><span class="p">;</span>
            <span class="c1">// Additional processing as needed</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="olt1k1uidopkc0o37jazbd257g7z6z83-html" data-original-lang = "html" ><div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Essential JS 2 Uploader<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1.0&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Essential JS 2 Uploader Component&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;author&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Syncfusion&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;systemjs.config.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;loader&#39;</span><span class="p">&gt;</span>Loading....<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;container&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;file&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;fileupload&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;UploadFiles&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="4pbjvmz27mvl5th041g2w8bso9cgesb4-css" data-original-lang = "css" ><div class="highlight"><pre><code class="prettyprint language-css" data-lang="css"><span></span><span class="p">#</span><span class="nn">container</span> <span class="p">{</span>
  <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
  <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="kc">auto</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
  <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Helvetica Neue&#39;</span><span class="p">,</span><span class="s1">&#39;calibiri&#39;</span><span class="p">;</span>
  <span class="k">font-size</span><span class="p">:</span> <span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
  <span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>

</div>

</div>




## Remove Action

The remove action is optional. Specify the URL to handle the remove process on the server. The remove handler receives the posted files and handles the remove operation on the server.

*   When the files are removed successfully from the server, the `success` event triggers to denote the process has completed.
*   When the remove action fails, the `failure` event triggers with information about what caused the failure.

> You can determine whether the `success` event was triggered by the save or remove action using the `eventArgs.operation` argument.

You can remove files that have not been uploaded by clicking the remove icon. In this case, the `success` or `failure` events will not be triggered.




<div class="tabs">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#bafbcfy4lgvghdn0kpvw418a9d9ntlmp-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.ts" data-original-lang="ts">index.ts</a></li>
<li role="presentation" class=""><a data-target="#hsmiwsniam6q0m4brrsemm8431a1af4h-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
<li role="presentation" class=""><a data-target="#tzap8twu6ijyx9jvy5g4fuzh3bhrvzr9-css" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="styles.css" data-original-lang="css">styles.css</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="bafbcfy4lgvghdn0kpvw418a9d9ntlmp-ts" data-original-lang = "ts" ><div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">Uploader</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;@syncfusion/ej2-inputs&#39;</span><span class="p">;</span>

<span class="c1">// initialize Uploader component</span>
<span class="kd">let</span> <span class="nx">uploadObject</span>: <span class="kt">Uploader</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Uploader</span><span class="p">({</span>
    <span class="nx">asyncSettings</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">saveUrl</span><span class="o">:</span> <span class="s1">&#39;https://services.syncfusion.com/js/production/api/FileUploader/Save&#39;</span><span class="p">,</span>
        <span class="nx">removeUrl</span><span class="o">:</span> <span class="s1">&#39;https://services.syncfusion.com/js/production/api/FileUploader/Remove&#39;</span>
    <span class="p">}</span>
<span class="p">});</span>

<span class="c1">// render initialized Uploader</span>
<span class="nx">uploadObject</span><span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="s1">&#39;#fileupload&#39;</span><span class="p">);</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="hsmiwsniam6q0m4brrsemm8431a1af4h-html" data-original-lang = "html" ><div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Essential JS 2 Uploader<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1.0&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Essential JS 2 Uploader Component&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;author&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Syncfusion&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;systemjs.config.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;loader&#39;</span><span class="p">&gt;</span>Loading....<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;container&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;file&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;fileupload&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;UploadFiles&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="tzap8twu6ijyx9jvy5g4fuzh3bhrvzr9-css" data-original-lang = "css" ><div class="highlight"><pre><code class="prettyprint language-css" data-lang="css"><span></span><span class="p">#</span><span class="nn">container</span> <span class="p">{</span>
  <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
  <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="kc">auto</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
  <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Helvetica Neue&#39;</span><span class="p">,</span><span class="s1">&#39;calibiri&#39;</span><span class="p">;</span>
  <span class="k">font-size</span><span class="p">:</span> <span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
  <span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>

</div>

</div>

        
<button class="preview-sample-button" id="PreviewSampleButton-vazlampcm127b3vjq8ul9zguxeehii40" onclick="LoadPreviewSample('https://ej2.syncfusion.com/documentation/code-snippet/uploader/remove-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vazlampcm127b3vjq8ul9zguxeehii40" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/documentation/code-snippet/uploader/remove-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"/><span class="stackblitz-text">Open in Stackblitz</span></button>
<div id="PreviewSampleHolder-vazlampcm127b3vjq8ul9zguxeehii40"></div>



### Server-side configuration for remove action

To remove an uploaded file from the server, it is sufficient to send only the file name. You can achieve this by setting the [`postRawFile`](https://ej2.syncfusion.com/documentation/api/uploader/removingEventArgs#postrawfile) property of the `RemovingEventArgs` to `false` during the [`removing`](https://ej2.syncfusion.com/documentation/api/uploader#removing) event. This ensures that only the file name is sent to the server in the Remove action.

Here is an example:

```typescript
let uploadObject: Uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
  },
  removing: function (args) {
    args.postRawFile = false;
  }
});

Here’s how to handle the server-side action for removing the file from server.

public void Remove(string UploadFiles)
{
    if (UploadFiles != null)
    {
        var filePath = Path.Combine(uploads, UploadFiles);
        if (System.IO.File.Exists(filePath))
        {
            System.IO.File.Delete(filePath); // Delete the file
        }
    }
}

When postRawFile is enabled, the complete file data will be sent to the server-side Remove action. The postRawFile option is enabled by default.

Here is an example:

let uploadObject: Uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
  },
  removing: function (args) {
    // The `postRawFile` option is enabled by default.
  }
});

Here’s how to receive the file data in the server-side Remove action when postRawFile is enabled:

public void Remove(IFormFile UploadFiles)
{
    // Your file removal logic goes here!
}

Auto Upload

By default (autoUpload is true), the Uploader processes the files to upload once they are selected and added to the upload queue. To upload manually, disable the autoUpload property. When you disable this property, you can use the action buttons to call upload all or clear all actions manually. You can change those buttons’ text using the buttons property in the Uploader component.

import { Uploader } from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    // disable the auto upload functionalities
    autoUpload: false
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Sequential Upload

By default, the Uploader component processes multiple files for upload simultaneously. When you enable the sequentialUpload property, the selected files are processed sequentially (one after the other) to the server. If a file is uploaded successfully or fails, the next file will be uploaded automatically in this sequential upload. This feature helps reduce upload traffic and file upload failures.

import { Uploader } from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    // enable the sequential upload functionality
    sequentialUpload: true
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Preloaded Files

The Uploader component allows you to preload the list of files that have been uploaded to the server. The preloaded files are useful to view and remove files from the server, which can be achieved using the files property. By default, the files are configured with the uploaded successfully state when rendering the file list. The following properties are mandatory to configure the preloaded files:

  • Name
  • Size
  • Type
import { Uploader, FilesPropModel } from '@syncfusion/ej2-inputs';

let preLoadFiles: FilesPropModel[] = [
    {name: 'Books', size: 500, type: '.png'},
    {name: 'Movies', size: 12000, type: '.pdf'},
    {name: 'Study materials', size: 500000, type: '.docx'},
];
// initialize Uploader component
let uploadObject: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    files: preLoadFiles
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Adding additional HTTP headers with upload action

The Uploader component allows you to add the additional headers with save and remove action request using uploading and removing event, which helps to send validation token on file upload. Access the current request and set the request header within these events.

The following code block shows how to add the additional headers with save and remove action request. The args.currentRequest argument refers to the underlying XMLHttpRequest used for the upload/remove request.

<div style='margin: auto 30%'>
    <input type='file' id='uploader' name="UploadFiles"/>
</div>
import { Uploader} from '@syncfusion/ej2-inputs';

let uploadObj: Uploader = new Uploader({
asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    uploading: addHeaders,
    removing: addHeaders
});
uploadObj.appendTo('#uploader');

function addHeaders(args: any) {
    args.currentRequest.setRequestHeader('custom-header', 'Syncfusion');
}

You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.

See Also