3D model renderer component not loading file - node.js

Question

I'm working on a feature for a web app I'm developing that consists in a .obj model viewer. The thing is that I don't really know how to work with the three.js library so I decided to go with a dependency to do the trick, I'm using this one. Basically what I'm doing is to get the content of the file in the redux state which is initially obtained by a backend request, so, I ultimately use the state variable and pass it a component prop to the <OBJModel /> component, but I get this error when trying to load:
https://pasteboard.co/Jtdkigq.png
https://pasteboard.co/JtdkPoRk.png
This is the front-end code:
import React from 'react';
import { OBJModel } from 'react-3d-viewer';
import { connect } from 'react-redux';
import { getModel } from './../../actions';
import golem from './../../Stone.obj';
class ModelViewer extends React.Component {
componentDidMount() {
document.querySelector('#upload-modal').style.display = 'flex';
let id = '';
let slashCounter = 0;
for (let i = 0; i < window.location.pathname.length; i++) {
if (slashCounter === 2) {
id = id + window.location.pathname[i];
}
if (window.location.pathname[i] === '/') {
slashCounter++;
}
}
this.props.getModel(id);
}
render() {
if (this.props.model.previewModel)
console.log(this.props.model.previewModel);
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
{!this.props.model.previewModel ? null : (
<OBJModel
height="500"
width="500"
position={{ x: undefined, y: -5, z: undefined }}
src={this.props.model.previewModel}
/>
)}
<div id="upload-modal" className="upload-modal">
<div className="upload-modal-content">
<p className="upload-modal-header">
<i
className="exclamation circle icon"
style={{ color: 'gray' }}
/>
Loading model...
</p>
<div
className="ui indicating progress active progress-indicator"
id="upload-bar-indicator"
>
<div className="bar" id="upload-bar">
<div className="progress" id="modal-upload-progress"></div>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return { model: state.model };
};
export default connect(mapStateToProps, { getModel })(ModelViewer);
This is the action function that makes the request to the backend:
export const getModel = (id) => {
return async (dispatch) => {
const config = {
onDownloadProgress: function (progressEvent) {
let percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
document.querySelector(
'#modal-upload-progress'
).innerHTML = `${percentCompleted}%`;
document.querySelector(
'#upload-bar'
).style.width = `${percentCompleted}%`;
document
.querySelector('#upload-bar-indicator')
.setAttribute('data-percent', `${percentCompleted}`);
},
};
const response = await axios.get(
`https://hushpuppys-3d-hub-api.herokuapp.com/api/v1/modelfiles/${id}.obj`,
config
);
document.querySelector('#upload-modal').style.display = 'none';
dispatch({ type: 'GET_MODEL', payload: response.data.data });
};
};
This is the controller that downloads the file from the Cloud Storage where im storing the files:
exports.fileDownloaderController = async (req, res) => {
try {
const fileName = req.params.id;
const config = {
headers: { Authorization: credentials.authorizationToken },
};
await axios
.get(
`${credentials.downloadUrl}/file/hushpuppys-3d-hub-storage/${fileName}`,
config
)
.then(function (response) {
console.log(response.data);
res.status(200).json({
status: 'success',
data: response.data,
});
})
.catch(function (err) {
console.log(err); // an error occurred
});
} catch (err) {
console.log(err);
res.status(404).json({
status: 'fail',
message: err.message,
});
}
};
And this is how the downloaded files look like when they are downloaded from the server, and logged in the console:
https://pasteboard.co/JtdpMCi.png