CODEWITHSUNDEEP
asp.net-mvcuploadyoutube-api
NullReference
NullReference

Reputation: 4484

How to get a progress bar for a standard html form upload?

I'm using YouTube's API to directly upload videos from the browser to their servers. Their api documentation uses a standard html form to upload the video. This process works but I'd like to add a progress bar for the upload. Is this possible with an old school form upload or is there a way to do the same asynchronously? I'm using asp.net mvc\api. Thanks!

<form action="URL?nexturl=http%3A%2F%2Fwww.example.com" method="post"
  enctype="multipart/form-data" onsubmit="return checkForFile();">
  <input id="file" type="file" name="file"/>
  <div id="errMsg" style="display:none;color:red">
    You need to specify a file.
  </div>
  <input type="hidden" name="token" value="TOKEN"/>
  <input type="submit" value="go" />
</form>

Upvotes: 0

Views: 872

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239290

No, it's not possible to present a progress bar with a standard upload. Once you've submitted the form, you've technically already exited the page. The browser just holds on to it until it receives something new from the server to load, which won't happen until the upload completes and the form fully posts. In the mean time, your page is essentially dead.

In the past, people pulled this off with a Flash or Java control, but all that did was allow asynchronous file transfer because there was no way to do it with just plain old HTML and JavaScript.

With HTML5, AJAX file uploads are now possible. See http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ for a quick intro. Just be aware that this is only supported in modern browsers (i.e. no IE6-9). There's fallbacks available that use iframes to simulate asynchronous upload. Just do some Googling.

Upvotes: 2

Related Questions