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.

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.

@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?

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

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

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

@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.

@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:

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

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

Yes that sounds good. There is the UI portion, which is handling the drag action and using it to initiate moving the file. Then there's the Redux portion where we need to move the file to have a different parent. We actually don't have support for that right now. I can help you with the Redux part because the files reducer is a mess. You should focus on the UI, and triggering the right action at the right time.

There is the UI portion, which is handling the drag action and using it to initiate moving the file.

Alright, I will start creating the UI using React DnD.

I can help you with the Redux part because the files reducer is a mess.

After I'm done with the UI, I'll look into the files reducer and see if I can work on it. If I can't, I will submit the UI section in a PR and leave Redux to you.