File Upload in Client Side

Question

We are using asp.net project which is totally client side i.e. using ajax to create all controls and forms.

One of the scenario is to create multiple "FILE UPLOAD" controls in a form and try to upload them on the button click on client side, which is sort of becoming overly impossible and compelling us to use Server side upload which defeats our propose of the project.

Can someone suggest me how to upload and then save a file to a directory in javascript.

Open to technologies.

do you have any restrictions on using third party ajax uploader controls? e.g.[http://cutesoft.net/downloads/folders/upload/entry44395.aspx] — Lin, May 21 '14 at 00:50
There are a few ways to handle this. You could use the FileReader API, FormData objects, or iframe based approach. — deostroll, May 21 '14 at 01:25
@Immortal iframe based approach is a little more reliable in terms of cross-browser support (and even on old ones), but the technique is quasi-asynchronous. You can try a solution by [Andrew Valums](http://valums-file-uploader.github.io/file-uploader/), it fallsback to the traditional iframe approach if all else fails. — deostroll, May 21 '14 at 02:55
And if you are interested in the classical approach only (iframe based) you may want to [this](https://github.com/deostroll/neoupload) github. (Disclaimer: its my github; however its for a totally different purpose). — deostroll, May 21 '14 at 03:02

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You can use AjaxFileUpload which also has a client side upload button also you can use javascript on certain events such as:

function uploadError(sender, args) {... }

function onClientUploadStart(sender, e) { ... }

function onClientUploadComplete(sender, e) { .. }

function onClientUploadCompleteAll(sender, e) { .. }

there is Ajax Temporary Server Memory that you could retrieve your selected files and upload them together. you can get that temporary path as below:

  protected void fileUpload_UploadComplete(object sender, AjaxFileUploadEventArgs e)
  {
      string tempPath = Path.Combine(Path.GetTempPath(), "_AjaxFileUpload", e.FileId);
  }

File Upload in Client Side

1 Answers1