Closed dabit3 closed 2 years ago
I'm working on a YouTube type of application and having an issue uploading larger videos.
Smaller videos work great, but I am having issues with videos in the range of 100MB or more.
Here is the error message I'm getting:
Here is the code (next.js app):
// initializing bundlr in pages/_app.js async function initialiseBundlr() { await window.ethereum.enable() const provider = new providers.Web3Provider(window.ethereum); await provider._ready() const bundlr = new WebBundlr("https://node1.bundlr.network", "matic", provider) await bundlr.ready() setBundlrInstance(bundlr) bundlrRef.current = bundlr fetchBalance() }
// main code in pages/index.js import BigNumber from 'bignumber.js' import { useContext, useState } from 'react' import { MainContext } from '../context' export default function Home() { const [file, setFile] = useState() const [image, setImage] = useState() const [URI, setURI] = useState() const [amount, setAmount] = useState() const { bundlrInstance, initialiseBundlr, balance, fetchBalance } = useContext(MainContext) async function initialize() { initialiseBundlr() } function onFileChange(e) { const file = e.target.files[0] if (file) { const image = URL.createObjectURL(file) setImage(image) let reader = new FileReader() reader.onload = function () { if (reader.result) { setFile(Buffer.from(reader.result)) console.log('file set...') } } reader.readAsArrayBuffer(file) } } async function uploadFile() { const tags = [{ name: 'Content-Type', value: 'video/mp4' }]; bundlrInstance.useChunking = true let tx = await bundlrInstance.uploader.upload(file, tags) console.log('tx: ', tx) setURI(`http://arweave.net/${tx.data.id}`) } async function fundWallet() { if (!amount) return const amountParsed = parseInput(amount) let response = await bundlrInstance.fund(amountParsed) console.log('Wallet funded: ', response) fetchBalance() } function parseInput (input) { const conv = new BigNumber(input).multipliedBy(bundlrInstance.currencyConfig.base[1]) if (conv.isLessThan(1)) { console.log('error: value too small') return } else { return conv } } return ( <div style={containerStyle}> { !balance && <button onClick={initialize}>Initialize</button> } { balance && ( <div> <h3>Balance: {balance}</h3> <div style={{ padding: '20px 0px'}}> <input onChange={e => setAmount(e.target.value)} /> <button onClick={fundWallet}>Fund Wallet</button> </div> <input type="file" onChange={onFileChange} /> <button onClick={uploadFile}>Upload File</button> { image && ( <video width="320" height="240" controls> <source src={image} type="video/mp4"/> </video> ) } { URI && <a href={URI}>{URI}</a> } </div> ) } </div> ) } const containerStyle = { padding: '100px 20px' }
This has (hopefully) been resolved as of client release 0.7.7 - if not, lmk
Awesome, thank you for the update!
I'm working on a YouTube type of application and having an issue uploading larger videos.
Smaller videos work great, but I am having issues with videos in the range of 100MB or more.
Here is the error message I'm getting:
Here is the code (next.js app):