I've encountered many examples that didn't work for me because they used Promise objects or a misleading this while working with Reactjs. In my case, I was implementing a DropZone in reactjs and got the bytes using a technique similar to what's explained at this site: .
There were two key points that helped me:
- You need to extract the bytes from the FileReader's onload function within the event object.
After trying various approaches, what finally worked for me was:
const bytes = e.target.result.split('base64,')[1];
Here, e represents the event. In React, you should use const; although in plain Javascript, you could opt for var. This gave me the base64 encoded byte string.
Incorporating this into React involves setting up bindings in the constructor as follows (which is not relevant for vanilla Javascript):
this.uploadFile = this.uploadFile.bind(this);
this.processFile = this.processFile.bind(this);
this.errorHandler = this.errorHandler.bind(this);
this.progressHandler = this.progressHandler.bind(this);
Then, in your DropZone element, you would have onDrop={this.uploadFile}. For a non-React implementation, it's akin to adding an onclick event handler for a "Upload File" button:
<button onclick="uploadFile(event);" value="Upload File" />
The actual function (only applicable lines are shown) includes:
uploadFile(event){
// For React only
this.setState({
files: event,
});
console.log('File count: ' + this.state.files.length);
const in_files = this.state.files;
if (in_files.length > 0) {
for (let i = 0; i < in_files.length; i++) {
const a = i + 1;
console.log('in loop, pass: ' + a);
const f = in_files[i];
const reader = new FileReader();
reader.onerror = this.errorHandler;
reader.onprogress = this.progressHandler;
reader.onload = this.processFile(f);
reader.readAsDataURL(f);
}
}
}
An issue related to vanilla JS syntax for getting the file object can be found at:
JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"
For handling the progress indicator and other functionalities, appropriate functions along with CSS styles are required. Additionally, to fetch the blob data without the complexity of a Promise object, I leveraged the FileReader which proved effective even when alternatives like readAsArrayBuffer failed.
EPILOGUE:
In the processFile() function, directly setting the byte variable to an array within the JSON object rather than this.state solved an integration challenge faced during implementation.
To adopt a similar approach in vanilla JS, a single global variable could easily store and manage the file data, simplifying the process compared to React's state management. This technique eliminates the limitations posed by frameworks and enables easier access to file byte strings throughout the script.