scan bar

problema multiple file

by sistemasnegros

HTML

<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const scanBar = (canvas, promesa) => {

  Quagga.decodeSingle({
    decoder: {
      readers: [
        "code_39_reader",
        "code_39_vin_reader",
      ]
    },
    locate: true, // try to locate the barcode in the image
    src: canvas.toDataURL(),
    debug: true,
    //multiple: true,
  }, promesa);


};

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {    
    }
    
    this.handleselectedFile = this.handleselectedFile.bind(this);
  }
  
  handleselectedFile(event) {
    const filesSeleted = event.target.files;    
    Array.from(filesSeleted).forEach(imagenFile => this.imagenRead(imagenFile) );
    
  }
  
    imagenRead(imagenFile){
    
    const reader = new FileReader();
    reader.onload = (e) => {
      const image = e.target.result;
      console.log(image);
      //descompretions
      const tiff = new Tiff({buffer: image});
      const canvas = tiff.toCanvas();

      //scan barcode
      scanBar(canvas, ( result ) => {
        
        if(result.codeResult) {
          const guia = result.codeResult.code;
          alert("result", result.codeResult.code);
          console.log("result", result.codeResult.code);
          //this.requestGuia(guia, imagenFile);
        } else {        
					alert("not detected");
          console.log("not detected");
        }
      });
    };
    reader.readAsArrayBuffer(imagenFile); // Read imagen
  }
  
  render() {
    return (
      <div>
       <input type="file" name="" id="" onChange={this.handleselectedFile}
          className="btn btn-primary"
          multiple          
        />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))