This project has moved and is read-only. For the latest updates, please go here.

Using this within MVC application

Aug 26, 2012 at 5:24 PM

We have been using this control for years now successfully within MVC apps but the implementation relied on posting the data to the HTTP handler and HTTP handler (modified version of the one you provide) used to send data along to a static class which eventually saved the data to the disk and performed some datastore activities.

This kind of working is kinda troublesome - first of all, there's the HTTP Upload handler which you can't really debug, then there's the fact that MVC controllers should receive the data not the handler. We are implementing DI (IoC) all across our application and having things hardcoded in the HTTP upload handler is just not nice. And I am not aware of an option to DI-enable the HTTP handlers.

Is there a way to work directly with the controllers and get rid of the HTTP upload handler?

Coordinator
Aug 26, 2012 at 7:41 PM

It's possble to create a controller that receives the exact same parameters as the http handler. Then handle the writing of the data in the controller method.

Your controller method must have all the parameters as listen in the GetQueryStringParameters() method of the HttpUploadHandler.ashx

 _fileName = _httpContext.Request.QueryString["file"];
        _parameters = _httpContext.Request.QueryString["param"];
        _lastChunk = string.IsNullOrEmpty(_httpContext.Request.QueryString["last"]) ? true : bool.Parse(_httpContext.Request.QueryString["last"]);
        _firstChunk = string.IsNullOrEmpty(_httpContext.Request.QueryString["first"]) ? true : bool.Parse(_httpContext.Request.QueryString["first"]);
        _startByte = string.IsNullOrEmpty(_httpContext.Request.QueryString["offset"]) ? 0 : long.Parse(_httpContext.Request.QueryString["offset"]); ;

Once you have these parameters and the file data in your MVC controller method, it's just a matter of copy and pasting most of the code from the HttpHandler.

It's probably not so hard to do. Let me know if you're going to implement this. It would be great if you could share your code so I can include it in the project.

Aug 27, 2012 at 10:21 AM

I guess that could be done but where do we wire the XAP control up with the MVC controller? This is what we have now in a partial view:

	<object id="MultiFileUploader" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="930" height="350">
		<param name="source" value="/ClientBin/mpost.SilverlightMultiFileUpload.xap" />
		<param name="onerror" value="onSilverlightError" />
		<param name="initParams" value="MaxFileSizeKB=10000,MaxUploads=1,FileFilter=,ChunkSize=4194304,CustomParams=@Model.ContentType;@Model.Culture;@Model.Id,DefaultColor=White" />
		<param name="background" value="white" />
		<param name="onload" value="pluginLoaded" />
		<param name="minRuntimeVersion" value="4.0.50401.0" />
		<param name="autoUpgrade" value="true" />
		<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
			<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
					 style="border-style: none" />
		</a>
	</object>

 As I said, it works with a handler but how to point it to controller?


Coordinator
Aug 31, 2012 at 11:31 AM

You can point it to a different handler/controller by using the InitParams and include the UploadHandlerName key.

See the documentation:
http://www.michielpost.nl/Silverlight/MultiFileUploader/

For an example, see the included PHP sample page, where it points to a php file that handles the upload.

Sep 9, 2012 at 4:39 PM
Edited Sep 9, 2012 at 10:30 PM

I've found some time and I can do this now, if you provide some additional help.

Ok, this is the line in the PHP file you are talking about but I have no clue what to write there for UploadHandlerName:

   <param name="initParams" value="UploadHandlerName=PHPUpload.php,ChunkSize=4194304,DefaultColor=Green" />

Is it supposed to be just the controller name or what? My controller is in an Area called Admin and I prepared an action as below:

[HttpPost]
public ActionResult ProcessImageUpload(string file, string param, bool last, bool first, long offset) {}

?

UPDATE: Yes, this works - pointing it to a controller action, for instance /Admin/Product/ProcessImageUpload where Admin is the area name, Product is the controller's name and ProcessImageUpload action name.

I'll let you know if I make this working all the way..


Coordinator
Sep 10, 2012 at 7:27 AM

Yes, just change the URL of the UploadHandlerName.

For example: UploadHandlerName=http://yoursite/Upload/ProcessImageUpload

All data will then be sent to that controller. Not sure if it's a GET or POST request. If it's not working, remove the HttpPost attribute.

Sep 10, 2012 at 12:48 PM

I have it working. Where is the best place (where do you want it) for me to post those files?

Coordinator
Sep 10, 2012 at 1:37 PM

You can upload your files here as a patch:

http://slfileupload.codeplex.com/SourceControl/list/patches/upload

Or mail them to michiel@michielpost.nl. I'll integrate it into the sample project.

Sep 11, 2012 at 8:19 PM

I'm also trying to get this working in a MVC project, I've tried to follow whats been written in this post but I'm still having some issues. Are example files available yet?

Coordinator
Sep 11, 2012 at 8:48 PM

The MVC example project is available as seperate download:

http://slfileupload.codeplex.com/releases

Sep 11, 2012 at 11:44 PM

Thanks for that not sure how I missed it! I've now downloaded the MVC project but I can't get it to open in Visual Studio, I'm running VS 2010 pro but when I try and open the .sln file or the .csproj file I get the following error message "The project type is not supported by this installation.". 

Coordinator
Sep 12, 2012 at 6:54 AM

It's a .Net 4 project.  With MVC 4.

I can open it without problems in VS 2012.

Sep 12, 2012 at 9:36 AM

In VS2010 you have to install MVC 4 extensions. Here: http://www.microsoft.com/en-us/download/details.aspx?id=30683

HTH

From: mpost [email removed]
Sent: Wednesday, September 12, 2012 7:55 AM
To: Marko Hrovatič
Subject: Re: Using this within MVC application [SLFileUpload:393120]

From: mpost

It's a .Net 4 project. With MVC 4.

I can open it without problems in VS 2012.

Sep 13, 2012 at 1:55 PM

Thanks for the help guys I installed the MVC 4 extensions and the project opened fine. I've managed to get the control working withmy MVC app but I've run into another issue which I hoped someone could help with. What I want to do is automatically redirect the user to a page once the upload has completed (I'm using the single file control). I'm trying to do the redirect from the MVC Action I've copied my code below, as it stands the upload completes but no redirect happens. Any help would be appreciated.

        [HttpPost]
        public ActionResult UploadVideoFile(string file, string param, bool last, bool first, long offset)
        {
            // Get the file being uploaded
            var fileLength = HttpContext.Request.InputStream.Length;
            string videoID = string.Empty;

            // Check that we have a file to work with
            if (!string.IsNullOrWhiteSpace(file) && fileLength > 0)
            {
                // Handle video upload
                // Maybe add another check to make sure we're dealing with a video file??
                // this class handles file paths and file saving
                videoID = FileUploadHelpers.SaveVideoFile(HttpContext.Request.InputStream, file, Convert.ToInt32(User.Identity.Name), first, last, offset);

                //// If this is the last chunk then dont return a true value forward to step 2/3 with the videoID
                if (last && !string.IsNullOrWhiteSpace(videoID))
                    return RedirectToAction("AddVideoDetails", new { videoID = videoID });

                return Content(bool.TrueString);
            }

            return Content(bool.FalseString);
        }

Coordinator
Sep 13, 2012 at 2:00 PM

The server can't redirect the user, it only received the file data. It doesn't know when the client is finished uploading.

Only the (Silverlight) client knows when it is finished uploading. There's a javascript event which you can use. It fires when all files are finished uploading. See the Javascript integration sample included in the sample project (NOT the mvc sample project).

 

Sep 17, 2012 at 11:59 AM

Thanks for that, I had a go with using the Javascript event but I found it to be a bit unreliable. I had it set so when the upload had completed it would show a next button but while testing I found that sometimes the button would show and others it wouldn't but I couldn't seem to find a pattern to the behaviour. It could we be that I had missed something with the implementation but I've since changed the way the page works so the next button is now show all the time so the javascript event is now not necessary. 

The last thing I was wondering is when using the File Filter is it possible to set it to all video files instead of having to list them all individually?

Sep 17, 2012 at 12:05 PM

The control works by specifying file extensions to the file filter. The thing is, what do you understand under "all video files"? That'd be a different set for you, me, someone else. For instance, the VLC media player understands a couple dozen video files while on the other hand someone like me might just be interested in .mp4 or .wmv and might not even know what a .ogg is..

I don't think there's a definitive list of "all" video files.

HTH

Sep 17, 2012 at 12:08 PM

and, in general, when you upload something to the server, the server will have to process it. For instance, I only allow PNG, JPG and GIF image uploads coz that's what my server side code supports (to resize, compress, etc.), so I wouldn't want users to put huge TIFFs on server. I think the same goes with video..you have to think about it how will you use the uploaded files - if you are going to stream them online I bet you won't allow user to upload just anything he wants..

Sep 17, 2012 at 12:26 PM

Cheers for the response markoh, you make a good point and I was a bit lazy explaining. Your right there are only certain types of video files which I want to allow to be uploaded what I meant to say was is there a way of grouping all the file types I want to allow so the user doesn't have to change the file type on the file select window. So if I allow .mov, .mp4, .wmv and .mpg have it so the file type drop down says "video Files" and only those types would show. Does that make more sense? I know its possible as other apps/controls do this I was just seeing if its possible with this control.

Coordinator
Sep 17, 2012 at 1:08 PM
Edited Sep 18, 2012 at 12:29 PM

Yes, that's also possible with the FileFilter, just specify the string like this:

FileFilter=All Videos|*.mov;*.mp4;*.wmv;*.mpg

Michiel

 

Sep 18, 2012 at 12:16 PM

Cheers Michiel that worked a treat although it seems to have created a problem. Now when I click Select File and choose my file from the dialogue box I click OK but the control does not change to display the selected file and the Upload button it continues to display the Select File button. I've included my code below incase I've done something wrong which has caused this:

 

<div id="silverlightControlHost" >
        <object id="SingleFileUploader" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="500" height="50">
            <param name="source" value="@Url.Content("~/ClientBin/mpost.SilverlightSingleFileUpload.xap")" />
            <param name="onerror" value="onSilverlightError" />
            <param name="initParams" value="UploadHandlerName=EditProfile/UploadVideoFile,MaxFileSizeKB=2097152,FileFilter=All Videos|*.mov;*.mp4;*.wmv,*.mpg,*.avi,ChunkSize=512000,CustomParams=,DefaultColor=White" />
            <param name="background" value="white" />
            <param name="onload" value="pluginLoaded" />
            <param name="minRuntimeVersion" value="4.0.50401.0" />
		    <param name="autoUpgrade" value="true" />
		    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
 			    <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		    </a>
        </object>
        <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
    </div>

Coordinator
Sep 18, 2012 at 12:30 PM

Haven't tested your code yet, but I can spot a small typo. There should be a ; between the different filetypes, not a ","

Sep 18, 2012 at 12:43 PM
Edited Sep 18, 2012 at 12:44 PM

I've corrected that cheers, but still got the same problem.

Just a bit more detail that may help, the control worked fine up until I added the file filter types and altered the chunk size and MaxFileSize params

Coordinator
Sep 18, 2012 at 1:43 PM

The problem is with MaxFileSizeKB=2097152.

This was a bug, which was fixed May 18th, Changeset 76426.

I just updated the default release to 5.0.1. This contains the fix. So if you download the Silverlight files again, it should work.

Sep 18, 2012 at 1:47 PM
Edited Sep 18, 2012 at 1:53 PM

Great stuff I'll try that now and let you know....

.... Ok all tested and everything seems to be working as it should! Cheers, for the quick/fantastic help