Created
April 5, 2013 13:09
-
-
Save timgaunt/5319154 to your computer and use it in GitHub Desktop.
Quick extract of the code we use to upload files using jQuery and ServiceStack on our MVC solutions but in theory this would work on older ASP.Net implementations as well. You'll need ServiceStack.Mvc - http://nuget.org/packages/ServiceStack.Mvc/ (or the starter kit if you want pointers on getting started: http://nuget.org/packages/ServiceStack.…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System; | |
| using System.Collections.Generic; | |
| using System.Configuration; | |
| using System.IO; | |
| using BeVancouver.Web.Helpers; | |
| using ServiceStack.ServiceHost; | |
| using ServiceStack.ServiceInterface; | |
| using ServiceStack.ServiceInterface.ServiceModel; | |
| [Route("/files")] | |
| public class Files | |
| { | |
| } | |
| public class FilesResponse : IHasResponseStatus | |
| { | |
| public FilesResponse() | |
| { | |
| FileUrls = new List<string>(); | |
| } | |
| public List<string> FileUrls { get; set; } | |
| public ResponseStatus ResponseStatus { get; set; } | |
| } | |
| public class FilesService : Service | |
| { | |
| public object Post(Files request) | |
| { | |
| var response = new FilesResponse(); | |
| var folder = ConfigurationManager.AppSettings["Your Upload Folder"]; | |
| if (!Directory.Exists(tempPath)) | |
| Directory.CreateDirectory(tempPath); | |
| foreach (var uploadedFile in base.RequestContext.Files) | |
| { | |
| var originalName = uploadedFile.FileName; | |
| var extension = Path.GetExtension(originalName); | |
| var filename = String.Concat(Guid.NewGuid(), extension); | |
| var newFilePath = Path.Combine(folder, filename); | |
| uploadedFile.SaveTo(newFilePath); | |
| response.FileUrls.Add(String.Concat("http://somedomain.com/", folder, "/", filename)); | |
| } | |
| return response; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Upload a file page</title> | |
| </head> | |
| <body> | |
| <form id="file-upload" action="/api/json/reply/Files" method="POST" enctype="multipart/form-data"> | |
| <input id="file-upload-button" type="file" name="files[]" multiple /> | |
| <div class="fileupload-progress fade"> | |
| <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> | |
| <div class="bar" style="width:0%;"></div> | |
| </div> | |
| <div class="progress-extended"> </div> | |
| </div> | |
| <div class="fileupload-loading"></div> | |
| </form> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="/scripts/libs/jquery.canvas-to-blob.js"></script> | |
| <script src="/scripts/libs/jquery.iframe-transport.js"></script> | |
| <script src="/scripts/libs/jquery.fileupload.js"></script> | |
| <script src="/scripts/libs/jquery.fileupload-fp.js"></script> | |
| <script src="/scripts/libs/jquery.fileupload-ui.js"></script> | |
| <!--[if gte IE 8]><script src="/scripts/libs/jquery.xdr-transport.js"></script><![endif]--> | |
| <script> | |
| $(function () { | |
| $('#file-upload').fileupload({ | |
| //xhrFields: {withCredentials: true}, | |
| url: '/api/json/reply/Files', | |
| maxFileSize: 2000000, //2MB | |
| acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, | |
| dataType: 'json', | |
| done: function (e, data) { | |
| $.each(data.result.fileUrls, function (index, fileUrl) { | |
| // Do something with fileUrl here | |
| }); | |
| }, | |
| add: function (e, data) { | |
| data.submit(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for posting this. You saved me a lot of time and frustration.