2

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
  • 3,744
  • 9
  • 38
  • 68

1 Answers1

0

Sorry, I cannot help, but pointing out that there is a general discussion in CRA to support a more elegant way of importing binary/raw data. Sadly there doesn't seem to be much progress, the proposal is from 2018.

knipknap
  • 5,934
  • 7
  • 39
  • 43