{"id":1832,"date":"2016-12-31T01:00:44","date_gmt":"2016-12-31T06:00:44","guid":{"rendered":"http:\/\/www.phpied.com\/?p=1832"},"modified":"2016-12-31T21:27:08","modified_gmt":"2017-01-01T02:27:08","slug":"fail","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/fail\/","title":{"rendered":"File API Input Layer"},"content":{"rendered":"

Every once in a while I feel inspired to create a<\/a> little<\/a> tool<\/a> to \"do one thing\" (tm). But often I get distracted and a little too lazy to get off the ground and forget all about it. So I thought maybe a little helper can, well, help move things along.<\/p>\n

Enter FAIL<\/a>, short for File API Input Layer<\/em> (yup, totally made up to match the acronym).<\/p>\n

FAIL<\/h2>\n

It's a very, very simple blueprint for any single-page tool that needs to read a file (or files) from the user and do something with this file. All client-side, naturally, what cannot<\/em> be done in JavaScript these days?<\/p>\n

Here's the thing in action<\/a> - it takes images through drag and drop or though a file input dialog. Then simply shows the images with some data about them:<\/p>\n

\"screen-shot-2016-12-29-at-7-11-06-pm\"<\/p>\n

FAIL doesn't do anything with the images, it's the job of the future tools that could be using it.<\/p>\n

DEMO<\/a><\/p>\n

React<\/h2>\n

FAIL is written in React. I'm probably still a little old-school and when I have an idea I create a blank test.html and go from there, vanilla-like. But in this case I decided to go against my lazy-bum instinct and use something that can get me off the ground. And allow me to write all the ES2019 I want. Even though this means dreaded SETUP. I hate setting stuff up, kills the mood \ud83d\ude42 But in this case turns out React is just perfect for this type of tool. <\/p>\n

I couldn't be bothered with Redux or whatever though, not even my self-grown DIY flux implementation. That would be too much.<\/p>\n

I used create-react-app<\/a><\/code> to get started:<\/p>\n

\r\n$ create-react-app fail\r\n$ cd fail\r\n$ npm start\r\n<\/pre>\n
Code<\/h2>\n
I shoved all the JS in one file (can't be bothered) and it still ended up under 100 lines of code. The app's components are composed like:<\/p>\n
\r\n<App>\r\n  <Uploads \/>\r\n  <Results \/>\r\n<\/App>\r\n<\/pre>\n
App<\/code> is actually the one generated by create-react-app<\/code>. In its render()<\/code> I put:<\/p>\n
\r\nrender() {\r\n  return (\r\n    <div className=\"App\">\r\n      <div className=\"App-header\">\r\n        <h1>Upload me some images<\/h1>\r\n        <p>pst, you can just drop them anywhere<\/p>\r\n      <\/div>\r\n      <div className=\"Tool-in\">\r\n        <Uploads onChange={this.handleUploads.bind(this)} \/>\r\n      <\/div>\r\n      <div className=\"Tool-out\">\r\n        <Results files={this.state.files} \/>\r\n      <\/div>\r\n    <\/div>\r\n  );\r\n}\r\n<\/pre>\n
Simple, eh?<\/p>\n
Now Uploads<\/code> and Results<\/code> are even simpler. They just render something. They don't need to maintain state. So they can be implemented as stateless functional components<\/em>. If you're not familiar with those see this diff<\/a> where I switched from ES class syntax to functional components.<\/p>\n
Uploads<\/code> is just a file input:<\/p>\n
\r\nconst Uploads = ({onChange}) =>\r\n  <div>\r\n    <label htmlFor=\"files\" className=\"Uploads-select\">Select files...<\/label>\r\n    <input \r\n      type=\"file\" \r\n      id=\"files\" \r\n      multiple \r\n      accept=\"image\/*\" \r\n      style={{display: 'none'}} \r\n      onChange={onChange}\r\n    \/>\r\n  <\/div>;\r\n<\/pre>\n
Results<\/code> just loops though the uploaded files to put up a table:<\/p>\n
\r\nconst Results = ({files}) => {\r\n  if (files.length === 0) {return <span\/>;}\r\n  return (\r\n    <table className=\"Results-table\">\r\n      <tbody>\r\n      <tr><th>Image<\/th><th>filename<\/th><th>size<\/th><th>mime<\/th><\/tr>\r\n      {files.map((f, idx) => {\r\n        if (!f.type.startsWith('image\/')) {\r\n          return null;\r\n        }\r\n        return (\r\n          <tr key={idx}>\r\n            <td><img alt={f.name} src={window.URL.createObjectURL(f)} height=\"60\" \/><\/td>\r\n            <td>{f.name}<\/td>\r\n            <td>{f.size}<\/td>\r\n            <td>{f.type}<\/td>\r\n          <\/tr>\r\n        );\r\n      })}\r\n      <\/tbody>\r\n    <\/table>\r\n  );\r\n}\r\n<\/pre>\n
Finally the \"brains\" or the non-render methods of the App<\/code> component:<\/p>\n
\r\nconstructor() {\r\n  super();\r\n  this.state = {\r\n    files: [],\r\n  };\r\n  document.documentElement.ondragenter = e => e.preventDefault();\r\n  document.documentElement.ondragover = e => e.preventDefault();\r\n  document.documentElement.ondrop = e => {\r\n    e.preventDefault();\r\n    this.update(e.dataTransfer.files); \/\/ dropped files\r\n  }\r\n}\r\n\r\nhandleUploads(e) { \r\n  this.update(e.target.files); \/\/ from file input\r\n}\r\n\r\nupdate(moreFiles) {\r\n  const files = Array.from(moreFiles);\r\n  if (!files) {\r\n    return;\r\n  }\r\n  this.setState({\r\n    files: this.state.files.concat(files)\r\n  });\r\n}\r\n<\/pre>\n
As you can see all we need to do is maintain the list of files<\/code> in the state<\/code> and all comes to place.<\/p>\n
The constructor also takes care of setting up drag-drop listeners.<\/p>\n
C'est tout!<\/h2>\n
Once again - code<\/a> and demo<\/a>.<\/p>\n
I'd be thrilled if anyone uses this as a jumping point to create different tools. We can never have too many tools!<\/p>\n
Oh yeah - and if you want to learn React in 2017 just buy my book<\/a> \ud83d\ude42<\/p>\n
Update: Part 2 where the app becomes a PWA<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Every once in a while I feel inspired to create a little tool to “do one thing” ™. But often I get distracted and a little too lazy to get off the ground and forget all about it. So I thought maybe a little helper can, well, help move things along. Enter FAIL, short for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,366,22],"tags":[],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1832"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=1832"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1832\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=1832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=1832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=1832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}