Hi,

There is this nice upload ajax script which I would like to use on my site, it's called "Fancy Upload". You can a see demo&code here:
http://digitarald.de/project/fancyupload/3-0/showcase/single-file-button/

The demo shows only one upload form instance on the page. However I want to have three upload form instances so that the users can upload three pictures and see the thumbnails for each image they upload.

The problem is, this javascript specifically sets the id's of the html fields in use. For instance, "demo-portrait" is the id of the image tag and it is also referred to within the javascript itself. So if I create another image field with an id "demo-portrait-2", the script wouldn't work for this second field.

Would anyone have any idea on how to bring together several instances of this nice tool on the same page?

Recommended Answers

All 5 Replies

halukakin,

I have not looked at FancyUpload in detail but the intro says:

"..... FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. ....."

This implies that it should handle your three pictures without modification.

Airshow

Hi airshow,
Yes the script allows multiple image upload. But for my purposes three different instances will also make the page more user friendly.

Thank you...

halukakin,

Aha I see.

My guess is that three complete instances would need fairly complex mods to the clinet-side code and hopefully nothing server-side.

I think your best bet would be to live with a single instance (so there's only one queue and progress area), but provide three clickable links - all associated with the same instance. That would be much easier though I can see it's maybe not what you would ideally want.

Airshow

It turns out uploadify does just what I need. It uses the following code:

<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader' : 'uploadify.swf',
'script' : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads'
});
});
</script>

The thing is I like fancyupload's initial interface better.

Halukakin,

Well done, I'm glad you have a solution albeit a compromise.

I'm sure that fancyupload could be modified to handle multiple instances. It's just a question of getting into the code, seeing exactly what it does and trying out different things until it does what you want.

Alternatively, maybe multiple instances are burried away in the fancyupload documentation somewhere.

Good luck.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.