Code Adjustment Help

fizzzgigg · December 23, 2010

I have a file uploading script that works fine on its own. However, when I try to embed it, it will no longer work. I think the matter is quite simple, but I just can't get it right. Here is the code:

<div>
		<form action="server/script.php" method="post" enctype="multipart/form-data" id="form-demo">

<fieldset id="demo-fallback">

	<label for="demo-photoupload">
		Upload a Photo:
		<input type="file" name="Filedata" />
	</label>
</fieldset>

<div id="demo-status" class="hide">
	<p>
		<a href="#" id="demo-browse">Browse Files</a> |
		<a href="#" id="demo-clear">Clear List</a> |
		<a href="#" id="demo-upload">Start Upload</a>
	</p>
	<div>
		<strong class="overall-title"></strong><br />
		<img src="assets/progress-bar/bar.gif" class="progress overall-progress" />
	</div>
	<div>
		<strong class="current-title"></strong><br />
		<img src="assets/progress-bar/bar.gif" class="progress current-progress" />
	</div>
	<div class="current-text"></div>
</div>

<ul id="demo-list"></ul>

</form>		</div>


</div>

The problem lies in the "<a href="#" id="demo-upload">Start Upload</a>" what should I type instead of the #? Or is this not the problem?

litebearer · December 23, 2010

Some bleary-eyed observations...

1. where is your SUBMIT?

2. the divs, from what you have shown are 'unbalanced'

3. have you tried commoneting out that portion you feel is causine the problem(s)?

fizzzgigg · December 23, 2010

Let me paste the whole thing. The script works just fine. I want to embed it into my site without the user having a pop-up.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Queued Photo Uploader - Standalone Showcase from digitarald.de</title>

<meta name="author" content="Harald Kirschner, digitarald.de" />
<meta name="copyright" content="Copyright 2009 Harald Kirschner" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js"></script>

<script type="text/javascript" src="source/Swiff.Uploader.js"></script>

<script type="text/javascript" src="source/Fx.ProgressBar.js"></script>

<script type="text/javascript" src="http://github.com/mootools/mootools-more/raw/master/Source/Core/Lang.js"></script>

<script type="text/javascript" src="source/FancyUpload2.js"></script>


<!-- See script.js -->
<script type="text/javascript">
	//<![CDATA[

	/**
* FancyUpload Showcase
*
* @license		MIT License
* @author		Harald Kirschner <mail [at] digitarald [dot] de>
* @copyright	Authors
*/

window.addEvent('domready', function() { // wait for the content

// our uploader instance 

var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
	// we console.log infos, remove that in production!!
	verbose: true,

	// url is read from the form, so you just have to change one place
	url: $('form-demo').action,

	// path to the SWF file
	path: 'source/Swiff.Uploader.swf',

	// remove that line to select all files, or edit it, add more items
	typeFilter: {
		'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
	},

	// this is our browse button, *target* is overlayed with the Flash movie
	target: 'demo-browse',

	// graceful degradation, onLoad is only called if all went well with Flash
	onLoad: function() {
		$('demo-status').removeClass('hide'); // we show the actual UI
		$('demo-fallback').destroy(); // ... and hide the plain form

		// We relay the interactions with the overlayed flash to the link
		this.target.addEvents({
			click: function() {
				return false;
			},
			mouseenter: function() {
				this.addClass('hover');
			},
			mouseleave: function() {
				this.removeClass('hover');
				this.blur();
			},
			mousedown: function() {
				this.focus();
			}
		});

		// Interactions for the 2 other buttons

		$('demo-clear').addEvent('click', function() {
			up.remove(); // remove all files
			return false;
		});

		$('demo-upload').addEvent('click', function() {
			up.start(); // start upload
			return false;
		});
	},

	// Edit the following lines, it is your custom event handling

	/**
	 * Is called when files were not added, "files" is an array of invalid File classes.
	 * 
	 * This example creates a list of error elements directly in the file list, which
	 * hide on click.
	 */ 
	onSelectFail: function(files) {
		files.each(function(file) {
			new Element('li', {
				'class': 'validation-error',
				html: file.validationErrorMessage || file.validationError,
				title: MooTools.lang.get('FancyUpload', 'removeTitle'),
				events: {
					click: function() {
						this.destroy();
					}
				}
			}).inject(this.list, 'top');
		}, this);
	},

	/**
	 * This one was directly in FancyUpload2 before, the event makes it
	 * easier for you, to add your own response handling (you probably want
	 * to send something else than JSON or different items).
	 */
	onFileSuccess: function(file, response) {
		var json = new Hash(JSON.decode(response, true) || {});

		if (json.get('status') == '1') {
			file.element.addClass('file-success');
			file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
		} else {
			file.element.addClass('file-failed');
			file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
		}
	},

	/**
	 * onFail is called when the Flash movie got bashed by some browser plugin
	 * like Adblock or Flashblock.
	 */
	onFail: function(error) {
		switch (error) {
			case 'hidden': // works after enabling the movie and clicking refresh
				alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
				break;
			case 'blocked': // This no *full* fail, it works after the user clicks the button
				alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
				break;
			case 'empty': // Oh oh, wrong path
				alert('A required file was not found, please be patient and we fix this.');
				break;
			case 'flash': // no flash 9+ 
				alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
		}
	}

});

});
	//]]>
</script>



<!-- See style.css -->
<style type="text/css">
	/**
* FancyUpload Showcase
*
* @license		MIT License
* @author		Harald Kirschner <mail [at] digitarald [dot] de>
* @copyright	Authors
*/

/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
display: none !important;
}

/* .hover simulates the flash interactions */
a:hover, a.hover {
color: red;
}

#demo-status {
padding: 10px 15px;
width: 420px;
border: 1px solid #eee;
}

#demo-status .progress {
background: url(assets/progress-bar/progress.gif) no-repeat;
background-position: +50% 0;
margin-right: 0.5em;
vertical-align: middle;
}

#demo-status .progress-text {
font-size: 0.9em;
font-weight: bold;
}

#demo-list {
list-style: none;
width: 450px;
margin: 0;
}

#demo-list li.validation-error {
padding-left: 44px;
display: block;
clear: left;
line-height: 40px;
color: #8a1f11;
cursor: pointer;
border-bottom: 1px solid #fbc2c4;
background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}

#demo-list li.file {
border-bottom: 1px solid #eee;
background: url(assets/file.png) no-repeat 4px 4px;
overflow: auto;
}
#demo-list li.file.file-uploading {
background-image: url(assets/uploading.png);
background-color: #D9DDE9;
}
#demo-list li.file.file-success {
background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
background-image: url(assets/failed.png);
}

#demo-list li.file .file-name {
font-size: 1.2em;
margin-left: 44px;
display: block;
clear: left;
line-height: 40px;
height: 40px;
font-weight: bold;
}
#demo-list li.file .file-size {
font-size: 0.9em;
line-height: 18px;
float: right;
margin-top: 2px;
margin-right: 6px;
}
#demo-list li.file .file-info {
display: block;
margin-left: 44px;
font-size: 0.9em;
line-height: 20px;
clear
}
#demo-list li.file .file-remove {
clear: right;
float: right;
line-height: 18px;
margin-right: 6px;
}	</style>


</head>
<body>

<div class="container">
<!-- See index.html -->
	<div>
		<form action="server/script.php" method="post" enctype="multipart/form-data" id="form-demo">

<fieldset id="demo-fallback">

	<label for="demo-photoupload">
		Upload a Photo:
		<input type="file" name="Filedata" />
	</label>
</fieldset>

<div id="demo-status" class="hide">
	<p>
		<a href="#" id="demo-browse">Browse Files</a> |
		<a href="#" id="demo-clear">Clear List</a> |
		<a href="#" id="demo-upload">Start Upload</a>
	</p>
	<div>
		<strong class="overall-title"></strong><br />
		<img src="assets/progress-bar/bar.gif" class="progress overall-progress" />
	</div>
	<div>
		<strong class="current-title"></strong><br />
		<img src="assets/progress-bar/bar.gif" class="progress current-progress" />
	</div>
	<div class="current-text"></div>
</div>

<ul id="demo-list"></ul>

</form>		</div>


</div>
</body>
</html>

I also have the script.php here as well.

<?php
include('../../functions.php');

// Request log

/**
* You don't need to log, this is just for the showcase. Better remove
* those lines for production since the log contains detailed file
* information.
*/

$result = array();

$result['time'] = date('r');
$result['addr'] = substr_replace(gethostbyaddr($_SERVER['REMOTE_ADDR']), '******', 0, 6);
$result['agent'] = $_SERVER['HTTP_USER_AGENT'];

if (count($_GET)) {
$result['get'] = $_GET;
}
if (count($_POST)) {
$result['post'] = $_POST;
}
if (count($_FILES)) {
$result['files'] = $_FILES;
}

// we kill an old file to keep the size small
if (file_exists('script.log') && filesize('script.log') > 102400) {
unlink('script.log');
}

$log = @fopen('script.log', 'a');
if ($log) {
fputs($log, print_r($result, true) . "\n---\n");
fclose($log);
}


// Validation

$error = false;

if (!isset($_FILES['Filedata']) || !is_uploaded_file($_FILES['Filedata']['tmp_name'])) {
$error = 'Invalid Upload';
}

/**
* You would add more validation, checking image type or user rights.
*

if (!$error && $_FILES['Filedata']['size'] > 2 * 1024 * 1024)
{
$error = 'Please upload only files smaller than 2Mb!';
}

if (!$error && !($size = @getimagesize($_FILES['Filedata']['tmp_name']) ) )
{
$error = 'Please upload only images, no other files are supported.';
}

if (!$error && !in_array($size[2], array(1, 2, 3, 7,  ) )
{
$error = 'Please upload only images of type JPEG, GIF or PNG.';
}

if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
$error = 'Please upload an image bigger than 25px.';
}
*/


// Processing

/**
* Its a demo, you would move or process the file like:
*
* move_uploaded_file($_FILES['Filedata']['tmp_name'], '../uploads/$loggedin/' . $_FILES['Filedata']['name']);
* $return['src'] = '/uploads/$loggedin' . $_FILES['Filedata']['name'];
*
* or
*
* $return['link'] = YourImageLibrary::createThumbnail($_FILES['Filedata']['tmp_name']);
*
*/

if ($error) {

$return = array(
	'status' => '0',
	'error' => $error
);

} else {

$return = array(
	'status' => '1',
	'name' => $_FILES['Filedata']['name']
);

// Our processing, we get a hash value from the file
$return['hash'] = md5_file($_FILES['Filedata']['tmp_name']);

// ... and if available, we get image data
$info = @getimagesize($_FILES['Filedata']['tmp_name']);


// Specify directory path for your images directory
session_start();
$pid = $_SESSION['pid'];
$assignmentid = $_SESSION['assignmentid'];
      
      $upload_directory  = $_SERVER[DOCUMENT_ROOT] ."/file_upload/uploads/$loggedin/$pid/";
      $fileLoc="file_upload/uploads/$loggedin/$pid/";
      
        // Check that the images directory exists
        if(file_exists($upload_directory))
        {          
            // Upload file or return error message information
            
            $fileUrl = $fileLoc .$_FILES[Filedata][name];
            mysql_query("INSERT INTO `homework` SET `uid`='$loggedin', `pid`='$pid', `url`='$fileUrl', `approved`='0'"); 
            
            
            if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }
        else
        {
        mkdir("../uploads/$loggedin/$pid", 0777);
         // Upload file or return error message information
            
            $fileUrl = $fileLoc .$_FILES[Filedata][name];
            mysql_query("INSERT INTO `homework` SET `uid`='$loggedin', `pid`='$pid', `url`='$fileUrl', `approved`='0'");
            
            
            if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }


if ($info) {
	$return['width'] = $info[0];
	$return['height'] = $info[1];
	$return['mime'] = $info['mime'];
}

}


// Output

/**
* Again, a demo case. We can switch here, for different showcases
* between different formats. You can also return plain data, like an URL
* or whatever you want.
*
* The Content-type headers are uncommented, since Flash doesn't care for them
* anyway. This way also the IFrame-based uploader sees the content.
*/

if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml') {
// header('Content-type: text/xml');

// Really dirty, use DOM and CDATA section!
echo '<response>';
foreach ($return as $key => $value) {
	echo "<$key><![CDATA[$value]]></$key>";
}
echo '</response>';
} else {
// header('Content-type: application/json');

echo json_encode($return);
}

?>

Right now I want these two files to work in my major site. I have taken the first script (html script) and when the site calls that site it pulls it from sql. So I am sure that fact that its being pulled from SQL makes it a little more challenging.

Adam

fizzzgigg · December 23, 2010

Well I ended up just using an iFrame. However, now my problem is directory placement.

This is an excerpt from the previous script.php file. With the use of iFrame I get my files uploaded. However, they do not go into the specified directory. Instead they all go into the root directory. Its as if the variables are not passed through at all.

I would appreciate any help on the matter.

// Specify directory path for your images directory
session_start();
$pid = $_SESSION['pid'];
$assignmentid = $_SESSION['assignmentid'];
      
      $upload_directory  = $_SERVER[DOCUMENT_ROOT] ."/file_upload/uploads/$loggedin/$pid/";
      $fileLoc="file_upload/uploads/$loggedin/$pid/";
      
        // Check that the images directory exists
        if(file_exists($upload_directory))
        {          
            // Upload file or return error message information
            
            $fileUrl = $fileLoc .$_FILES[Filedata][name];
            mysql_query("INSERT INTO `homework` SET `uid`='$loggedin', `pid`='$pid', `url`='$fileUrl', `approved`='0'"); 
            
            
            if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }
        else
        {
        mkdir("../uploads/$loggedin/$pid", 0777);
         // Upload file or return error message information
            
            $fileUrl = $fileLoc .$_FILES[Filedata][name];
            mysql_query("INSERT INTO `homework` SET `uid`='$loggedin', `pid`='$pid', `url`='$fileUrl', `approved`='0'");
            
            
            if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }


if ($info) {
	$return['width'] = $info[0];
	$return['height'] = $info[1];
	$return['mime'] = $info['mime'];
}

}

litebearer · December 23, 2010

1. try echoing the variable(s) to make sure they contain what you think they should contain.

2. your code also enters data into the db BEFORE you check if there is an upload error. check for errors BEFORE you enter the data to the table

fizzzgigg · December 23, 2010

So I echoed the variables and they get lost somewhere in the mix.

I am still pretty new at programming. Is there a surefire way to pass variables through?

I also incorporate an iframe I am not sure if that matters.

Adam

Sign In

Code Adjustment Help

Recommended Posts

fizzzgigg

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

fizzzgigg

Link to comment

Share on other sites

fizzzgigg

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

fizzzgigg

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information