0

Background

I built an app, which converts files from type A to type B (a binary file). I want to import and use a dummy file of type B to fill the data of file type A. The dummy always stays the same. The app has no backend. I want to share the html, so anything which requires turning off browser security etc., isn't an option.

Problem

At the moment, I load the files as I found here, but this works only with a backend server: Requesting blob images and transforming to base64 with fetch API

import dummy  from '../templates/Grid2.shp';

    let hex = await fetch(dummy)
        .then( response => response.blob() )
        .then( blob => new Promise( callback =>{
            let reader = new FileReader() ;
            reader.onload = function(){
                const serumShp = atob(this.result.substring(37)); // 37 strips the base64 info data:...
                callback(binaryToHex(serumShp))
            } ;
            reader.readAsDataURL(blob) ;
        }) ) ;

It works in my development but not at the built stage. As the browsers requests from the filesystem.

I found a solution over a file loader, but this solution also throws an error: Using file-loader to load binary file in react

import/no-webpack-loader-syntax

Also, I don't see any configuration files for Webpack. As far as I have seen I would need to eject them, which is also not recommended.

Question:

How can I import binary files into my app without a backend server/any changes, etc.?

Andi Giga
  • 2,918
  • 6
  • 30
  • 57

0 Answers0