User:Ayvsuresh9/sandbox

https://github.com/danialfarid/angular-file-upload

https://angular-file-upload.appspot.com/

http://jsfiddle.net/JeJenny/ZG9re/

 Upload on form submit Username:  *required Profile Picture:  *required Submit  = 0">  Upload Successful Upload right away Attach an Image or PDF Attach Any File  Drop Images or PDFs here File Farg&amp;Drop not supported on your browser

-2nd --



<script src="ng-file-upload-shim.min.js"> <script src="ng-file-upload.min.js">

watching model: Upload using model $watch <div class="button" ngf-select ngf-change="upload($files)">Upload on file change Drop File: <div ngf-drop ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'.jpg,.png,.pdf'">Drop Images or PDFs files here File Drag/Drop is not supported for this browser

//inject angular file upload directives and services. var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {   $scope.$watch('files', function  { $scope.upload($scope.files); });

$scope.upload = function (files) { if (files && files.length) { for (var i = 0; i < files.length; i++) { var file = files[i]; Upload.upload({                   url: 'upload/url',                    fields: {'username': $scope.username},                    file: file                }).progress(function (evt) {                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);                    console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);                }).success(function (data, status, headers, config) {                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);               }); }       }    }; }]);

---3rd --

public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files) {   ServerFileModel model = new ServerFileModel; try {       // The Name of the Upload component is "files" if (files == null || files.Count == 0) throw new ArgumentException("No files defined"); HttpPostedFileBase file = files.ToArray[0];

if (file.ContentLength > 10485760) throw new ArgumentException("File cannot exceed 10MB");

file.InputStream.Position = 0; Byte[] destination = new Byte[file.ContentLength]; file.InputStream.Read(destination, 0, file.ContentLength);

//IGNORE THIS ServerFileFormatEnum type = TempFileStorageController.GetFileFormatForExtension(Path.GetExtension(file.FileName)); ServerFileDescriptor serverFile = TempFileStorageController.AddFile(destination, type); //IGNORE ABOVE

model.FileIdentifier = serverFile.FileIdentifier; model.FileName = file.FileName; model.FileSize = file.ContentLength; }   catch (Exception e)    { model.UploadError = e.Message; }   return Json(model, JsonRequestBehavior.AllowGet); }

-4

<input type="file" name="files" id="upload" /> $("#upload").kendoUpload({   template: "Name: #=name#" +              " Size: #=size# bytes "    });

<button type="button" class="btn btn-default btn-circle"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-list"></i> <button type="button" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-link"></i> <button type="button" class="btn btn-info btn-circle"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-warning btn-circle"><i class="glyphicon glyphicon-remove"></i> <button type="button" class="btn btn-danger btn-circle"><i class="glyphicon glyphicon-heart"></i>

lg <button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-primary btn-circle btn-lg"><i class="glyphicon glyphicon-list"></i> <button type="button" class="btn btn-success btn-circle btn-lg"><i class="glyphicon glyphicon-link"></i> <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-warning btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i> <button type="button" class="btn btn-danger btn-circle btn-lg"><i class="glyphicon glyphicon-heart"></i>

xl <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i> <button type="button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-link"></i> <button type="button" class="btn btn-info btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i> <button type="button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-heart"></i>