Can we create mind file creator in react

[deepsingh245]

hello developers is there anyone who known how to make mind file creator in react. i want to build a form in which i want to upload a file and it automatically got converts into mind file without downloading it. is this possible.

[sxchintha]

Yes, it is possible.

1. Install mind-ar npm package - npm i mind-ar
2. Import the compiler - import { Compiler } from "mind-ar/dist/mindar-image.prod";
3. Create functions to load image and generate mind file in utils.js -

   
   const loadImage = async (file) =>
   new Promise((resolve, reject) => {
   const img = new Image();
   img.onload = () => resolve(img);
   img.onerror = reject;
   img.src = URL.createObjectURL(file);
   });

export const generateMindFile = async (compiler, files, setProgress) => { const images = []; for (let i = 0; i < files.length; i += 1) { images.push(await loadImage(files[i])); }

await compiler.compileImageTargets(images, (progress) => { if (setProgress) { setProgress(progress); } });

const exportedBuffer = await compiler.exportData();

// Create a file from the exported buffer const blob = new Blob([exportedBuffer]); const mindFile = new File([blob], 'mindFile.mind', { type: 'application/octet-stream', }); return mindFile; };

4. Use the generateMindFile() function to generate the mind file -

import { useState, useEffect } from 'react'; import { Compiler } from "mind-ar/dist/mindar-image.prod";

import { generateMindFile } from './utils';

const GenerateMindFileForm = () => { const [imageFiles, setImageFiles] = useState(null); // use to set the selected image files const [mindFileProgress, setMindFileProgress] = useState(0); // use to track the progress of generating mind file

const handleSubmit = () => { const mindFile = await generateMindFile(new Compiler(), imageFiles, setMindFileProgress);

const formData = new FormData();
formData.append('mindFile', mindFile);

/**** REST OF THE FORM SUBMIT ****/

}

return ( <> {/ IMPLEMENT THE FORM UI /} </> ); }

[dwalks12]

I made a React Hook for this for anyone interested:

import { Compiler } from 'mind-ar/dist/mindar-image.prod.js';
import { useState } from 'react';

const useMindCompiler = () => {
  const [progress, setProgress] = useState('0');
  const [data, setData] = useState<Blob | null>(null);
  const compiler = new Compiler();

  const loadImage = async (file: Blob) => {
    const img = new Image();

    return new Promise((resolve, reject) => {
      let img = new Image()
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = URL.createObjectURL(file);
    })
  }

  const compileFiles = async (files: Blob[]) => {
    const images = [];
    for (let i = 0; i < files.length; i++) {
      images.push(await loadImage(files[i]));
    }
    let _start = new Date().getTime();
    await compiler.compileImageTargets(images, (progress: number) => {
      setProgress(progress.toFixed(2))
    });

    const exportedBuffer = await compiler.exportData();
    var blob = new Blob([exportedBuffer]);
    setData(blob);
    // With this data you can store it
    // save data as .mind file
  }

  return {
    progress,
    data,
    compileFiles
  };
}

export default useMindCompiler;

All you need to do is pass in the files/Blobs you are uploading to turn into the mind file by using the compileFiles function.