---
title: "How to Upload file asynchronously using generic handler"  
description: "How to Upload file asynchronously using generic handler"  
author: "Pravesh Singh"  
published: 2015-01-15  
updated: 2015-01-15  
canonical: https://www.mindstick.com/forum/12860/how-to-upload-file-asynchronously-using-generic-handler  
category: "asp.net"  
tags: ["ajax", "javascript", "generics", "handler"]  
reading_time: 2 minutes  

---

# How to Upload file asynchronously using generic handler

I've used the code bellow to upload a file to [server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over) asynchronously:

**HTML:**

**<form** id="file_upload" action="UploadFile.ashx" target="upload-target" method="post" enctype="multipart/form-data" onsubmit="[javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript):return uploadClicked();"**>**

**<input** type="file" id="newFile" name="newFile" **/>**

**<input** type="submit" **/>**

**<iframe** id="upload-target" name="upload-target"**></iframe>**

**</form>**

After the submit [button clicked](https://www.mindstick.com/forum/567/how-to-closed-jquery-model-popup-on-button-clicked), the [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) **uploadClicked()** will be fired:

```
function uploadClicked() {    if (condition == true)        return true; //the form will submit    else        return false;}
```

Now the [generic handler](https://www.mindstick.com/forum/12720/generic-handler-data-to-ajax-json) **UploadFile.ashx** will save the file and [return the result](https://www.mindstick.com/forum/159730/how-can-i-return-the-result-from-the-ajax-call):

```
if (context.Request.Files.Count > 0){    context.Request.Files["newFile"].SaveAs(HttpContext.Current.Server.MapPath("/Images/myFile.png"));    response.Write("DONE");}else{    response.Write("FAILED");}
```

This works well and the result will be showing in the iframe tag.

Is there anyway to get the result ("DONE" or "FAILED") in [client](https://www.mindstick.com/articles/23198/3-steps-to-ensure-that-your-client-portal-is-impeccable)-side like this ?

```
function uploadFinished(){     if ( response == "DONE"
)     {          // show the result     }     else     {          // show error     }}
```

Please help me doing this **without using JQuery.**

Thanks in advance.

## Replies

### Reply by Royce Roy

You could use the [XHR2 FormData](https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects) object to upload the file to the server asynchronously and retrieve the response from the server [handler](https://www.mindstick.com/forum/33532/handler-pagehandlerfactory-integrated-has-a-bad-module-managedpipelinehandler-in-its-module-list):

```
function uploadClicked() {    var fd = new FormData();    var file =document.getElementById('newFile');    fd.append(file.name,
file.files[0]);     var xhr = new XMLHttpRequest();    var form =document.getElementById('file_upload');    xhr.open(form.method,form.action);    xhr.onreadystatechange
= function () {        if (xhr.readyState== 4 && xhr.status == 200) {            //xhr.responseText will contain the response from the server            alert(xhr.responseText);        }    };    xhr.send(fd);     // We are submitting the form asynchronously    return false;}
```


---

Original Source: https://www.mindstick.com/forum/12860/how-to-upload-file-asynchronously-using-generic-handler

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.