.net handler (ashx) for Fineuploader

Question

I am looking at FineUploader for a DNN web site.

I have a basic handler that seems to work fine:

    public void ProcessRequest(HttpContext context)
    {
        try
        {
            var UserId = context.Request["userId"];
            var PortalId = context.Request["portalId"];
            //var UserAgent = context.Request["userAgent"];

            context.Response.ContentType = "text/plain";

            var tempPath = "~/Portals/" + PortalId + "/some-documents/users/" + UserId;
            var dirFullPath = context.Server.MapPath(tempPath);


            foreach (string s in context.Request.Files)
            {
                var file = context.Request.Files[s];
                var fileName = file.FileName;
                var fileExtension = file.ContentType;

                if (string.IsNullOrEmpty(fileName)) continue;
                var pathToSave_100 = HttpContext.Current.Server.MapPath(tempPath) + "\\" + fileName;
                file.SaveAs(pathToSave_100);

            }

            context.Response.StatusCode = (int) HttpStatusCode.OK;
            context.Response.Write("{\"success\":true}");

        }

        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }

The problem is that there are no example .ashx type handlers in the github repo for FineUploader: https://github.com/FineUploader/server-examples

I would like to know if anyone has a more comprehensive one? I am concerned about accommodating IE and returning proper error messages to the client.

Are you familiar with .NET? If so, the document at http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html should be a good guide for building your request handler. Or you could model it after the [PHP](https://github.com/FineUploader/php-traditional-server), or [Java](http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html), or [Node.JS](https://github.com/FineUploader/server-examples/tree/master/nodejs) endpoint handlers in the Fine Uploader organization. But Stack Overflow isn't a place where someone will just post the code for you... — Ray Nicholus, Apr 11 '16 at 22:26
...if you make an attempt to write a .NET handler and then post it here, others familiar with .NET and Fine Uploader can help you address any issues you have identified. Another option is to write your .NET endpoint handler, issue a pull request against [Fine Uploader's server-examples repo](https://github.com/FineUploader/server-examples), and the maintainers can help you work out any bugs with your implementation. — Ray Nicholus, Apr 11 '16 at 22:27
Thanks Ray. I am a bit confused by your comments though. I am familiar with .NET and I yes have posted my handler code?? can you not see it? But thanks for the tips. — Norbert Norbertson, Apr 11 '16 at 22:34
Then what exact problem are you seeing/trying to solve? What does "more comprehensive" mean? Please be _specific_. — Ray Nicholus, Apr 11 '16 at 22:50
ok. "I am concerned about accommodating IE and returning proper error messages to the client." By that I mean looking at some of the example code in VB there is different handling for IE. Can anyone explain this and what should I do in my C# code? Additionally, I need to be sure that I am handling error messages better. I can see from the endpoint documentation now the json that fineuploader is expecting to receive back from the server so I will use that to refine my code. I will also create a pull request for my handler and see if anyone responds. — Norbert Norbertson, Apr 12 '16 at 07:46
This the from the VB.NET sample code controller. I assume this is some version of MVC : https://github.com/FineUploader/server-examples/blob/master/ASP.Net_VB/UploadController.vb There is a section with a comment "we need to handle IE a bit differently". — Norbert Norbertson, Apr 12 '16 at 07:50

score 1 · Answer 1 · answered May 26 '17 at 17:13

Please see my post here about the example for server side ( non MVC ).ashx handler.

How to use Fine Uploader server-side in a non-MVC ASP.NET application

For IE you have to handle the file name differently. See below code snippet:

HttpPostedFile uploadedfile = context.Request.Files[0];
string[] paths = uploadedfile.FileName.Split('\\'); // needed for IE browser
filename = paths[paths.Length - 1];

hope this helps.

Máster · Answer 2 · 2018-05-18T21:08:04.133

This might be late, but I got the FineUploader plugin working on ASP.NET WebForms Handler (ashx) taking code from here and there. I converted to VB, It should'n be hard to translate it back to C#:

Upload.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Upload.aspx.vb" Inherits="Upload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!-- Fine Uploader New/Modern CSS file
    ====================================================================== -->
    <link href="plugins/fine-uploader/fine-uploader-new.css" rel="stylesheet" />

    <!-- Fine Uploader JS file
    ====================================================================== -->
    <script src="/plugins/fine-uploader/fine-uploader.js"></script>

    <!-- Fine Uploader Thumbnails template w/ customization
    ====================================================================== -->
    <script type="text/template" id="qq-template-manual-trigger">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="buttons">
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>Select files</div>
                </div>
                <button type="button" id="trigger-upload" class="btn btn-primary">
                    <i class="icon-upload icon-white"></i> Upload
                </button>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale />
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"/>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

    <style>
        #trigger-upload {
            color: white;
            background-color: #00ABC7;
            font-size: 14px;
            padding: 7px 20px;
            background-image: none;
        }

        #fine-uploader-manual-trigger .qq-upload-button {
            margin-right: 15px;
        }

        #fine-uploader-manual-trigger .buttons {
            width: 36%;
        }

        #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
            width: 60%;
        }
    </style>

    <title>Fine Uploader Manual Upload Trigger Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <!-- Fine Uploader DOM Element
        ====================================================================== -->
        <div id="fine-uploader-manual-trigger"></div>

        <!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
        ====================================================================== -->
    </form>

    <script>
        var manualUploader = new qq.FineUploader({
            element: document.getElementById('fine-uploader-manual-trigger'),
            template: 'qq-template-manual-trigger',
            request: {
                endpoint: 'Upload.ashx'
            },
            thumbnails: {
                placeholders: {
                    waitingPath: '/plugins/fine-uploader/placeholders/waiting-generic.png',
                    notAvailablePath: '/plugins/fine-uploader/placeholders/not_available-generic.png'
                }
            },
            autoUpload: false,
            debug: true
        });

        qq(document.getElementById("trigger-upload")).attach("click", function() {
            manualUploader.uploadStoredFiles();
        });
    </script>
</body>
</html>

Upload.ashx

<%@ WebHandler Language="VB" Class="Upload" %>

Imports System
Imports System.Web
Imports System.IO

Public Class Upload : Implements IHttpHandler, System.Web.SessionState.IReadOnlySessionState

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Try
            UploadFile(context)
            context.Response.Write("{""success"":true, ""msg"":""upload successfully!""}")
        Catch ex As Exception
            context.Response.Write("{""error"":""An error message""}")
        End Try
    End Sub

    Private Sub UploadFile(ByVal context As HttpContext)
        For Each s As String In context.Request.Files
            Dim file = context.Request.Files(s)
            Dim fileName = file.FileName
            Dim fileExtension = file.ContentType

            If String.IsNullOrEmpty(fileName) Then
                'TODO: Warning!!! continue If                
                Throw New System.Exception("File null or empty")
            End If

            Dim pathToSave = "C:\TEMP\" + fileName ' Or -> (HttpContext.Current.Server.MapPath(tempPath) + ("\" + fileName))
            file.SaveAs(pathToSave)

            ' *** Database operations here ***
            '=================================
            ' Dim userid As String = HttpContext.Current.Session("UserID").ToString()
            ' RegisterFileToDatabase(userid, fileName)
            ' ...
            ' ...
        Next
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

Upload.aspx.vb (Nothing added)

Imports System.Net
Imports System.IO

Partial Class Upload
    Inherits System.Web.UI.Page

End Class

Example screenshot

To handle bigger files you'll have to modify your web.config file:

Maximum request length exceeded.

References:

This question.

https://github.com/FineUploader/fine-uploader/issues/405

https://github.com/FineUploader/server-examples/issues/46

How to use Fine Uploader server-side in a non-MVC ASP.NET application

How to use Fine Uploader js framework with ajax

Using Fineuploader with ASP.NET webforms. access to strict mode caller function is censored

.net handler (ashx) for Fineuploader

2 Answers2