Request for an HTML example

Cystrin

Although I believe to have followed the examples given in the both the on-line implementation and in the downloadable PDF documentation, I have thus far been unable to succeed in creating a page showing the plug-in submit button.

From the uploadify.com website, I downloaded the latest distribution (jquery.uploadify.v2.1.0.min.js etc.), unzipped it to a folder and then copied the entire contents of same, including all sub-folders, to a sub-folder of my JavaScript folder on my website: http://www.mysite.com/js/uploadify.

What I would be very happy to receive is an HTML file that I can copy and paste into my /content folder. The file should contain all necessary links to /js/uploadify so that I can browse a file and then upload it to http://www.mysite.com/uploads.

Clearly I must be doing something wrong so I apologize in advance for my ignorance or lack of understanding. However, as I wrote in my opening, I believe to have followed the examples given and have also searched through this forum for hints.

Thanks in advance for those that can help.

Cystrin

pfiff_de

Can post your code please. Important is the Uploadify-JavaScript-part in the

Cystrin

My code is shown below. Please note that I have experimented with both relative paths (as shown below in the code) or with absolute paths in which I added http://www.mysite.com in front of the /js/uploadify/jquery-1.3.2.min.js etc. In both cases, the result is the same: only Multiple File Auto Upload (the third option shown on the page) works correctly in the sense that after browsing for the file (or files), the progress bar is shown and automatic uploading then commences. For both Single File Upload Multiple File Upload (the first and second options), after the file or files are selecting, neither the upload nor queue-clear functions work. In all cases, I only ever attempt to upload files under 2MB in size.

<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Uploadify scriptData Sample</title>

<link rel=\"stylesheet\" href=\"/js/uploadify/uploadify.css\" type=\"text/css\" />

<script type=\"text/javascript\" src=\"/js/uploadify/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"/js/uploadify/jquery.uploadify.v2.1.0.min.js\"></script>

<script type=\"text/javascript\" src=\"/js/uploadify/swfobject.js\"></script>
<script type=\"text/javascript\">

$(document).ready(function() {
	$(\"#fileUpload\").uploadify({
		'uploader':       '/js/uploadify/uploadify.swf',
		'cancelImg':      '/js/uploadify/cancel.png',
		'script':         '/js/uploadify/uploadify.php',
		'folder':         '/uploads',
		'multi':          false,
		'displayData':    'speed'
	});

	$(\"#fileUpload2\").uploadify({
		'uploader':       '/js/uploadify/uploadify.swf',
		'cancelImg':      '/js/uploadify/cancel.png',
		'script':         '/js/uploadify/uploadify.php',
		'folder':         '/uploads',
		'multi':          true,
		'buttonText':     'Select Files',
		'checkScript':    '/js//uploadify/check.php',
		'displayData':    'speed',
		'simUploadLimit':  2
	});

	$(\"#fileUpload3\").uploadify({
		'uploader':        	'/js/uploadify/uploadify.swf',
		'cancelImg':       	'/js/uploadify/cancel.png',
		'script':          	'/js/uploadify/uploadify.php',
		'folder':          	'/uploads',
		'fileDesc':        	'Bilder Datei',
		'fileExt':         	'*.jpg;*.jpeg;*.gif;*.png',
		'buttonText':		'Suchen',
		'multi':           	true,
		'auto':            	true,
		'checkScript':    	'/js//uploadify/check.php',
		'sizeLimit':	  	2097152,
		'queueSizeLimit':	5,
		'simUploadLimit':	2
	});
});

</script>
</head>

<body>
      <fieldset style=\"border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0\">
		<legend><strong>Uploadify - Single and Multiple Sample</strong></legend>
		<h2>Single File Upload</h2>
		<p>Display speed</p>
		<div id=\"fileUpload\">You have a problem with your javascript</div>
		<a href=\"javascript:$('#fileUpload').fileUploadStart()\">Start Upload</a> |  <a href=\"javascript:$('#fileUpload').fileUploadClearQueue()\">Clear Queue</a>
    	<p></p>
<hr width=100% size=\"1\" color=\"\" align=\"center\">
		<h2>Multiple File Upload</h2>
		<p>checkScript, buttonText, simulataneous upload limit</p>
		<div id=\"fileUpload2\">You have a problem with your javascript</div>
		<a href=\"javascript:$('#fileUpload2').fileUploadStart()\">Start Upload</a> |  <a href=\"javascript:$('#fileUpload2').fileUploadClearQueue()\">Clear Queue</a>
    	<p></p>
<hr width=100% size=\"1\" color=\"\" align=\"center\">
		<h2>Multiple File Auto Upload</h2>
		<p>Images Only</p>
		<div id=\"fileUpload3\">You have a problem with your javascript</div>
		<a href=\"javascript:$('#fileUpload3').fileUploadStart()\">Start Upload</a> |  <a href=\"javascript:$('#fileUpload3').fileUploadClearQueue()\">Clear Queue</a>
    	<p></p>
    </fieldset>
</body>
</html>

pfiff_de

I think you have an porblem with your paths...

Because this:


<script type=\"text/javascript\" src=\"/js/uploadify/jquery-1.3.2.min.js\"></script>

is the same like this:


<script type=\"text/javascript\" src=\"http://www.yourdomain.de/js/uploadify/jquery-1.3.2.min.js\"></script>

The Javascript-Files haven't got a problem with absolute paths, BUT it's not possible to upload files on a "strange" server (This would be a giant security problem

):


...
'folder':             '/uploads',
==>   'folder':             'http://www.yourdomain.de/uploads',
...

And there is the problem. Delete all the / in the -part and it should work...

Greetings from Germany
pfiff_de

:arrow:

Wenn's dann immer noch nicht klappt, schreib mich einfach hier über's Forum an, dann können wir das ganze auch auf deutsch machen

Cystrin

Hallo pfiff_de,

Thanks for your reply.

At present, I am still struggling to get the example "uploadify-multi-single" to work. This file, saved as HTML, is placed under my root in "/development". In the head section of the HTML I have specified relative links to the required uploadify files as follows:

<script type=\"text/javascript\" src=\"../js/uploadify/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"../js/uploadify/jquery.uploadify.v2.1.0.js\"></script>
<script type=\"text/javascript\" src=\"../js/uploadify/jquery.uploadify.v2.1.0.min.js\"></script>
<script type=\"text/javascript\" src=\"../js/uploadify/swfobject.js\"></script>
<script type=\"text/javascript\">

To clarify, under my root I have a JavaScript folder "js" under which I have placed the "uploadify" folder and all of its contents. Is this okay?

In the next block, I have the following:

$(document).ready(function() {
	$(\"#fileUpload\").fileUpload({
		'uploader': 'js/uploader.swf',
		'cancelImg': 'js/cancel.png',
		'script': 'js/uploadify/upload.php',
		'folder': '/uploads',
		'multi': false,
		'displayData': 'speed'
	});

	$(\"#fileUpload2\").fileUpload({
		'uploader': 'js/uploadify/uploader.swf',
		'cancelImg': 'js/uploadify/cancel.png',
		'script': 'js/uploadify/upload.php',
		'folder': '/uploads',
		'multi': true,
		'buttonText': 'Select Files',
		'checkScript': 'uploadify/check.php',
		'displayData': 'speed',
		'simUploadLimit': 2
	});

	$(\"#fileUpload3\").fileUpload({
		'uploader': 'js/uploadify/uploader.swf',
		'cancelImg': 'js/uploadify/cancel.png',
		'script': 'js/uploadify/upload.php',
		'folder': '/uploads',
		'fileDesc': 'Image Files',
		'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
		'multi': true,
		'auto': true
	});
});

The page when viewed in my browser still displays

You have a problem with your javascript

. Is this hinting that the path cannot be found and is therefore not correctly defined?

Regarding the path definitions shown in the last block above, with what are they defined: the uploadify JS-files or the HTML-file that makes the call to them?

With many thanks,

Cystrin

(To hopefully ensure a greater readership, I have replied in English.)

pfiff_de

Mhhh... Look:

This is your actual path (opend with your Browser):

http://localhost/development/index.html

Your JavaScript-files are located at:


<script type=\"text/javascript\" src=\"http://localhost/js/uploadify/jquery-1.3.2.min.js\"></script>
...

If you use an actual FireFox version, view the source code [ Strg + U ] and click on the blue underlined links at the src="../js/uploadify/jquery-1.3.2.min.js" attributes.
When you now see the JavaScript files, your paths are correct, else you made an mistake

I think your JavaScript-file-paths are set correctly...

BUT: You still have absolute paths in your uploadify section:


      'folder': '/uploads',

Make a relative path and it should work:


      'folder': '../uploads',
or
      'folder': 'uploads',

Try this...

Where do you get this JavaScript-error message?! That's not norma I think :shock:

I hope it works

pfiff_de

Cystrin

It would appear that the definition of the paths was not the only problem.

The function being called, fileUpload, is not recognized by the (latest) version of Uploadify that I have downloaded. The following code example does not work:

    $(document).ready(function() {
       $(\"#fileUpload\").fileUpload({
          'uploader': 'js/uploader.swf',
          'cancelImg': 'js/cancel.png',
          'script': 'js/uploadify/upload.php',
          'folder': '/uploads',
          'multi': false,
          'displayData': 'speed'
       });

       $(\"#fileUpload2\").fileUpload({
          'uploader': 'js/uploadify/uploader.swf',
          'cancelImg': 'js/uploadify/cancel.png',
          'script': 'js/uploadify/upload.php',
          'folder': '/uploads',
          'multi': true,
          'buttonText': 'Select Files',
          'checkScript': 'uploadify/check.php',
          'displayData': 'speed',
          'simUploadLimit': 2
       });

       $(\"#fileUpload3\").fileUpload({
          'uploader': 'js/uploadify/uploader.swf',
          'cancelImg': 'js/uploadify/cancel.png',
          'script': 'js/uploadify/upload.php',
          'folder': '/uploads',
          'fileDesc': 'Image Files',
          'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
          'multi': true,
          'auto': true
       });
    });
</script>

The correct function is uploadify as shown in the following example:

<script type=\"text/javascript\">
      $(document).ready(function() {
        	$(\"#fileInput1\").uploadify({
		'uploader'       : '../js/uploadify/uploadify.swf',
		'script'         : '../js/uploadify/uploadify.php',
		'cancelImg'      : '../js/uploadify/cancel.png',
		'folder'         : '../uploads',
		'multi'          : false
	});
	$(\"#fileInput2\").uploadify({
		'uploader'       : '../js/uploadify/uploadify.swf',
		'script'         : '../js/uploadify/uploadify.php',
		'cancelImg'      : '../js/uploadify/cancel.png',
		'folder'         : '../uploads',
		'multi'          : true
	});
	$(\"#fileInput3\").uploadify({
		'uploader'       : '../js/uploadify/uploadify.swf',
		'script'         : '../js/uploadify/uploadify.php',
		'cancelImg'      : '../js/uploadify/cancel.png',
		'folder'         : '../uploads',
		'auto'           : true,
		'multi'          : false
	});
	$(\"#fileInput4\").uploadify({
		'uploader'       : '../js/uploadify/uploadify.swf',
		'script'         : '../js/uploadify/uploadify.php',
		'cancelImg'      : '../js/uploadify/cancel.png',
		'folder'         : '../uploads',
		'buttonImg'      : '../development/browse-files.png',
		'wmode'          : 'transparent',
		'width'          : 130,
		'queueID'        : 'fileQueue',
		'auto'           : true,
		'multi'          : true
	});      });
</script>

Howdy, Stranger!

Categories