Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to reference the source element when using multiple instances? #25

Closed
agittins opened this issue Sep 23, 2011 · 5 comments
Closed

How to reference the source element when using multiple instances? #25

agittins opened this issue Sep 23, 2011 · 5 comments

Comments

@agittins
Copy link

Hi!

Great plugin - I had a lot of trouble getting others to work nicely without an existing form, this one seems to handle that really well.

I want to have several "drop targets" on my page, and the upload script (and uploadFinished handler) will do specific things dependent on which element the file was dropped on. I'm trying to use the data option to send the element name to the upload script. This seems to work (upload script sees the element name) but in every case, the element name that is sent is the last one that was defined, not the one that the file was dropped on. Eg:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-filedrop/jquery.filedrop.js"></script>


<script language="javascript" type="text/javascript">

$(document).ready(function(){
        $('.dropdiv').each( function(){
                var blockname = $(this).attr('id');
                $(this).filedrop({
                        url: '../misc/upload.php',
                        data: { 
                                source: blockname,
                        },
                        uploadFinished: function(i, file, response, time) {
                                $('#msgdiv').html(file.name + ' is done and responded <pre>' + response.files + response.request + '</pre>');
                        },
                })
        });
        $('#msgdiv').text('all quiet.');        
});     

</script>
</head>
<body>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv" >Drop images here</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv2">Drop images here2</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv3">Drop images here3</div>
<div class="dropdiv" style="margin: 3px; padding: 20px; background: #800080;" id="dropdiv4">Drop images here4</div>
<div id="msgdiv">no messages.</div>
</body>
</html>

Here I'm passing the data as "blockname" which I set earlier (since $(this) appears... broken) but no matter which div I drop a file onto, the "source" paramater is set to "dropdiv4".

I'm testing on Chrome 14. I did make another change to the events (I made it call xhr.onreadystatechange instead of onload - the latter appears non-functional in chrome14? At any rate, I don't think it will affect this)

I figure I am doing something silly with the .each call or more general-boneheadedness :-) What am I missing here?
@agittins
Copy link
Author

Re the bit about how I changed the event callbacks, I have rolled that back, events are working with the vanilla version of jquery-filedrop.js, but still the way that I am attempting to use multiple instances is not working for me.

@nphase
Copy link

nphase commented Sep 23, 2011

Having the same problem here. Seems to me like opts gets overwritten with every .filedrop() call..

@hansent
Copy link

hansent commented Nov 22, 2011

Like nphase said, opts gets overwritten each time you call .filedrop().

Here is a quick fix: https://gist.github.com/1384760 It's not the correct way to do it...I've just moved all the functions accessing opts inside the scope of .filedrop(). It's not very memory efficient, a real object oriented approach, or attaching opts to the corrosponding element using e.g. $.data probably be better? Works ok if you just need two different drop targets though...

@mmmries
Copy link

mmmries commented Feb 15, 2012

I have this same problem as well. Didn't notice it until I had already started using this plugin in a production system. I've submitted a pull request based on rewrite much like the gist of hansent. It just makes opts private to each instance of filedrop and also makes the helper functions private as well. I guess if you put a bunch of instances on a single page you could end up bloating memory, but that wasn't a concern for my system.

weixiyen added a commit that referenced this issue Feb 22, 2012
@weixiyen
Merge pull request #40 from hqmq/master
f758576 
fixes issue #25 - multiple instances of filedrop
@weixiyen
Copy link
Owner

hqmq fixed this in #40

thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@weixiyen @mmmries @hansent @nphase @agittins