frontend: import/export

[magland]

Implement export to .zip and import from .zip or individual files.

Builds on #40

New import/export buttons on left panel

Click on Export and you get this

As you can see, the user sees that list of files that will be exported, together with their sizes in bytes. User also has ability to change the title prior to export.

Note that I am including the meta.json (with the title) even though the folder in the .zip file will be derived from the title. One reason for this is that the title is likely to have spaces, whereas I opted to replace spaces by underscores in the folder name. Overall I think it's nice to have the (optional) meta.json in the zip.

Here's what the exported .zip looks like

and inside that folder:

Now click the Import button

As you can see, there are a few options on what to upload

• A .zip file that was previously exported
• A directory of files that were extracted from an exported .zip file
• An individual *.stan file
• An individual data.json file

Note that the *.stan file does not need to be named main.stan.

In all cases, the existing files are completely cleared prior to uploading. So, if only a .stan file is provided, the data.json will always be empty. Similarly, if a data.json only is provided, then the main.stan will be empty. This is not always the desired functionality, but I propose we add some more flexibility in a separate ticket.

For this branch, local storage keeps the latest local saved content, and there's nothing about the content in the URL query string.

This PR uses a couple new npm packages: jszip and react-dropzone.

[magland]

Discussed with @WardBrian and settled on the following:

If user uploads a .zip or a folder, then it replaces the existing project and the modal window closes automatically.

If individual files are uploaded (e.g., something.stan) then there will be two buttons... "Import files into current project" and "Create new project and import".

I will implement that as part of this PR

[magland]

Discussed with @WardBrian and settled on the following:

If user uploads a .zip or a folder, then it replaces the existing project and the modal window closes automatically.

If individual files are uploaded (e.g., something.stan) then there will be two buttons... "Import files into current project" and "Create new project and import".

This has been implemented, the two buttons are titled:

"Import into NEW project" and "Import into EXISTING project"

From my perspective this is now ready for review and merge.

[WardBrian]

Thoughts on meta.json also storing some information that we don't necessarily need, but could be helpful to the user? I'm thinking in particular a "createdOn" timestamp

[WardBrian]

Clicking to pop open a file picker works, but unfortunately dragging and dropping files does not seem to work for me in firefox. It seems to work in chromium, though.

[WardBrian]

Trying this morning, it worked in firefox. I think I wasn't previewing the latest commit locally.

This has been implemented, the two buttons are titled:

"Import into NEW project" and "Import into EXISTING project"

For this feature, I think it makes sense to leave the drop area available after the first file is provided. Right now, if I want to upload original files and I don't drag them at the exact same time, I need to click import a second time and pop open the window again

[magland]

For this feature, I think it makes sense to leave the drop area available after the first file is provided. Right now, if I want to upload original files and I don't drag them at the exact same time, I need to click import a second time and pop open the window again

Makes sense, but maybe we could do that in a separate PR?

[WardBrian]

Superseded by #80