[Multiple File Upload] How to add attachment by dragging anywhere in the space

[Multiple File Upload] How to add attachment by dragging anywhere in the space

  
Forge Component
(33)
Published on 29 Mar (3 weeks ago) by Remco Dekkinga
33 votes
Published on 29 Mar (3 weeks ago) by Remco Dekkinga

Hi support,

I'm currently using this widget in my application. 

I found that if the user wants to drag file onto the "Drag file here..." text, he can't upload attachment. 


If the user drag file to other places in the container, the file can be attached.

So my question is how to make user drag and drop in everywhere in the container to upload file?

Thanks.

Hi Nina,

I can not get the behaviour you are describing. So, some questions about this:

  • Can you share a oml where that happens?
  • Are you using latest version of that widget?
  • Have you customized the widget or it's the version from the forge?
  • In what browser are you getting that?

Cheers,

José

José Costa wrote:

Hi Nina,

I can not get the behaviour you are describing. So, some questions about this:

  • Can you share a oml where that happens?
  • Are you using latest version of that widget?
  • Have you customized the widget or it's the version from the forge?
  • In what browser are you getting that?

Cheers,

José

Hi José,

Sorry to get back to you late. 

  • Can you share a oml where that happens? Please see attachment below.
  • Are you using latest version of that widget? Yes
  • Have you customized the widget or it's the version from the forge? It should be the version from the forge.
  • In what browser are you getting that? In Chrome

Thanks.


Hi Nina,

The oml has too many dependencies for me to check it running. But I copied part of one of your screens (the part with the multiplefileuploa) to an application of mine and it worked.

Still I have a few more questions:

  • Do you have any javascript errors before and after dragging the files?
  • Did you changed the css of any class named something upload something?

Cheers,

José

José Costa wrote:

Hi Nina,

The oml has too many dependencies for me to check it running. But I copied part of one of your screens (the part with the multiplefileuploa) to an application of mine and it worked.

Still I have a few more questions:

  • Do you have any javascript errors before and after dragging the files?
  • Did you changed the css of any class named something upload something?

Cheers,

José

Hi José,

Thank you for your reply. Here are my answers:

  • Do you have any javascript errors before and after dragging the files? No.
  • Did you changed the css of any class named something upload something? I updated the CSS in this widget into the following: .qq-upload-button {    display\:block; /* or inline-block */    text-align\:center;    margin\:50px 0;    float\:right;} .qq-upload-drop-area {    position\:absolute; top\:0; left\:0; width\:100%; height\:100%; min-height\: 70px; z-index\:2;    background\:#FF9797; text-align\:center; }

Thanks.



Hi Nina,

I think it is happening because of the CSS.

Nina do one thing replace current css with old css and then try. It is working fine or not?


Regards,

Rajat Agrawal

Solution

Hi Nina,

At this point I also suspect the CSS.

There must be something (some element) on top of the upload area that is blocking the upload in that area. Besides the suggestion from Rajat, another thing that you could try is to set the z-index to a large value (e.g. 10000) so that it overlaps other elements. And see if it the upload works.

You can tweak with this values using the inspect from chrome. Also, if there is really another element on top of your upload area, using the inspect it should not be too hard to find it.

Cheers,

José

Solution

Thanks for your guys help!

Hi José Costa,

I found another issue. When user drag but not drop a file, after that, the browser link is not working. Could you help me with this?

Thanks.

Hi Nina,

Sure. But what is the browser link?

Cheers,

José