Drag and Drop Files into Folder

[alexapostolu]

Nature of issue?

• New feature request

New feature details:

So I noticed how when you create a folder in p5.js, you can't drag and drop existing files into that folder. Instead you have to manually import files into that specific folder. So I'm wondering, could it be a possibility that you could drag and drop existing files into a folder? Thanks

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for the feature suggestion! Related to #704. This would be super, super useful. Another related suggestion is allowing file renaming with slashes (#765). All slightly different features though!

I think this is a great idea. I also wonder how this would work, from a UI/UX perspective, to also support #375.

[SundeepChand]

@catarak I would like to look give it a try. Can you please tell me the files, that I need to look at to get started?

[catarak]

@SundeepChand sure! I would take a look at FileUploader.jsx and also Sidebar.jsx.

[ron-debajyoti]

@SundeepChand if u aren't working on it I would like to give it a try.

[SundeepChand]

Sure @ron-debajyoti, you can work on this.

[ron-debajyoti]

@catarak Hi ! Sorry for being late, I was having some difficulties going through the code. A feature suggestion from me would be a proper documentation for developers (esp for newbies like me), and perhaps using Docusaurus.

Regarding the drag and drop utility in the Sketch files area of the web editor, I think it's becoming a bit complicated because the current implementation of adding new files under a folder relies on using buttons that have the hooks to the state update for example here. So it becomes easy for dropzone to complete all the callbacks required (like it's used in FileUploader like here.
If we extend the dropzone to sketch area for the drag and drop feature, then maintaining the parentId without using the hooks is a bit difficult to implement. Also, in case we have multiple empty folders, maintaining the parent folder for a bunch of files uploaded is difficult too..

@catarak I would appreciate your views and suggestions regarding this problem.

[ron-debajyoti]

@catarak I did a temporary fix to the issue for now. I added a dropzone to the bottom of Sketch Files list and added the feature of directly uploading one or multiple files to the project. If we want to add multiple files to a particular folder to the project, then selecting the folder first and then uploading the files in the dropzone automatically uploads the files in the correct place.

Although this fix technically doesn't allow us to rearrange the files within the Sketch Files list, we don't have to manually create and upload files to the project. Please provide some feedback regarding this.

I'll try to add a PR and try to solve related issues like #765 in this PR itself.

Demo video:

demo1.mp4

[mhsh312]

The way I understand this is that the currently the Sidebar.jsx component has a bunch of FileNode.jsx components that reflect the current file-and-folder hierarchy of the project. To implement this feature, we need to make the FileNode.jsx components draggable and then reflect the changes to the project instance in the database.

For the drag and drop, React DnD seems like the way to go.

I would like to work on this issue so please assign it to me if it is still active. @lindapaiste @raclim