locked
fileupload javascript accessing formData in handler page RRS feed

  • Question

  • User-153404742 posted

    I have the following javascript for fileUpload (using blueimp file upload)

     $("#fileupload").fileupload({
                    formData: function () {
                        return [
                            {
                                name: "folderId",
                                value: manager.currentFolderId(),
                            },

    ....and so on

    I have the following on aspx page

    <div class="box-body dropzone">
                      <input id="fileupload" type="file" name="files[]" data-url="UploadFiles.ashx"
                        multiple class="inputfile" />
                      <div id="files"></div>
                    </div>

    My question is, how do I access the formData from the javascript to get the name and value in the UploadFiles page?  formData comes undefined if I try to access it....

    name: "folderId",
    value: manager.currentFolderId(),

    Thursday, October 8, 2020 4:28 PM

All replies

  • User-474980206 posted

    in the form collection, there should be a entry named "folderId".

    Thursday, October 8, 2020 6:14 PM
  • User-153404742 posted

    it's coming out as null when I try accessing it in code behind as well as aspx page. Request.Form["folderId"];

    Thursday, October 8, 2020 8:49 PM
  • User-474980206 posted

    you should use the browsers network debugger and see that it is a standard multipart form post.  if you used the chunks feature, you need custom code on the server.  

    Thursday, October 8, 2020 10:38 PM
  • User1686398519 posted

    Hi inkaln, 

    Do you want to add additional form data?You can use it like this: 

    formData: {folderId: "test"}

    If you want to know more explanation and usage, you can refer to the following links:

    1. How to submit additional form data
    2. formdata

    More details, you could refer to below code:

    Page

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DailyWebFormsDemo.WebForm1" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <style>
    .file {
       ;
       background: linear-gradient(to right, lightblue 50%, transparent 50%);
       background-size: 200% 100%;
       background- bottom;
       transition:all 1s ease;
    }
     .file.done {
       background: lightgreen;
    }
     .file a {
       display: block;
       ;
       padding: 5px;
       color: black;
    }
        </style>    
    </head>
    <body>
        <form id="form1" runat="server" enctype="multipart/form-data">
            <div class="box-body dropzone">
                <input id="fileupload" type="file" name="files[]"  data-url="UploadFiles.ashx" multiple/>
                <div id="files"></div>
            </div>
            <div id="progress">
                <div class="bar" style="width: 0%;"></div>
                </div>
            <button id="uploadbutton">upload</button>    
            </form>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/js/vendor/jquery.ui.widget.js"></script>
    <script src="Scripts/js/jquery.iframe-transport.js"></script>
    <script src="Scripts/js/jquery.fileupload.js"></script>
    <script>
        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                add: function (e, data) {
                    data.context = $('<p class="file"></p>')
                        .append($('<a target="_blank"></a>').text(data.files[0].name))
                        .appendTo(document.body);
                    data.submit();
                },
                progress: function (e, data) {
                    var progress = parseInt((data.loaded / data.total) * 100, 10);
                    data.context.css("background-position-x", 100 - progress + "%");
                },
                done: function (e, data) {
                    data.context
                        .addClass("done")
                        .find("a")
                        .prop("href", data.result.files[0].url);
                },
                formData: { folderId: "test" }
            });
        });
    </script>
    </body>
    </html>

    UploadFiles.ashx

    public class UploadFilesHandler : IHttpHandler
        {
            public void ProcessRequest(HttpContext context)
            {
                var t = context.Request.Form["folderId"];
                context.Response.ContentType = "text/plain";
                context.Response.Write("Hello World");
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }

    Here is the result.

    Best Regards,

    YihuiSun

    Friday, October 9, 2020 8:26 AM