using dropzone.js in webform with master page

StackOverflow https://stackoverflow.com/questions/20114916

Question

I'm trying to get the dropzonejs script to work in a asp.net site with master page and child webforms. I got a good idea how to from this question but that works on a simple webform..how do I get it to work on an aspx page that has a master page?

So my masterpage right now has this:

<body class="fixed-top">
     <form id="form1" runat="server" autocomplete="off" class="dropzone">
       <div id="container">
            <div id="body">
                <div class="container-fluid">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
                </div>
             </div>
        </div>
     </form>
</body>

and in my aspx page I have this:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <h3 class="page-title">Filemanager</h3>
     <div class="box"> <!--INSIDE THIS IS WHERE I WOULD WANT DROPZONE TO LOAD-->
        <div>
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </div>
</asp:Content>

the problem is that it loads but outside the containers..any ideas?

Was it helpful?

Solution

I was able to make it work in a Master/Child page scenario.

  1. Since I am using a div element instead of the form element in the child page, I need to assign the url as an option. (see script block below)

  2. Make sure give your form element the class="dropzone", it is missing in your code.

    <script type="text/javascript">
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        url: "/user/tasks/photoupload.aspx?tid=<%=Request.QueryString["tid"]%>"
    };
</script>

<div id="my-awesome-dropzone" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple="multiple" runat="server"/>
        <input name="btnUpload" type="submit" /><br /><br />
        <asp:Label id="lblFallbackMessage" runat="server" />
    </div>
</div>

Good luck.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top