Javascript problem

[John Robin Dove]

Hi Clifton,

This is not directly related to Powerpac but I'm completely baffled by this problem and I'd be most grateful if you could spare the time to give me your thoughts on this.

I am using an open source uploader to upload video files to the server. It has taken me a very long time to get it to do what I want it to do. It's almost perfect now but there's one BIG problem:

If I always upload files to the same directory on the server everything works. But I figure that if my app has multiple users it would be a mistake to use the same directory for all users so each user must have a separate directory for uploaded files. My system is as follows:

- I create a directory with the required name in the user's directories to receive the file to be uploaded.
- I upload the file to the user's directory for uploaded files (which contains the appropriate php file - this is a very complicated file but I have tested it and I know it works anywhere on the server).
- I then use another php file on the server to move the uploaded file from the user's directory for uploaded files to the newly created directory. (The user's directory for uploaded files is then empty again.)

All this works! So what is the problem?

The problem is is the javascript code I in an embedded html I load with pgGotoURL()

Here is the (Jquery) part that does the uploading:

Code: Select all

// This does the uploading.
$(document).ready(function() {
'use strict';
    $('#fileupload').fileupload({
        url: theURL,
        maxFileSize: sizeLimit,
        acceptFileTypes: /(\.|\/)(mp3|ogg|mp4|mov|flv|gif|jpe?g|png)$/i,
          add : function(e,data){
             $("#test").on("click",function(){
            if (preventUpload == false) {
             data.submit();
            } else {
            alert ("This type of file cannot be uploaded.")
            }
            })
          },
        done: function(e, data) {
        moveFile();
        },
             progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%'
            );
        }   
    });
});

theURL is a global variable. If I define this variable in advance in the script section of the html like this: var theURL = "Mimine's_Academy/teachers/BLOGGS_Bill/perso/"; there is no problem. The jquery function accepts the variable
theURL and the task is completed seamlessly. However this is not what I want. I want to define theURL dynamically like this:

Code: Select all

function uploadFile(uploadFolder) {
theURL = uploadFolder;
obj = document.getElementById("startUpload");
obj.click();
}

It doesn't work. I don't understand why because when I include this:

Code: Select all

function uploadFile(uploadFolder) {
if(uploadFolder === theURL) {
alert("the same");
} else {
alert("not the same");
}
theURL = uploadFolder;
obj = document.getElementById("startUpload");
obj.click();
}

The alert displays the same (!!!) So why doesn't the variable theURL function in this case? Could it be some kind of security restriction that rejects the variable if it's just been redefined?

I'm hoping you might have some clue. I haven't! The only other way I could make it work would be to copy the whole uploading html into every user's folder but it seems a bit excessive.

[Clifton]

Code: Select all

function uploadFile(uploadFolder) {
if(uploadFolder === theURL) {
alert("the same");
} else {
alert("not the same");
}
theURL = uploadFolder;
obj = document.getElementById("startUpload");
obj.click();
}


In the code above, I would check the value of [theURL] directly. I think you may find that the variable you think is global is actually either local or only global within a certain context or namespace.

Try verifying this by using this alert line:
alert("uploadFolder: " + uploadFolder + "\ntheURL: " + theURL);

My guess is that the variables appear the same when in fact they are both undefined. I can't tell from your submitted code when in the stream you have actually declared [theURL] as a global variable. Plus, you must remember that even if it is a global variable that does not mean it is global outside of the web page (or namespace) wherein it is defined as such.

[John Robin Dove]

Thanks Clifton,

I'm sure you're right but I can't understand how the variable becomes undefined. Here's the complete code.

Code: Select all

<!DOCTYPE HTML>
<!--
/*
 * jQuery File Upload Plugin Basic Demo 1.3.0
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="date" content="2014-10-13T09:06:56+00:00">
<meta charset="utf-8">
<title>Useful Upload</title>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <!--div class="progress-bar progress-bar-success"></div-->
        <div class="progress-bar"></div>
    </div>
    <!--form id="fileupload" action="http://localhost/server/php/index.php" method="POST" enctype="multipart/form-data"-->
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
    <br>
    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn fileinput-button">
        <!--i class="glyphicon glyphicon-plus"></i>
        <!--span>Select files...</span-->
        <!-- The file input field used as target for the file upload widget -->
        <input onchange="getFileName()" id="fileupload" type="file" name="files[]"/>
        <!-- THE ORIGINAL LINE BELOW ALLOWED MULTIPLE FILE SELECTION -->
        <!--input id="fileupload" type="file" name="files[]" multiple-->
    </span>
    <!--button type="submit" id="U">Upload</button-->
    <!--/form-->
<button id="startUpload">Uploader</button>

<!--button onclick="openFile" id="open">Open</button-->

<BR>&nbsp;<BR>
<blockquote>
<p>
 Adaptation of the free multipurpose blueimp uploading tool.
<p>
 Functions added:<br><br>openFile()<br> getFileName()<br> setToZero()<br> makeFolders()
 <br> moveFile()
</p>

</blockquote>

<blockquote>
&nbsp;&nbsp;&nbsp;REQUIRED FILES:<br>
<li>css/bootstrap.min.css</li> <br>
<li>js/vendor/jquery.ui.widget.js</li> <br>
<li>js/jquery.fileupload.js</li>
<li>js/jquery.fileupload-process.js</li>
<li>js/jquery.fileupload-validate.js</li>
<li>js/jquery.iframe-transport.js</li>
<li>js/jquery-1.11.0.min.js</li>
<li>js/load-image.all.min.js</li>
</blockquote>

<script src="js/jquery-1.11.0.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/load-image.all.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>

<script>

var fileName;
var sizeLimit = 16000000;
var preventUpload = false;
// If I leave the line below it works.
var theURL  = "Mimine's_Academy/teachers/BLOGGS_Bill/perso/";
// var theURL;    ut like this it doesn't.

function reload() {
location.reload();
}

function openFile() {
preventUpload = false;
var obj = document.getElementById("fileupload");
obj.click();
}

function uploadFile(uploadFolder) {
// if(uploadFolder === theURL) {
// alert("the same");
// } else {
// alert("not the same");
// }
theURL = uploadFolder;
obj = document.getElementById("startUpload");
obj.click();
}

function discardFile() {
preventUpload = true;
var obj = document.getElementById("fileupload");
obj.value = "";
}

function getFileName() {
var obj = document.getElementById("fileupload");
fileName = obj.files[0].name;
var fileSize = obj.files[0].size;
// alert(fileName + " " + fileSize);
top.tbfunction_pgTBObjSet("exerciseName","text", fileName + "," + fileSize);
top.tbfunction_pgTBObjSet("exerciseName","trigger");
}

function setToZero() {
$('#progress .progress-bar').css('width', '0');
}

function moveFile(){
top.tbfunction_pgTBObjSet("upload","trigger");
}
// This does the uploading.
$(document).ready(function() {
'use strict';
    $('#fileupload').fileupload({
        url: theURL,
        maxFileSize: sizeLimit,
        acceptFileTypes: /(\.|\/)(mp3|ogg|mp4|mov|flv|gif|jpe?g|png)$/i,
          add : function(e,data){
             $("#startUpload").on("click",function(){
            if (preventUpload == false) {
             data.submit();
            } else {
            alert ("This type of file cannot be uploaded.")
            }
            })
          },
        done: function(e, data) {
        moveFile();
        },
             progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%'
            );
        }   
    });
});
</script>
</body>
</html>

[John Robin Dove]

Hi Clifton,

I have decided to cut my losses and use a copy of the html file adapted for each user. I have found a way to load all the js script files when the html opens so I only need one set of js files. I guess one extra html file for each user is not a big deal. Thanks anyway.

[Clifton]

Ran a few tests on this and what I think may be happening is that your function is being called with an the parameter called uploadFolder unset which causes undefined to always equal undefined at this logic:
if (uploadFolder === theURL) { ... }

However, when you predefine the variable theURL then the logic will work as expected because when an undefined parameter is found, the function at least knows what to do. Consequently, I think you need some additional logic to catch some conditions when the page initializes.

For a web application, you are likely going to have all users save their personal files to subfolders of the same parent folder. So realistically all you need to do is to append the personal subfolder location with the parent (which can be pre-assigned in the variable theURL).

Anyway, glad you found a workaround.