daily pastebin goal
20%
SHARE
TWEET

Untitled

a guest Feb 16th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import './img.css';
  3. import NavBart from "./NavBart";
  4. import TextField from "@material-ui/core/TextField";
  5. import Grid from "@material-ui/core/Grid";
  6. // Import Brace and the AceEditor Component
  7. import brace from 'brace';
  8. import AceEditor from 'react-ace';
  9. // Import a Mode (language)
  10. import 'brace/mode/java';
  11. // Import a Theme (okadia, github, xcode etc)
  12. import 'brace/theme/github';
  13.  
  14. class FrontPage extends Component
  15. {
  16.     state = {
  17.         file: '',
  18.         imagePreviewUrl: '',
  19.         text: ''
  20.     };
  21.     _handleSubmit(e) {
  22.       e.preventDefault();
  23.    
  24.      
  25.       console.log('handle uploading-', this.state.file);
  26.     }
  27.    
  28.     _handleImageChange(e) {
  29.       e.preventDefault();
  30.    
  31.       let reader = new FileReader();
  32.       let file = e.target.files[0];
  33.    
  34.       reader.onloadend = () => {
  35.         this.setState({
  36.           file: file,
  37.           imagePreviewUrl: reader.result
  38.         });
  39.       }
  40.    
  41.       reader.readAsDataURL(file)
  42.     }
  43.  
  44.     _handleCodeTextChange(newText) {
  45.         this.setState({text: newText});
  46.     }
  47.  
  48.     _handleCodeTextSubmit(e) {
  49.  
  50.     }
  51.    
  52.     render() {
  53.       let {imagePreviewUrl} = this.state;
  54.       let $imagePreview = null;
  55.       if (imagePreviewUrl) {
  56.         $imagePreview = (<img src={imagePreviewUrl} />);
  57.       } else {
  58.         $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
  59.       }
  60.    
  61.       return (
  62.         <div className="previewComponent">
  63.             <Grid container
  64.                   direction="row"
  65.                   alignItems="stretch"
  66.             >
  67.                 <Grid item className="gridItem">
  68.                     <form onSubmit={(e)=>this._handleSubmit(e)}>
  69.                         <input className="fileInput"
  70.                                type="file"
  71.                                onChange={(e)=>this._handleImageChange(e)} />
  72.                         <button className="submitButton"
  73.                                 type="submit"
  74.                                 onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
  75.                     </form>
  76.                     <div className="imgPreview">
  77.                         {$imagePreview}
  78.                     </div>
  79.                 </Grid>
  80.                 <Grid item className="gridItem">
  81.                     <form
  82.                         id="codeTextField"
  83.                         label="You can also directly insert code here">
  84.                         <TextField
  85.                             multiline
  86.                             className="codeInput"
  87.                             onChange={(e) => this._handleCodeTextChange(e)}/>
  88.                         <button className="submitButton"
  89.                                 id="submitCodeButton"
  90.                                 type="submit"
  91.                                 onClick={(e) => this._handleCodeTextSubmit(e)}>Resubmit Code</button>
  92.                     </form>
  93.                 </Grid>
  94.             </Grid>
  95.         </div>
  96.       )
  97.     }
  98. }
  99.  
  100. export default FrontPage;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top