Reputation: 2210

.net handler (ashx) for Fineuploader

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.

Upvotes: 1

Answers (2)

Máster

Reputation: 1001

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

Upvotes: 0

SanthoshM

Reputation: 491

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.

Upvotes: 1

.net handler (ashx) for Fineuploader

Answers (2)

Related Questions