The way the two nv-file-over and nv-file-drop directives are implemented is a bit confusing to me.
I am trying to use your code to create an area where the user can upload DIFFERENT files into DIFFERENT places.
The "uploads only images" example does not implement this properly:
The example adds the 'file-over' class to BOTH drop zones the moment the user drags a file ANYWHERE over the browser. There is nothing to indicate to the user WHICH drop zone will receive the file - red or green?
The "file-over" class is not removed in your example - the boxes remain red and green even if I never drop the file on the page.
I need to allow file uploads to two areas on a page: A and B. I need the user to know which area will receive the file - if A has the "file-over" class then B should NOT have it.
I need both A and B to use the same "uploader" object.
I have tried a number of different approaches, all of them unsuccessful.
Approach 1:
Put the two directives onto the elements themselves.
Result: The "file-over" class is only added when I put my mouse over the actual drop-zone - this is good. But, both A and B get the "file-over" class simultaneously! The user cannot see where her file will go. The upload DOES work correctly and sends the right formData.
Approach 2:
Put the nv-file-drop directive onto the page container, and put nv-file-over on the drop zones - this is the method explained in your introduction.
Result:
Same visual problem as Approach 1 - both elements get the file-over class together, not separately.
Uploads do NOT work - the formData variable does not get sent, because only nv-file-drop accepts an 'options' parameter.
Approach 3:
Put a nv-file-drop directive in BOTH the page container and each of the drop zone elements.
Result: Same as Approach 1 - the upload works, but the file-over classes gets added to everything at the same time.
It seems that no matter how many different nv-file-drop directives are on the page, they are treated as the same.
And the nv-file-over is unnecessary the way it is implemented. Why do I need to put a directive onto an element so that that element gets given a class? As the nv-file-drop directive will always be on an element that is a PARENT of the nv-file-over directive you could simply put the file-over class as a parameter of the nv-file-drop directive, and use CSS to control the appearance of child elements of that element.
If you drop a file outside a drop zone the browser will open your file. So it would be recomended that you use nv-file-drop at the body. To give feedback to user, choose an area where to put nv-file-drop.
If you try to reuse the same uploader, they will share the same queue. Is this what you want? I believe it should work as you expect if you use a second uploader. If it don't, it'd be a bug I think. There's a reson not to use a second?
I agree with @jeremiahblanch-PropertyMe, how about few instances of FileUploader?
For ex., I'm using a brand new FileUploader() for each of my products and of course they have their own queque and everything works well, but alas I couldn't manage for each one of them to have a separate drop-zone, 'cause body tag can't be used in that case as a main drop-zone. And without this drop-zone doesn't work. Mb drop-zone can be defined in another way?
Hey Guys. As I understand it, the problem is that all of the file-over zones are changing to the drop-over class no matter what file-drop the cursor is on? If I have understood it correctly then it is because angular-file-upload actually applies the drop-over class to all file-drop elements/directives when any of the file-over zones are triggered. I am working on a solution currently.
Hi, thanks for these useful directives.
The way the two nv-file-over and nv-file-drop directives are implemented is a bit confusing to me.
I am trying to use your code to create an area where the user can upload DIFFERENT files into DIFFERENT places.
The "uploads only images" example does not implement this properly:
I need to allow file uploads to two areas on a page: A and B. I need the user to know which area will receive the file - if A has the "file-over" class then B should NOT have it.
I need both A and B to use the same "uploader" object.
I have tried a number of different approaches, all of them unsuccessful.
Approach 1: Put the two directives onto the elements themselves.
Result: The "file-over" class is only added when I put my mouse over the actual drop-zone - this is good. But, both A and B get the "file-over" class simultaneously! The user cannot see where her file will go. The upload DOES work correctly and sends the right formData.
Approach 2: Put the nv-file-drop directive onto the page container, and put nv-file-over on the drop zones - this is the method explained in your introduction.
Result: Same visual problem as Approach 1 - both elements get the file-over class together, not separately. Uploads do NOT work - the formData variable does not get sent, because only nv-file-drop accepts an 'options' parameter.
Approach 3: Put a nv-file-drop directive in BOTH the page container and each of the drop zone elements.
Result: Same as Approach 1 - the upload works, but the file-over classes gets added to everything at the same time.
It seems that no matter how many different nv-file-drop directives are on the page, they are treated as the same.
And the nv-file-over is unnecessary the way it is implemented. Why do I need to put a directive onto an element so that that element gets given a class? As the nv-file-drop directive will always be on an element that is a PARENT of the nv-file-over directive you could simply put the file-over class as a parameter of the nv-file-drop directive, and use CSS to control the appearance of child elements of that element.
eg HTML:
CSS: .file-over .dropZone {background: red}
Am I using these directives in the right way?
Thanks for your help, Jeremiah
If you drop a file outside a drop zone the browser will open your file. So it would be recomended that you use nv-file-drop at the body. To give feedback to user, choose an area where to put nv-file-drop.
If you try to reuse the same uploader, they will share the same queue. Is this what you want? I believe it should work as you expect if you use a second uploader. If it don't, it'd be a bug I think. There's a reson not to use a second?
I agree with @jeremiahblanch-PropertyMe, how about few instances of FileUploader?
For ex., I'm using a brand new FileUploader() for each of my products and of course they have their own queque and everything works well, but alas I couldn't manage for each one of them to have a separate drop-zone, 'cause body tag can't be used in that case as a main drop-zone. And without this drop-zone doesn't work. Mb drop-zone can be defined in another way?
Hey Guys. As I understand it, the problem is that all of the file-over zones are changing to the drop-over class no matter what file-drop the cursor is on? If I have understood it correctly then it is because angular-file-upload actually applies the drop-over class to all file-drop elements/directives when any of the file-over zones are triggered. I am working on a solution currently.
Did anyone come up with a solution to this?
^ +1