kischang/stm32dfu

STM32 DFU Lib And Example

stm32dfu's Issues

Example is not working

Hello,
I'm trying to implement DFU in my react project.

I've tried a lot of different things without any success.

My code:

import React, { Component } from 'react';
import stm32dfu from 'stm32dfu';

import { Buffer } from "buffer"

class DfuUploader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dfuImage: null,
      error: null,
      loading: true,
      deviceSettings: null,
    };
    this.flashFirmware = this.flashFirmware.bind(this);
    this.initializeDevice = this.initializeDevice.bind(this);
  }

  async componentDidMount() {
    await this.fetchDfuFile();
  }

  async fetchDfuFile() {
    try {
      const response = await fetch('/public/firmwares/firmware.bin');

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const fileBlob = await response.blob();
      console.log('File Blob:', fileBlob);

      const arrayBuffer = await fileBlob.arrayBuffer().then();
      console.log('Array Buffer:', arrayBuffer);

      if (!arrayBuffer) {
        throw new Error('Failed to convert Blob to ArrayBuffer');
      }

      // Pass the Uint8Array to parseDfuImage
      const parsedDfuImage = stm32dfu.parseDfuImage(arrayBuffer);
      console.log('Parsed DFU Image:', parsedDfuImage);

      this.setState({
        dfuImage: parsedDfuImage,
        loading: false,
      });
    } catch (error) {
      console.error('Error fetching or parsing DFU file:', error);
      this.setState({
        error: error.message,
        loading: false,
      });
    }
  }

  async initializeDevice() {
    try {
      const deviceSettings = await stm32dfu.findAllStm32Device(0x0483); // Replace with the actual vendorId

      if (!deviceSettings.length) {
        throw new Error('No STM32 devices found');
      }

      const device = await stm32dfu.getDfu(deviceSettings[0].device, deviceSettings[0]);

      this.setState({ deviceSettings, device });
    } catch (error) {
      console.error('Error initializing device:', error);
      this.setState({
        error: error.message,
      });
    }
  }

  async flashFirmware() {
    const { deviceSettings, dfuImage } = this.state;

    if (!deviceSettings || !dfuImage) {
      console.error('Device settings or DFU image is not available.');
      return;
    }

    const flashSetting = {
      logger: {
        debug: (...data) => { console.log(data); },
        info: (...data) => { console.log(data); },
        warn: (...data) => { console.log(data); },
        error: (...data) => { console.log(data); },
      },
      handler: (done, total) => {
        console.log(`${done} / ${total}`);
      },
    };

    try {
      await stm32dfu.flash(deviceSettings[0], dfuImage, flashSetting);
      console.log('Firmware flashed successfully!');
    } catch (error) {
      console.error('Error flashing firmware:', error);
    }
  }

  render() {
    const { error, loading } = this.state;

    return (
      <div>
        <h1>DFU Uploader</h1>
        {error ? (
          <p>Error: {error}</p>
        ) : loading ? (
          <p>Loading DFU file...</p>
        ) : (
          <div>
            <p>DFU Image successfully parsed!</p>
            <button onClick={this.initializeDevice}>Initialize Device</button>
            <button onClick={this.flashFirmware}>Flash Firmware</button>
          </div>
        )}
      </div>
    );
  }
}

export default DfuUploader;

I'm always getting this error : Error: e2.slice(...).readInt32LE is not a function ... I'm pretty sure I missed something, but I can't find out.
I'm guessing that my firmwareFile is not in the correct buffer format to pass it but idk ...
Does one have an idea ?

Thanks.