edit-video.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from 'styled-components';
import EditVideoFields from './edit-videoFields'
import { ButtonToggle } from "reactstrap";
import { Container, Row, Col } from 'reactstrap';
import axios from 'axios';
import auth0Client from "../../Auth";
import { useAuth0 } from "../../react-auth0-spa";
import {Auth0Context} from "../../react-auth0-spa"
import { Auth0Provider } from "../../react-auth0-spa";
import Profile from '../Profile';
import { withRouter } from "react-router";
import {
 BrowserRouter as Router,
 Switch,
 Route,
 Link
} from "react-router-dom";


class EditVideo extends Component {
  constructor(props) {
    super(props);

    this.clickFileInput = this.clickFileInput.bind(this);
    this.replaceInput = this.replaceInput.bind(this);
    // this.onSubmit = this.onSubmit.bind(this);
    this.onClick = this.onClick.bind(this);
    this.capture = this.capture.bind(this);
    this.onChange = this.onChange.bind(this);
    this.fieldChange = this.fieldChange.bind(this);
    this.save = this.save.bind(this);
    this.videoRef = React.createRef();
    this.canvasRef = React.createRef();
    this.dataURItoBlob = this.dataURItoBlob.bind(this);
    // this.handleAuthentication = this.handleAuthentication.bind(this);
    
    
    this.replaceInputRef = React.createRef();
    this.fileRef = React.createRef();
    this.inputRef = React.createRef();
    this.addFiles = React.createRef();
    this.resetFile = this.resetFile.bind(this);



    this.state = {
      file: null,
      selectedVid: null,
      gotCanvasImg: null,
      isLoading: false,
      requestDone: false,
      video: {},
      user_video: {},
      user_fields: {},
      user_image: {},
      fileContent: null,
      songsList: null,
      userHasAccess: false,
      videoSelected: false,
      videoFields: {title:"", date:"", description:""},
    };

  }


  onChange(event) {
    this.setState({
      beforeImageSave: URL.createObjectURL(event.target.files[0]),
      file: event.target.files[0],
      loaded: 0,
    });
  }

  resetFile(event) {
    event.preventDefault();
    this.setState({ file: null });
  }

  onClickHandler = () => {
    const data = new FormData()

    
    data.append('file', this.state.file)
    // if (this.state.file !== null && this.state.file.length !== 0) {
    // console.log(this.state.file)
    axios.post("http://localhost:3000/albums", data, { 
     }).then(res => { // then print response status
      console.log(res.statusText)
    })



     console.log("2");
   }

   componentDidMount() {
    let value = this.context;
  // auth0Client.handleAuthentication();
  console.log(value);
  console.log(this.props.myHookValue);
  const { match: { params} } = this.props;
  let user_fields = this.state.user_fields;
  let user_video = this.state.user_video;
  let user_image = this.state.user_image;
  fetch(`http://localhost:8000/video/${params.videoId}`)
  .then((response) =>
    response.json())
  .then((data) => {
    console.log("data" + JSON.stringify(data))
    this.setState({ user_fields : data[0], user_video: data[1], user_image: data[2] });
    if (this.context.user.sub != user_fields.user_id) {
     this.setState({userHasAccess: true})
   }
   }).then(() => {
   console.log()
   const canvas = this.canvasRef.current;
   var img = new Image();
   img.src = "http://localhost:8000/" + this.state.user_image.path;
   var ctx = canvas.getContext('2d');
   img.onload = function(){
   ctx.drawImage(img, 0, 0);
   }
   this.setState({ requestDone: true });
          // console.log(this.state.afterSlice)
        }).catch((error) => {
          console.log("Error " + error)
        })

      }


      fieldChange (event) {
       const { name, value } = event.target;
       this.setState(prevState => ({
         videoFields: {...prevState.videoFields, [name]: value}
       }));

     }


     

    save(event) {
      event.preventDefault();

      let user_id;

      let data;

      const { history } = this.props;

      Promise.resolve().then(() => {

        user_id = this.context.user.sub;

        data = new FormData()

  // data.append('file', this.state.gotCanvasURL);

  const canvas = this.canvasRef.current;

  data.append('file', this.state.gotCanvasImg, "thumbnail.jpeg")
  data.append('video', this.state.selectedVid)


  console.log("data" + JSON.stringify(data))

}).then(()=> {
  this.setState(prevState => ({
   videoFields: {...prevState.videoFields, user_id}
 }))

  data.append('fields', JSON.stringify(this.state.videoFields))
}).then(()=> {
  axios.post("http://localhost:3000/video", data, { 
  }).then(res => { // then print response status
    console.log(res.statusText)
  })
}).catch((err)=> {console.log(err)});

}






clickFileInput() {
  this.inputRef.current.click();
}

replaceInput() {
  this.replaceInputRef.current.click();
}

clickAddFiles () {
  this.addFiles.current.click();
}


onClick(event) {
  let videoFields = this.state.videoFields;
  if(videoFields.date  === "" || videoFields.title  === "" || videoFields.description === "" || this.state.gotCanvasImg === null) {
    alert("ERROR: You have data or information that you haven't added");
  } else {
    this.save(event);
  }
}

capture() {
  this.setState({thumbnailSelected: true});
  const canvas = this.canvasRef.current;
  const video = this.videoRef.current;
  var c = canvas, v = video;

  var vRatio = (c.height / v.videoHeight) * v.videoWidth;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, c.width / 2 - vRatio / 2, c.height / 2 - c.height / 2, vRatio, c.height);
    // canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    var blob = this.dataURItoBlob(canvas.toDataURL());
    this.setState({
      gotCanvasImg: blob,
      loaded: 0,
    })
  }

  dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(dataURI.split(',')[1]);
    }

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
  }
  
  render() {

    return (


      <div className="downloadMusic">

      <Container>
      <Row>
      <Col>
       <div>
       <video src={!this.state.requestDone ? "" : "http://localhost:8000/" + this.state.user_video.path} width="640" height="360" ref={this.videoRef} crossOrigin="anonymous" controls></video>
       </div>
       <button onClick={this.capture}>Capture Thumbnail</button> <br/><br/>
       <canvas width="320" height="180" style={{border: "1px solid black"}} ref={this.canvasRef}></canvas>

       </Col>
       </Row>
       </Container>

       {this.state.requestDone && 
        <Container>                 
        <Row>
        <Col>
        <EditVideoFields
        file={this.state.file}
        onChange={this.onChange}
        onClick={this.resetFile}
        video={this.state.user_fields}
        fieldChange={this.fieldChange}
        />

        </Col>
        </Row>
        </Container>
      }




        



      <Container>
      <Row>
      <Col>

      <div className="belowList">

      <ButtonToggle onClick={this.onClick} color="success">Save
      </ButtonToggle> 
      </div>

      </Col>
      </Row>
      </Container>




      </div>


      
      );
      }
    }

    EditVideo.contextType = Auth0Context;

    export default EditVideo;

node.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const db = require('./queries');
const video = require('./video');
const cors = require('cors');
const port = 8000;
var multer = require('multer');


var storage = multer.diskStorage({
	destination: (req, file, cb) => {
		cb(null, 'public')
	}, 
	filename: (req, file, cb) => {
		cb(null, Date.now() + '-' +file.originalname)
	}
})


var upload = multer({ storage: storage }).fields([{
           name: 'file', maxCount: 1
         }, {
           name: 'songs', maxCount: 30
         }, {
           name: 'video', maxCount: 1
         }]);

app.use(bodyParser.urlencoded({extended: true}));

app.use('/public', express.static('public'));


app.use(bodyParser.json())

app.use(cors());
app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

app.get('/', (request, response) => {
  response.json({ info: 'Node.js, Express, and Postgres API' })
})

app.get('/video/:id', video.getVideoByID);

app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})


module.exports = {
  express,
  app,
}