PHP file upload inside modal window

Question

I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>    
<style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        /*background-image: url(/images/page.png);*/
        background-position: 0 1px;
        background-repeat: no-repeat;
        padding-left: 20px;
    }

    a {
        color: #000000;
        cursor: pointer;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .hidden {
    display:none;
    }
</style>
<script src="/js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        function addLine(what) {
            $("#" + what).append('<li>URL to uploaded document</li>');
        };

        function myToggle(what){
            $("#" + what).toggleClass('hidden');
        };
</script>
</head>

<body>
    <ul>
        <li class="folder">
            <a href="#" onClick="myToggle('Test1');">Test</a>
            <ul class="hidden" id="Test1">
                <li class="folder">
                    <a href="#" onClick="myToggle('Test1-2');">Test1-2</a>
                    <ul class="hidden" id="Test1-2">
                        <li>
                            <a href="#" onClick="addLine('Question1');">This is Question 1</a>
                            <ul id="Question1"></ul>
                        </li>
                        <li>
                            <a href="#" onClick="addLine('Question2');">This is Question 2</a>
                            <ul id="Question2"></ul>
                        </li>
                        <li>
                            <a href="#" onClick="addLine('Question3');">This is Question 1</a>
                            <ul id="Question3"></ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

What exactly is the problem, the modal window or the file upload? Either way it seems to broad because there is nothing of either yet. — jeroen, Jun 03 '14 at 01:42
Sorry, about that. The issue is create a modal window to upload a file. — James, Jun 04 '14 at 03:44

cssyphus · Accepted Answer · 2014-06-05T18:27:36.820

Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:

http://hayageek.com/docs/jquery-upload-file.php

To make the dialog modal, you just need to create a div like this:

<div id="myOverlay"></div>

and style it like this:

#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}

The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.

Making a dialog modal really is that simple.

So, using Ravi's code, you just show a DIV like this:

See This jsFiddle Demo

HTML:

<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

<div id="myOverlay"></div>
<div id="box">
    <div id="box-inside-div">
        <div id="fileuploader"></div>
    </div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
     <h1>Upload a File Page</h1>

    <p>To upload a file, click the button below</p>
    <input type="button" id="myButt" value="Upload" />
</div>

CSS:

/*  #myOverlay on two lines for readability in this SO answer  */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}

jQuery/javascript:

$(document).ready(function() {
    $('#myButt').click(function () {
        $('#myOverlay').show();
        $("#box").show();
        $("#fileuploader").uploadFile({
            url: "upload_recv.php",
            fileName: "myfile",
            onError: function(files,status,errMsg){
                /* onError because (1) jsFiddle cannot do ajax */
                /* AND (2) there is no upload_recv.php file! */
                $('#myOverlay').hide();
                $('#box').hide();
                alert('The file is now on the server');
            }
        });
    });//END mybutt.click
});

When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.

For more information on how to do that, see the demos on the HayAGeek page.

And finally . . . how to process the file on the server once uploaded?

This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php

On the HeyaGeek demo page, see Server Side at the top right.

Thank you for your help. With your help I believe I have a basic grasp on the modal window. The only issue I have now, is with your example. All of the
s align horizontally instead of on top of each other. Is there something I am missing? — James, Jun 04 '14 at 21:10
I didn't test my code, just stuck it up as example, but if the DIVs aren't aligning properly, it may be css. Here's a refresher : within normal HTML flow, `
one
two
` will align vertically. `
one
two
` should stack on top of each other (3D). Using CSS, you can remove any div from flow and place wherever you want. Example: `
one
two
` will put div2 on top of div1 (3D stacking). Finally, there is css `z-index`, which determines *which* div is on top (3D stacking). HTH — cssyphus, Jun 05 '14 at 17:24
[Here is a jsFiddle example](http://jsfiddle.net/uKvE2/) for this question. Note that additional DIVs were created in order to correctly position and style the fileuploader div. CSS absolute positioning and z-index were also used. When having difficulty positioning elements on the screen, try putting the difficult element inside another DIV and style that. ALL elements should be in divs. Also note changes to the #myOverlay css. (jsFiddle example also added to the question itself for future readers). — cssyphus, Jun 05 '14 at 18:09

PHP file upload inside modal window

1 Answers1

Linked