Rectangle 27 12

I don't think this is a browser bug, but rather a bug in the upload program. I tested with uploading a 1GB and 2GB file and the upload started right away without waiting at all.

Make sure your test is valid but I found the following unexpected behavior.

case 1: 1. begin upload 1G file 2. upload started normally and progress is normal 3. before completing upload, click on Browse and upload a 2G file 4. upload started normally and progress is messed up. showing negative speed and stuff.

case 2: 1. begin upload 2G file 2. upload started normally and progress is normal 3. before completing upload, click on Browse and upload a 1G file 4. upload started normally and progress is messed up. showing negative speed and stuff.

case 3: 1. begin upload a 1G file 2. upload started normally and progress is normal. 3. start a new tab and begin upload a 2G file 4. upload started normally and progress is normal.

looks like your program is not handling the first two test cases, it doesn't look like a browser bug.

before disabling the upload button once file begins, try to find out why "cancel" upload is not working (if you have implemented it). it looks like there are some success to cancel file upload wtih html5 on client side.

+1 for the crisp test scenarios. I believe this answer can be dramatically improved if you can tersely show that these problems reproduce themselves in Chrome, binding the OP's lack of repro to a localized issue.

javascript - HTML5 file upload - stuck on very large files - Firefox o...

javascript html5 firefox file-upload
Rectangle 27 205

HTML5 comes with File API spec, which allows you to create applications that let the user interact with files locally; That means you can load files and render them in the browser without actually having to upload the files. Part of the File API is the FileReader interface which lets web applications asynchronously read the contents of files .

Here's a quick example that makes use of the FileReader class to read an image as DataURL and renders a thumbnail by setting the src attribute of an image tag to a data URL:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

The code snippet in the HTML example below filters out images from the user's selection and renders selected files into multiple thumbnail previews:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple />
<output id="list"></output>

But I want to know that how to delete particular file to prevent it from uploading. It's define in some structure.

Simply disable the file input element, and it won't be uploaded! So in the example above: document.getElementById("uploadImage").disabled = true

@Nicholas The code snippet under "Show snippet section" actually lets you load multiple images and preview them all

html5 - Show an image preview before upload - Stack Overflow

html5 image-processing upload
Rectangle 27 201

HTML5 comes with File API spec, which allows you to create applications that let the user interact with files locally; That means you can load files and render them in the browser without actually having to upload the files. Part of the File API is the FileReader interface which lets web applications asynchronously read the contents of files .

Here's a quick example that makes use of the FileReader class to read an image as DataURL and renders a thumbnail by setting the src attribute of an image tag to a data URL:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

The code snippet in the HTML example below filters out images from the user's selection and renders selected files into multiple thumbnail previews:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple />
<output id="list"></output>

But I want to know that how to delete particular file to prevent it from uploading. It's define in some structure.

Simply disable the file input element, and it won't be uploaded! So in the example above: document.getElementById("uploadImage").disabled = true

@Nicholas The code snippet under "Show snippet section" actually lets you load multiple images and preview them all

html5 - Show an image preview before upload - Stack Overflow

html5 image-processing upload
Rectangle 27 230

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 14

To support HTML5 drag and drop file upload, the browser should support the drag and drop(DnD) API and the File API simultaneously.

IE supports the DnD from IE5 but it doesn't support the File API even in IE9. Opera supports the File API from 11.1 but doesn't support the DnD.

So you can use drag and drop file upload in Firefox 3.6+, Safari 6.0+, Chrome 9.0+.

I tried it doesn't detect that, for example it says that IEs can drag and drop.

javascript - Browser support of drag and drop file uploads - Stack Ove...

javascript ajax html5 file-upload drag-and-drop
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 222

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 221

2017 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the "new" HTML5 file API is that is wasn't supported until IE10. If the specific market you're aiming at has a higher-than-average prepensity toward older versions of Windows, you might not have access to it.

Going into 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (eg this is a B2B tool, or something you're delivering for training) that number can rocket. Just a few months ago in 2016 I dealt with a company using IE8 on over 60% of their machines.

So before you do anything: check what browser your users use. If you don't, you'll learn a quick and painful lesson in why "works for me" isn't good enough in a deliverable to a client.

However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn't need to move.

It's a "real" post so it's not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET has nicer mechanisms. PHP plain fails, but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

For the record it's now possible to do pure AJAX file uploads if the browser supports the File API - developer.mozilla.org/en/using_files_from_web_applications

iframe solution is pretty simple and easy to get working

this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it's ajax.. though, having said that, ajax is synonymous with xhr, but it doesn't itself describe the underline mechanism/components that delivers/exchanges the payload.

@BrettCaswell I wasn't saying that AJAX/XHR weren't possible, just that it wasn't possible to post a file up with them on old but everliving versions of IE. That was and remains completely true.

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 2

I would defiantly look into running Plupload. It allows great browser capability and supports multiple file drag and drop in HTML5 browsers that support FileReader.

So lets say for example you dont have html 5 it will deprecate down to flash / gears / silverlight depending on what that individual has installed.

It has an option called droparea: "somediv" that allows you to drag files into it and automatically cue up a file upload.

Let me know if you need any help setting it up.

HTML5 drag-drop uploads - Stack Overflow

html5
Rectangle 27 25

It's an HTML5-free solution that uses an invisible iFrame for file upload. Since it does not rely on HTML5, it works across browser!

Any html element that supports a click event can be used to submit a form marked with the ngUpload directive, only that such elements must be marked with the upload-submit css class (as the case with the input[type=submit] above.

The example below uses a styled div to submit the form.

You can make your /server/upload/handler spit a valid url, so that {{uploadReport}} can be used to set the src of an <img> tag, like so:

<img ng-src={{uploadReport}} />

and see the uploaded image appear immediately!

The ngController for the above examples is:

The ngUpload directive can be registered with your AngularJS application module viz:

var mainApp = angular.module('MainApp', ["ngUpload", ...]);

and added to your document as:

<html ng-app="MainApp">

</html>

AngularJS.ngUpload works in the context of a ngController; and such you can have as many uploaders as possible in a single ngController. For example:

<form action='/server/upload/handler' ng-upload="callbackFunction1">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}

<form action='/server/upload/handler' ng-upload="callbackFunction2">
   <!-- other form inputs goes here -->
   <input type="file" name="anotherEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}
var UploadCtrl = function ($scope) {
     $scope.callbackFunction1 = function(contentOfInvisibleFrame) {
         $scope.uploadReport1 = contentOfInvisibleFrame;
     }

     $scope.callbackFunction2 = function(contentOfInvisibleFrame) {
         $scope.uploadReport2 = contentOfInvisibleFrame;
     }
}

A NodeJS-based upload handler demo of this directive can be found at http://ng-upload.eu01.aws.af.cm.

An ASP.Net MVC and NodeJS sample codes can be found on the project website at github.com/twilson63/ngUpload/tree/master/examples

file uploader integration for angularjs - Stack Overflow

file-upload angularjs
Rectangle 27 3

Not necessary. For example the blueimp file upload plugin tests browser capabilities and could use the jQuery iframe transport if the browser doesn't support HTML5 XHR2. Here are more details about browser support.

Uploadify is another example which uses Flash if the browser doesn't suport XHR2.

Plupload is yet another very powerful plugin which supports a multitude of equivalents if the browser doesn't support XHR2.

So just pick a plugin, read the documentation, integrate it in your ASP.NET MVC 3 application and have fun.

asp.net mvc 3 - .net MVC 3.0 file upload with progress bar - Stack Ove...

asp.net-mvc-3 c#-4.0 jquery file-upload progress-bar
Rectangle 27 3

Not necessary. For example the blueimp file upload plugin tests browser capabilities and could use the jQuery iframe transport if the browser doesn't support HTML5 XHR2. Here are more details about browser support.

Uploadify is another example which uses Flash if the browser doesn't suport XHR2.

Plupload is yet another very powerful plugin which supports a multitude of equivalents if the browser doesn't support XHR2.

So just pick a plugin, read the documentation, integrate it in your ASP.NET MVC 3 application and have fun.

asp.net mvc 3 - .net MVC 3.0 file upload with progress bar - Stack Ove...

asp.net-mvc-3 c#-4.0 jquery file-upload progress-bar
Rectangle 27 2

Since you are using a shim and since your shim seems to return an object with a __isShim property with a value of true, you could check it like this:

var isFormDataSupported = window.FormData && !(new window.FormData()).__isShim;
<script type="text/javascript">
    var isFormDataSupported = !!window.FormData;
</script>
<script src="src/to/your/shim.js"></script>

Thanks for the solution, but JSLINT throws this error : JSLint : Unexpected dangling '_' in '__isShim'

This "thread" explains why and that one how to get rid of it. It is just a warning, not an actual problem. Alternatively, you could check FormData before loading the shim.

what if I use : if ($window.FormData.toString().indexOf('__isShim') !== -1) {

It would work as well (although note that !==-1 means isNotSupported).

angularjs - How can I check if the browser support HTML5 file upload (...

html5 angularjs file-upload form-data
Rectangle 27 2

Since you are using a shim and since your shim seems to return an object with a __isShim property with a value of true, you could check it like this:

var isFormDataSupported = window.FormData && !(new window.FormData()).__isShim;
<script type="text/javascript">
    var isFormDataSupported = !!window.FormData;
</script>
<script src="src/to/your/shim.js"></script>

Thanks for the solution, but JSLINT throws this error : JSLint : Unexpected dangling '_' in '__isShim'

This "thread" explains why and that one how to get rid of it. It is just a warning, not an actual problem. Alternatively, you could check FormData before loading the shim.

what if I use : if ($window.FormData.toString().indexOf('__isShim') !== -1) {

It would work as well (although note that !==-1 means isNotSupported).

angularjs - How can I check if the browser support HTML5 file upload (...

html5 angularjs file-upload form-data
Rectangle 27 6

When you drag and drop with the HTML5 DnD API, a file form your desktop / file browser into the browser:

  • the drop event callback object has a dataTransfer.files property
FileList
File

From there on, use the File API to do the upload, which has already been covered in many other places.

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div>
<script>
  var file_drop = document.getElementById('file-drop');
  file_drop.addEventListener(
    'dragover',
    function handleDragOver(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      evt.dataTransfer.dropEffect = 'copy'
    },
    false
  )
  file_drop.addEventListener(
    'drop',
    function(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      var files = evt.dataTransfer.files  // FileList object.
      var file = files[0]                 // File     object.
      alert(file.name)
    },
    false
  )
</script>

This will alert the file basename (path cannot be obtained from the file API).

BTW, the other basic way you can get File object is through the .files IDL attribute of an input type=file. This method is more friendly for small screens than DnD, where you need two windows open at the same time at good relative positions. Unfortunately, it seems that currently it is not portable to drag and drop into a input type=file: drag drop files into standard html file input

javascript - How to drag and drop file attachment into the browser? - ...

javascript jquery drag-and-drop html5 gmail
Rectangle 27 162

HTML5 and the File API

#preview img{height:100px;}

Using an input and a div for the images preview area

<input id="browse" type="file" multiple>
<div id="preview"></div>

let's also use a CSS to keep the resulting images a reasonable height:

#preview img{ height:100px; }
window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // Set to `true` to use Blob instead of Data-URL

// 2.
function readImage (file) {

  // Create a new FileReader instance
  // https://developer.mozilla.org/en/docs/Web/API/FileReader
  var reader = new FileReader();

  // Once a file is successfully readed:
  reader.addEventListener("load", function () {

    // At this point `reader.result` contains already the Base64 Data-URL
    // and we've could immediately show an image using
    // `elPreview.insertAdjacentHTML("beforeend", "<img src='"+ reader.result +"'>");`
    // But we want to get that image's width and height px values!
    // Since the File Object does not hold the size of an image
    // we need to create a new image and assign it's src, so when
    // the image is loaded we can calculate it's width and height:
    var image  = new Image();
    image.addEventListener("load", function () {

      // Concatenate our HTML image info 
      var imageInfo = file.name    +' '+ // get the value of `name` from the `file` Obj
          image.width  +''+ // But get the width from our `image`
          image.height +' '+
          file.type    +' '+
          Math.round(file.size/1024) +'KB';

      // Finally append our created image and the HTML info string to our `#preview` 
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');

      // If we set the variable `useBlob` to true:
      // (Data-URLs can end up being really large
      // `src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA...........etc`
      // Blobs are usually faster and the image src will hold a shorter blob name
      // src="blob:http%3A//example.com/2a303acf-c34c-4d0a-85d4-2136eef7d723"
      if (useBlob) {
        // Free some memory for optimal performance
        window.URL.revokeObjectURL(image.src);
      }
    });

    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;

  });

  // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
  reader.readAsDataURL(file);  
}

// 1.
// Once the user selects all the files to upload
// that will trigger a `change` event on the `#browse` input
elBrowse.addEventListener("change", function() {

  // Let's store the FileList Array into a variable:
  // https://developer.mozilla.org/en-US/docs/Web/API/FileList
  var files  = this.files;
  // Let's create an empty `errors` String to collect eventual errors into:
  var errors = "";

  if (!files) {
    errors += "File upload not supported by your browser.";
  }

  // Check for `files` (FileList) support and if contains at least one file:
  if (files && files[0]) {

    // Iterate over every File object in the FileList array
    for(var i=0; i<files.length; i++) {

      // Let's refer to the current File as a `file` variable
      // https://developer.mozilla.org/en-US/docs/Web/API/File
      var file = files[i];

      // Test the `file.name` for a valid image extension:
      // (pipe `|` delimit more image extensions)
      // The regex can also be expressed like: /\.(png|jpe?g|gif)$/i
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        // SUCCESS! It's an image!
        // Send our image `file` to our `readImage` function!
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }
    }
  }

  // Notify the user for any errors (i.e: try uploading a .txt file)
  if (errors) {
    alert(errors); 
  }

});

@afshin added a demo and edited a bit the code.

Does not works in Safari

@SMC caniuse.com/fileapi only recently supports File API. I'll take a look

javascript - How to Preview Image, get file size, image height and wid...

javascript jquery html dimensions image-size