Initial commit

Author: zzarcon

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+dist

.npmignore

@@ -0,0 +1,2 @@
+example
+webpack.config.js

README.md

@@ -1,2 +1,43 @@
 # react-file-preview
-Efficient way of rendering a image preview out of a File
+> Efficient way of rendering an image preview from a File
+
+# Installation
+
+```
+$ yarn add react-file-preview
+```
+
+# Motivation
+- auto revoke
+- efficient preview
+
+# Usage
+
+```
+import FilePreview from 'react-file-preview';
+
+class App extends React.Component {
+  onInputChange = e => {
+    const { currentTarget: { files } } = e;
+    const file = files[0];
+
+    this.setState({file});
+  }
+
+  render() {
+    const {file} = this.state;
+
+    return (
+      <div>
+        <input type="file" onChange={this.onChange} />
+        <FilePreview file={file}>
+          {(preview) => {
+            <img src={preview} />
+          }}
+        </FilePreview>
+      </div>
+    )
+  }
+}
+
+```

__tests__/filePreview.spec.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {shallow} from 'enzyme';
+import FilePreview from '../src';
+
+describe('FilePreview', () => {
+  const setup = () => {
+    const file = {} as File;
+    const createObjectURL = jest.fn().mockReturnValue('file-preview');
+    const revokeObjectURL = jest.fn(); 
+
+    (global as any).URL = {
+      createObjectURL,
+      revokeObjectURL
+    };  
+
+    return {
+      file,
+      createObjectURL,
+      revokeObjectURL
+    };
+  };
+  
+  it('should render the children component passing the preview', () => {
+    const {file, createObjectURL} = setup();
+    const component = shallow(
+      <FilePreview file={file} >
+        {(preview) => <img src={preview} />}
+      </FilePreview>
+    );
+
+    expect(createObjectURL).toBeCalledWith(file);
+    expect(component.find('img').prop('src')).toEqual('file-preview');
+  });
+
+  it('should generate a new preview when file prop changes', () => {
+    const {file, createObjectURL, revokeObjectURL} = setup();
+    const newFile = {} as File;
+    const component = shallow(
+      <FilePreview file={file} >
+        {() => <div />}
+      </FilePreview>
+    );
+
+    component.setProps({file: newFile});
+
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(createObjectURL).toHaveBeenCalledTimes(2);
+    expect(revokeObjectURL).toBeCalledWith('file-preview');
+    expect(createObjectURL.mock.calls[0][0]).toEqual(file);
+    expect(createObjectURL.mock.calls[1][0]).toEqual(newFile);
+  });
+
+  it('should revoke url when component is unmounted', () => {
+    const {file, createObjectURL, revokeObjectURL} = setup();
+    const component = shallow(
+      <FilePreview file={file} >
+        {() => <div />}
+      </FilePreview>
+    );
+
+    component.unmount();
+
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toBeCalledWith('file-preview');
+  });
+});

example/app.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {Component} from 'react';
+import FilePreview from '../src';
+
+export interface AppState {
+  isPreviewVisible: boolean;
+  file?: File;
+}
+
+export default class App extends Component <{}, AppState> {
+  state: AppState = {
+    isPreviewVisible: true
+  }
+
+  onChange = (e: any) => {
+    const { currentTarget: { files } } = e;
+    const file = files[0];
+
+    this.setState({file});
+  }
+
+  onToggle = () => {
+    this.setState({isPreviewVisible: !this.state.isPreviewVisible});
+  }
+
+  renderPreview() {
+    const {file, isPreviewVisible} = this.state;
+    if (!isPreviewVisible || !file) return;
+
+    return (
+      <FilePreview file={file}>
+        {(preview) => 
+          <img src={preview} />
+        }
+      </FilePreview>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <input id="browse" type="file" onChange={this.onChange} />
+        <button onClick={this.onToggle}>Toggle image</button>
+        <br/>
+        {this.renderPreview()}
+      </div>
+    )
+  }
+}

example/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React File Preview</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="../index.js"></script>
+</body>
+</html>

example/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('app'));

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "react-file-preview",
+  "version": "0.1.0",
+  "description": "Efficient way of rendering an image preview from a File",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "webpack -w",
+    "dev": "webpack-dev-server",
+    "test": "jest",
+    "test:ci": "jest --runInBand --coverage",
+    "build": "NODE_ENV=production tsc -p ./tsconfig.prod.json",
+    "release": "npm version patch && git push --tags && git push && npm publish",
+    "prepublishOnly": "yarn test:ci && yarn build"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
+    "transform": {
+      "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js"
+    },
+    "testMatch": [
+      "**/__tests__/*.(ts|tsx)"
+    ],
+    "resetMocks": true
+  },
+  "repository": "[email protected]:zzarcon/react-file-preview.git",
+  "author": "Hector Leon Zarco Garcia <[email protected]>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.2.0"
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.1.9",
+    "@types/jest": "^22.1.4",
+    "@types/react": "^16.0.40",
+    "@types/react-dom": "^16.0.4",
+    "awesome-typescript-loader": "^3.4.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest": "^22.4.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "typescript": "^2.7.2",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.11.1"
+  }
+}

preprocessor.js

@@ -0,0 +1,11 @@
+const tsc = require('typescript');
+const tsConfig = require('./tsconfig.json');
+
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      return tsc.transpile(src, tsConfig.compilerOptions, path, []);
+    }
+    return src;
+  },
+};

setupTests.js

@@ -0,0 +1,4 @@
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });

src/filePreview.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {Component, ReactNode} from 'react';
+
+export interface FilePreviewProps {
+  file: File;
+  children: (preview: string) => ReactNode;
+}
+
+export class FilePreview extends Component <FilePreviewProps> {
+  preview: string;
+
+  componentWillReceiveProps({file: newFile}: FilePreviewProps) {
+    const {file} = this.props;
+
+    if (file !== newFile) {
+      this.revoke();
+      this.createPreview(newFile);
+    }
+  }
+
+  componentWillMount() {
+    const {file} = this.props;
+
+    this.createPreview(file);
+  }
+
+  componentWillUnmount() {
+    this.revoke();
+  }
+
+  private createPreview(file: File) {
+    this.preview = URL.createObjectURL(file);
+  }
+
+  private revoke() {
+    URL.revokeObjectURL(this.preview);
+  }
+
+  render() {
+    const {children} = this.props;
+
+    return children(this.preview);
+  }
+}
+
+export default FilePreview;

src/index.ts

@@ -0,0 +1 @@
+export {FilePreview, FilePreview as default} from './filePreview';

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "removeComments": true,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015.collection",
+      "es2015.symbol",
+      "es2015.iterable",
+      "es2015.promise"
+    ],
+    "jsx": "react"
+  }
+}

tsconfig.prod.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "removeComments": true,
+    "declaration": true,
+    "outDir": "dist",
+    "lib": ["dom", "es6"],
+    "target": "es5",
+    "jsx": "react"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
+
+module.exports = {
+  devServer: {
+    
+  },
+  entry: './example/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader'
+      }
+    ]
+  },
+  plugins: [
+    new CheckerPlugin()
+  ]
+};