Large file / video uploads not working (>100mb)

[dabit3]

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'
}

[JesseTheRobot]

This has (hopefully) been resolved as of client release 0.7.7 - if not, lmk

[dabit3]

Awesome, thank you for the update!