file upload functionality and error hijacking #111

mikeal · 2019-01-03T03:56:53Z

Still a work in progress, but the basics are there.

mikeal · 2019-01-03T03:58:06Z

I implemented this as a mixin but I'm not so sure that's the best approach. Most of the code still has to live in the main template and code eval anyway, so we could just add the functionality to Lesson and just have the lesson author add the "isFileLesson" property.

mikeal · 2019-01-03T03:59:07Z

Also, I'm not sure how we should handle directories (if at all). There's a way to do it but I think it's Chrome only https://github.com/feross/drag-drop/blob/master/index.js#L121

lidel · 2019-01-25T14:56:59Z

Oli did a deep dive on this recently to fix drag&drop upload error and I think we have code that works across Firefox/Chrome in ipfs-webui.

@olizilla are you able to link to relevant snippets or share some thoughts on best practices?

- Fix trailing comma linter error

- Address merge conflicts while getting this branch up to date with current site features.

terichadbourne · 2019-01-29T21:10:17Z

I do think we'll want to demonstrate some things using directories, so tips from @olizilla on the implementation @lidel mentioned would be great. (See #91 (comment) for the kinds of commands I'd like users to be able to explore from within the tutorial.)

lidel · 2019-02-06T11:00:17Z

In case it helps, I tracked some prior art:

file streaming: ipfs-companion/2.7.0/add-on/src/popup/quick-upload.js
(pull-file-reader solves chrome crash with bigger files, described in crash when dropping a big file ipfs/ipfs-companion#464)
directory uploads and working drag&drop: ipfs-webui/v2.3.3/src/bundles/files.js
(it is coupled with React, but includes various fixes related to directory upload mentioned in fix: add files and folders ipfs/ipfs-webui#931 (comment))

Digression: directories complicate things, initial lesson may want to deal with uploading files alone. Later, we could show how to create directories on the fly (#91 (comment)), and finally we could tackle directory uploads.

Remove unused properties in lesson with no exercise

- Add dummy file tutorial lesson - TODO: Figure out why exercise box isn't appearing

- Offer multiple boilerplates - IN PROGRESS: Update instructions for building a lesson

- Update UI for file upload when `ifFileLesson` is true, adding upload box and different instructions for submission - Update lesson content to explain new exercise format - Fix error preventing exercise box from appearing in file lessons

- Move "Step 2" header into `v-if` so that it only shows in lessons where file uploaded is needed

- Remove unused console logs

- Add file tutorial to homepage - Adjust dummy titles and descriptions

terichadbourne · 2019-02-13T07:26:38Z

@mikeal I've pushed the changes we worked on today to

Troubleshoot why upload click is still making the file selector open twice in a row. (Drag and drop functions as intended.)
Make the validation happen when the submit button is clicked, NOT when the file is uploaded. (Flow should be that the user uploads files, updates code editor, then hits submit to test.)
Turn uploadedFiles from a binary into an array of file names uploaded and print them to page in place of the placeholder content.

- Appease linter

- Make a consistent look and feel for the upload box and the resulting box that shows what files you've uploaded - TODO: Figure out how to make new file icon be aqua like the add one - Make formatting consistent between reset text links - Add checkmark icons when you upload your code and when you change the code in the editor

terichadbourne · 2019-02-13T17:15:44Z

Made additional UI improvements based on some of the feedback from today's design team and GUI team calls.

Suggestions to consider that aren't yet implemented:

Make the new file icon aqua like the add icon (I don't know much about SVGs and this one is put there in a different way from the other so I need to study up on how to do that, but it seems like an easy one to knock off)
Replace "Reset Code" and "Start Over" text links with some sort of consistent reset icon
Disable submit button until both steps one and two are completed OR gray out and disable the code editor until the file upload is complete. (I don't love the latter idea since it doesn't really matter in what order you do the steps.)
Separate instructions for step 1 and instructions for step 2 (this would require a pretty decent refactor of how our markdown files and Vue files interact

- Add border to file upload box when file is dragged over it - Print filenames from actual array of uploaded files - Fix issue where file explorer was opening twice on click - Add args to run function - Edit code in File-Basics/01.vue to be what would be the successful code for an add lesson (TODO: remove part of this code and update validation elsewhere)

- Change document icon to aqua SVG - Fix formatting of <ul> element for better design when multiple files are uploaded

- Disable submit button in file lesson when !uploadedFiles - Add a note indicating this and make it even more prominent during hover over disabled button (have to hack it with a span b/c disabled buttons don't have a hover property)

@mikeal

- Disallow folder upload since we can't access the details we need in the browser. Users can successfully upload either a single file or multiple files through either drag-and-drop or selection. Pair programmed with @mikeal

- Add a 2nd lesson to file tutorial series - Update dummy content in both lessons - TODO: Fix error messages in lesson 1 - TODO: Create real content for lesson 2

- Change opacity rather than font weight when user hovers over disabled submit button's parent element. (Warning that you need to upload a file now does not appear until that hover thanks to 0 opacity.) - Minor text edits based on feedback from design team.

- Complete lesson 1 exercise - TODO: Fix error which prevents fail/success messages from showing if you try to submit the default code as your code

- Add exercise to practice adding a file to IPFS. - TODO: Fix validation

- More attempts to get the right info to use for validation - TODO: Actually validate

fsdiogo · 2019-04-03T09:26:17Z

@fsdiogo Does share.ipfs.io use only MFS or was a workaround found to use the other methods as well?

share.ipfs.io does not uses MFS at all, it's just plain simple adding and getting!

terichadbourne · 2019-04-03T17:01:54Z

@olizilla tells me that the way the GUI team has been making Web UI work with browser file objects is by wrapping them in readable streams, and of course I'd rather avoid having to teach ProtoSchool users how to do that. @hugomrdias has it in his OKRs for the upcoming quarter to make the non-MFS add() work with blobs. 🎉

@olizilla is on the same page as @mikeal about teaching MFS first, and given that I can push ahead on that with blob support now, my plan is to focus this PR on an MFS tutorial and later circle back to see what we can effectively teach on the non-MFS commands in the browser.

@alanshaw I know you're depending on some of this content for your IFPS Camp tutorial, but I'm hoping this prioritization will be okay. 🤞

- Rename tutorial according to new focus on the Mutable File System - Update routes and index listings accordingly

- Add lesson on `files.ls`

- Update validation error message

terichadbourne · 2019-04-03T20:17:14Z

I've restructured this tutorial to be just about MFS, have removed the old ipfs.add lesson, and have added an ipfs.ls() lesson.

I'd love feedback from @fsdiogo @mikeal or others on whether the content of the existing lessons is actually true and whether I can simplify any of the existing validation. Good tips now will help me be more efficient moving forward. Thanks!

- Add files for lesson on files.mkdir - Update routs and tutorials.json accordingly - TODO: Implement validation

terichadbourne · 2019-04-09T20:53:34Z

@fsdiogo Heads up that I've just added content for the next lesson (files.mkdir) but haven't yet fixed up the validation.

fsdiogo · 2019-04-16T14:16:07Z

@terichadbourne @olizilla can you please take a look at the error overriding and the instructions for using it, more or less in 6a2f2ee and 68e8e36?

@terichadbourne as this branch is getting a bunch of work done in it, we should fork it to different branches so our work won't collapse, but specially to ease the code reviews.

I've commented the imports to the MFS lesson in my last commit, so we can merge this branch to code. You should then fork code and continue your work on the MFS lessons; I'll fork code too, to add the console outputs in another branch; @olizilla will make his own branch too from code and get on with his work as well.

Sounds good?

fsdiogo · 2019-04-17T11:07:40Z

Ping @terichadbourne @olizilla ☝️ (my previous comment)

terichadbourne · 2019-04-17T11:34:42Z

@fsdiogo I’m all for your plan for getting this merged and splitting out work off into new branches. I should be able to make some time to proof this today, but I’d prefer if someone more familiar with IPFS than I am also proofed the new validation system for hijacking error messages. @mikeal or @olizilla could you please help to review?

terichadbourne · 2019-04-17T20:57:11Z

@fsdiogo I've clarified and added to your instructions for using the new error override feature.

The end result is working is for me as a user when I uncomment the routing to get the MFS lessons usable - I see the custom errors when needed but can make native syntax errors and such pass through unimpeded.

terichadbourne · 2019-04-17T22:52:07Z

@fsdiogo, @mikeal just gave the official “LGTM” after looking at your commits for the error hijacking. Feel free to merge if you’re comfortable with my latest commit.

olizilla · 2019-04-18T10:23:32Z

.travis.yml

@@ -7,6 +7,7 @@ cache:
 before_script:
  npm install
 script:
+  npm test


@fsdiogo needs more hyphens:

script: - npm test - npm run build

Initial work on file upload lesson.

cc3d9b4

terichadbourne added the OKR-2019-Q1 label Jan 7, 2019

terichadbourne mentioned this pull request Jan 8, 2019

New Tutorial: Mutable File System #91

Closed

terichadbourne added 2 commits January 29, 2019 13:26

Fix linter error

117c701

- Fix trailing comma linter error

Merge branch 'code' into file-upload

cb0f3af

- Address merge conflicts while getting this branch up to date with current site features.

terichadbourne added 7 commits February 12, 2019 13:52

Remove unused properties

d8fa09a

Remove unused properties in lesson with no exercise

Add dummy file tutorial lesson

7956414

- Add dummy file tutorial lesson - TODO: Figure out why exercise box isn't appearing

Offer multiple boilerplates & update instructions

14c2cb8

- Offer multiple boilerplates - IN PROGRESS: Update instructions for building a lesson

Update UI for file upload

627eb39

- Update UI for file upload when `ifFileLesson` is true, adding upload box and different instructions for submission - Update lesson content to explain new exercise format - Fix error preventing exercise box from appearing in file lessons

Remove "Step 2" header from non-file exercise box

5cb9e04

- Move "Step 2" header into `v-if` so that it only shows in lessons where file uploaded is needed

Remove unused console logs

b934a1d

- Remove unused console logs

Add file tutorial to homepage and adjust titles

6c50a79

- Add file tutorial to homepage - Adjust dummy titles and descriptions

terichadbourne added 2 commits February 13, 2019 08:58

Appease linter

2cc679f

- Appease linter

terichadbourne added 9 commits February 13, 2019 15:35

Change icon and fix formatting for uploaded files

f0d5b70

- Change document icon to aqua SVG - Fix formatting of <ul> element for better design when multiple files are uploaded

Disable submit button in file lesson until upload

be14009

- Disable submit button in file lesson when !uploadedFiles - Add a note indicating this and make it even more prominent during hover over disabled button (have to hack it with a span b/c disabled buttons don't have a hover property)

Disallow folder upload

28d4039

- Disallow folder upload since we can't access the details we need in the browser. Users can successfully upload either a single file or multiple files through either drag-and-drop or selection. Pair programmed with @mikeal

Add 2nd file lesson

7204e1a

- Add a 2nd lesson to file tutorial series - Update dummy content in both lessons - TODO: Fix error messages in lesson 1 - TODO: Create real content for lesson 2

Complete files lesson 1 content

2c78e7f

- Complete lesson 1 exercise - TODO: Fix error which prevents fail/success messages from showing if you try to submit the default code as your code

Update 2nd file lesson (WIP)

59329d7

- Add exercise to practice adding a file to IPFS. - TODO: Fix validation

More validation flailing

337e123

- More attempts to get the right info to use for validation - TODO: Actually validate

terichadbourne added 3 commits April 3, 2019 13:25

Rename file tutorial to be about MFS

2b35f36

- Rename tutorial according to new focus on the Mutable File System - Update routes and index listings accordingly

Add lesson on files.ls

3ddc148

- Add lesson on `files.ls`

Update validation error message

40cb898

- Update validation error message

fsdiogo and others added 5 commits April 4, 2019 16:01

chore: sync with code branch

3244aa0

chore: boilerplates tidy up and path fix

0f3f156

fix: expected result of Lesson 3

b94d668

chore: some rephrasing to the first mfs lessons

e833e79

Add lesson on files.mkdir

215e98b

- Add files for lesson on files.mkdir - Update routs and tutorials.json accordingly - TODO: Implement validation

Sync with code branch

711cae4

terichadbourne changed the title ~~[WIP] File upload lesson~~ [WIP] MFS tutorial + file upload functionality Apr 11, 2019

fsdiogo added 4 commits April 11, 2019 17:44

feat: add the ability to override external errors

6a2f2ee

Merge branch 'code' into file-upload

1e250f6

chore: add instructions for overriding errors

68e8e36

chore: hide MFS lesson

c5aee7e

fsdiogo mentioned this pull request Apr 17, 2019

feat: show logs on ui #198

Merged

terichadbourne changed the title ~~[WIP] MFS tutorial + file upload functionality~~ [WIP] file upload functionality and error hijacking Apr 17, 2019

Clarify instructions for adding error override

ad72e2b

terichadbourne changed the title ~~[WIP] file upload functionality and error hijacking~~ file upload functionality and error hijacking Apr 17, 2019

fsdiogo merged commit c3de28b into code Apr 18, 2019

fsdiogo deleted the file-upload branch April 18, 2019 09:22

olizilla reviewed Apr 18, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

file upload functionality and error hijacking #111

file upload functionality and error hijacking #111

mikeal commented Jan 3, 2019

mikeal commented Jan 3, 2019

mikeal commented Jan 3, 2019

lidel commented Jan 25, 2019 •

edited

Loading

terichadbourne commented Jan 29, 2019 •

edited

Loading

lidel commented Feb 6, 2019 •

edited

Loading

terichadbourne commented Feb 13, 2019 •

edited

Loading

terichadbourne commented Feb 13, 2019

fsdiogo commented Apr 3, 2019

terichadbourne commented Apr 3, 2019

terichadbourne commented Apr 3, 2019

terichadbourne commented Apr 9, 2019

fsdiogo commented Apr 16, 2019

fsdiogo commented Apr 17, 2019 •

edited

Loading

terichadbourne commented Apr 17, 2019

terichadbourne commented Apr 17, 2019

terichadbourne commented Apr 17, 2019

olizilla Apr 18, 2019 •

edited

Loading

file upload functionality and error hijacking #111

file upload functionality and error hijacking #111

Conversation

mikeal commented Jan 3, 2019

mikeal commented Jan 3, 2019

mikeal commented Jan 3, 2019

lidel commented Jan 25, 2019 • edited Loading

terichadbourne commented Jan 29, 2019 • edited Loading

lidel commented Feb 6, 2019 • edited Loading

terichadbourne commented Feb 13, 2019 • edited Loading

terichadbourne commented Feb 13, 2019

fsdiogo commented Apr 3, 2019

terichadbourne commented Apr 3, 2019

terichadbourne commented Apr 3, 2019

terichadbourne commented Apr 9, 2019

fsdiogo commented Apr 16, 2019

fsdiogo commented Apr 17, 2019 • edited Loading

terichadbourne commented Apr 17, 2019

terichadbourne commented Apr 17, 2019

terichadbourne commented Apr 17, 2019

olizilla Apr 18, 2019 • edited Loading

Choose a reason for hiding this comment

lidel commented Jan 25, 2019 •

edited

Loading

terichadbourne commented Jan 29, 2019 •

edited

Loading

lidel commented Feb 6, 2019 •

edited

Loading

terichadbourne commented Feb 13, 2019 •

edited

Loading

fsdiogo commented Apr 17, 2019 •

edited

Loading

olizilla Apr 18, 2019 •

edited

Loading