Filepond: Take a look at tus for chunked uploading

Created on 26 May 2018  路  4Comments  路  Source: pqina/filepond

Most helpful comment

For someone who want FilePond work with tus, here is an example:

// client
FilePond.setOptions({
      server: {
        process: (fieldName, file, metadata, load, error, progress, abort) => {
          var upload = new tus.Upload(file, {
            endpoint: "http://localhost:3000/uploads/",
            retryDelays: [0, 1000, 3000, 5000],
            metadata: {
              filename: file.name,
              filetype: file.type
            },
            onError: function(err) {
              console.log("Failed because: " + err)
              error(err)
            },
            onProgress: function(bytesUploaded, bytesTotal) {
              progress(true, bytesUploaded, bytesTotal)
            },
            onSuccess: function() {
              load(upload.url.split('/').pop())
            }
          })
          // Start the upload
          upload.start()
          return {
            abort: () => {
              upload.abort()
              abort()
            }
          }
        }
      }
    })
//server
const tus = require('tus-node-server')
const server = new tus.Server()
server.datastore = new tus.FileStore({
  path: '/files'
})

const express = require('express')
const app = express()
app.use(express.static('public'))
const uploadApp = express()
uploadApp.all('*', server.handle.bind(server))
app.use('/uploads', uploadApp)

const host = '127.0.0.1'
const port = 3000
app.listen(port, host)

All 4 comments

@mvrhov Thanks!

Super interesting, you could use the tus js client to enable chunk uploading by writing a custom process function.

For someone who want FilePond work with tus, here is an example:

// client
FilePond.setOptions({
      server: {
        process: (fieldName, file, metadata, load, error, progress, abort) => {
          var upload = new tus.Upload(file, {
            endpoint: "http://localhost:3000/uploads/",
            retryDelays: [0, 1000, 3000, 5000],
            metadata: {
              filename: file.name,
              filetype: file.type
            },
            onError: function(err) {
              console.log("Failed because: " + err)
              error(err)
            },
            onProgress: function(bytesUploaded, bytesTotal) {
              progress(true, bytesUploaded, bytesTotal)
            },
            onSuccess: function() {
              load(upload.url.split('/').pop())
            }
          })
          // Start the upload
          upload.start()
          return {
            abort: () => {
              upload.abort()
              abort()
            }
          }
        }
      }
    })
//server
const tus = require('tus-node-server')
const server = new tus.Server()
server.datastore = new tus.FileStore({
  path: '/files'
})

const express = require('express')
const app = express()
app.use(express.static('public'))
const uploadApp = express()
uploadApp.all('*', server.handle.bind(server))
app.use('/uploads', uploadApp)

const host = '127.0.0.1'
const port = 3000
app.listen(port, host)

@tiaod Waw so nice! Thanks so much for sharing!

@tiaod Using the scripts above...how do you access the "metadata" property on the server side?

Was this page helpful?
0 / 5 - 0 ratings