UIUpload

ui-upload.js defines ui-upload AngularJS module. The module defines upload-link directive and uiUploader service that simplify file uploading tasks. They allow:

• convert any link or button to a uploading control that opens select file dialog and performs multipart-data uploading to the specified location;
• open file select dialog from script and upload/load as dataURI the selected file;
• upload File or Blob to server using uiUploader service (w/o dialog).

This is pure HTML5 and AngularJS solution.

Try the demo.

Compatibility.

Because of this project uses File API and FormData, it will work on Chrome, Mozilla, Opera, latest versions of Android browsers and IE10+.

Requirements

AngularJS.

Usage

In order to start using upload-link directive and uiUploader service you have to include ui-upload.js script. For example:

 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/ui-upload.js"></script>

Then you may define a link that will open select file dialog and will upload the selected file to the server:

      <a upload-link
         class="btn btn-primary"
         accept=".*"
         server-url="api/upload"
         on-success="controller.uploadSucceed(data, file)"
         on-error="controller.uploadFailed(e)">Click here to upload an image</a>

Another option is to react on some UI event and then open select file dialog from script:

      <a class="btn btn-primary" ng-click="controller.loadImage()">Load an image</a>

Javascript:

        controller.loadImage = function()
        {
          // in case when the serverUrl (the first argument) is null,
          // the service doesn't upload file to server directly, but 
          // allows you to handle the content.
          return $uiUploader.selectAndUploadFile(null, ".jpg,.png,.gif").
            then(
              function(result)
              {
                controller.images.push(
                  {
                    // result.data is a dataUri, see https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs
                    src: result.data,
                    name: result.file.name,
                    selected: false
                  });

                controller.$invalidate();
              },
              $log.error);
        };

Later on you may upload dataUri to the server using by uiUploader service:

        controller.uploadSelectedImage = function(serverUrl)
        {
          var selected = controller.images.filter(
            function(item) { return item.selected; });

          if (selected.length)
          {
            var blob = dataURItoBlob(selected[0].src);

            return $uiUploader.
              uploadFile(serverUrl, blob, selected[0].name).then(
                function(result)
                {
                  // TODO: upload succeed
                });
          }
        };