File dragging animation does not go beyond the file manager view

[Renato]

Is there a way to extend the dropabble area of the filemanager component? The file dragging animation seems to be limited to the file manager view/div.

So the target does seem to be correct: if you drop it onto an element outside the file div (say an input form element), it does find the correct element. The only issue is the file dragging animation that does not go beyond the file viewport.

Any suggestion on how to circumvent this ?

[LeoLavanya Dhanaraj]

Hi Renato,

Based on your shared information, we are quite unclear about your requirement with File Manager Whether you need to extend the droppable area of the File Manager component. If possible, please provide the exact issue as a video which will help us to check and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj

[Renato]

Hi Leo ! Thanks for the quick reply. Let me get you a screenshot of an example:

Consider that example where I am trying to drag that file to that input box (could be other element: droppable component).

What I meant is that the file dragging animation (File Manager.txt file in this case), is limited to the zone inside the file manager view. Even though the dragged object identifies the input form as the right target, as a user, you still want to have the correct perception that the file (document, image, etc) item was dragged all the way onto the input form (or whatever other element).

Would that make better sense? Am I able to tweak that part out of the box ?

Thanks in advance for looking into it.

[Sivakumar ShunmugaSundaram]

Hi Renato,

We have validated your reported query in the React File Manager component. During file drag within File Manager, a clone element will be created and dragged, which contains certain styles(only for the cloned element). The dragged element outside the File Manager will contain only the browser default styles and hence there is a difference between both areas(File Manager container and outer area).

We have attached the documentation link for the File Manager component for your reference.

Documentation: https://ej2.syncfusion.com/react/documentation/file-manager/getting-started/

Please get back to us if you need any further assistance.

Regards,

Sivakumar S

[Renato]

Hi Sivakumar,

I figured that out but thanks for clarifying with a more thorough explanation. But will you consider extending the drag/drop event so that the styles work outside the FileManager container? I mean, I gave you a real case scenario where a dragged object is needed outside the FileManager context, I bet there are other users that might also be interested in it.

Does it help if I submit a PR to your project, will you consider it for the next release? Could you point out the code section responsible for the object cloning and dragging? I will probably gonna need that part working regardless so I will have to code it anyway.

Thank you

Renato

[Renato]

So I have taken a look at the code, and even though it would take it more time to understand it in deep, it seems that the draggable object is being limited when set to:

...

dragArea: this.parent.element

If that property was customisable, one could select an external element so that the object could also work outside the FileManager area. From that point, fixing the styles of the cloned object will be simple, which could even be up to the user to include the proper css properties.

[Keerthana Rajendran]

Hi Renato,

Sorry, we couldn’t handle the drag/drop styles outside the File Manager since it is related to default windows explorer and browser styles. The dragArea is a property of Draggable library and you can refer to the following UG links for getting started with drag and drop.

https://ej2.syncfusion.com/documentation/api/base/draggable/#dragarea

https://ej2.syncfusion.com/documentation/api/base/draggable/#dragarea

You can make any element draggable using the above code in UG.

And for your query regarding source code, as a community licensed user, you cannot access our source. Please contact our sales team through [email protected] to get the source code access.

Regards,

Keerthana R.

[Renato]

Hi Keerthana ,

I appreciate the answer but please try to understand it better.

I understood that the dragArea is a property of Draggable, but FileManager makes use of it. However the Draggable API properties (like dragArea) are not up to the user to specify them, they are internal.

For instance, it's possible to configure the drag/drop events as mentioned in the documentation: https://ej2.syncfusion.com/documentation/file-manager/drag-and-drop/ . So I am just asking for an additional parameter that can be configurable which sets up the draggable area.

As a community user, I can access the source code which is hosted in github. And I already mentioned the sales team that I am working under a proposal in which, if accepted, a purchased license will be needed.

[Keerthana Rajendran]

Hi Renato,

Yes, you can modify the dragArea through the success event of File Manager.

Please set the allowDragAndDrop property to true and add the required container class name as dragArea through the success event.

success(args) {

    this.fileObj.largeiconsviewModule.dragObj.dragArea = '.sample-container';

  }

  render() {

    return (

      <div class="sample-container">

        <div className="control-section">

          <FileManagerComponent

            id="overview_file"

            ref={(s) => (this.fileObj = s)}

            ajaxSettings={{

              url: this.hostUrl + 'api/FileManager/FileOperations',

              getImageUrl: this.hostUrl + 'api/FileManager/GetImage',

              uploadUrl: this.hostUrl + 'api/FileManager/Upload',

              downloadUrl: this.hostUrl + 'api/FileManager/Download',

            }}

            view={'LargeIcons'}

            allowDragAndDrop={true}

            success={this.success}

          >

            <Inject services={[NavigationPane, DetailsView, Toolbar]} />

          </FileManagerComponent>

        </div>

      </div>

    );

  }

Sample: https://stackblitz.com/edit/react-ofyxsm-uu5vbj?file=index.js

API link: https://ej2.syncfusion.com/react/documentation/api/file-manager/#allowdraganddrop

Also, we have alerted our sales team regarding your request. They will contact you shortly.

Please let us know if any concerns.

Regards,

Keerthana R.

[Renato]

Hey team , 

Thanks a lot . By the looks of it , it may do the work perfectly .

[Ranjani Prabakaran]

Hi Renato,

Please contact us if you need any further assistance. We are happy to help you out.

Regards,

Ranjani