subirArchivoReact.js

subirArchivoReact.js

import React from 'react';
import ImageUploader from 'react-images-upload';
import axios from 'axios';


import imageDemo from './imagenes/demo.png';
 
export default class App extends React.Component{

  constructor(props) {
		super(props);
		 this.state = {
       image: ''
      };
	}

	onDrop(pictureFiles, pictureDataURLs) {
    console.log(pictureFiles);
    console.log(pictureDataURLs);
		this.setState({
      image: pictureDataURLs,
    });

    var bodyFormData = new FormData();
    bodyFormData.append('userfile', pictureFiles[ (Number(pictureFiles.length) -1) ]);

    axios({
      method: 'post',
      url: 'http://localhost:8888/subirArchivos/index.php/Welcome/uploadFile',
      config: { headers: {'Content-Type': 'multipart/form-data' }},
      data: bodyFormData,
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (response) {
      console.log(response);
  });



  }
  
  render(){
    return(
      <div>

        

        <ImageUploader
          withIcon={true}
          buttonText='seleciona la imagen'
          onChange={this.onDrop.bind(this)}
          imgExtension={['.jpg', '.gif', '.png', '.gif']}
          maxFileSize={5242880}
        />

        <img src={this.state.image[(Number(this.state.image.length) - 1)]} />
        <br></br>
        <img src={imageDemo}></img>
      </div>
    );
  }
}