If you have the File object, from a file picker for example, you can pass the object directly to loadDocument function.
<!-- add our input and a label -->
<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">
<div id='viewer' style={{"width":"1024px","height":"600px"}}></div>
<script>
const input = document.getElementById('file_upload');
WebViewer(...)
.then(instance => {
input.addEventListener('change', () => {
// Get the file from the input
const file = input.files[0];
instance.loadDocument(file, { filename: file.name });
});
const { docViewer } = instance;
docViewer.on('documentLoaded', () => {
// perform document operations
});
});
</script>
<!-- add our input and a label -->
<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">
<div id='viewer' style={{"width":"1024px","height":"600px"}}></div>
<script>
const input = document.getElementById('file_upload');
WebViewer(...)
.then(instance => {
input.addEventListener('change', () => {
// Get the file from the input
const file = input.files[0];
instance.UI.loadDocument(file, { filename: file.name });
});
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
// perform document operations
});
});
</script>
