node package manager


Ripple | Upload

Coverage Status Build Status

This module aims to make uploading forms nicer to deal with. Given a <form>, you can get a sensible JSON object on the server side where the keys are the [name] attribute of each control. In particlar, it turns type="file" elements into an array of native Streams (with backpressure and all) so you can then simply pipe them.

First, use utilise/form to turn your form element into a simple plain JSON object.

const { values } = form(formElement)

Then upload. You get two events for updates: progress and response.

ripple.upload('resource', values)
  .on('progress', progress => ...)
  .on('progress', response => ...)

The resource identifies which handler to use on the server-side. For example, let's say you registered an events resource, then its from function would receive the upload. Complete example below and see the example/test for a real example:

  <input type="text" name="title">
  <input type="file" name="photos"> 
// server 
ripple('events', [], { from })
function from(req, res){
  if (!req.type == 'upload') return
  // req.value contains everything you need to process 
  req.value == {
    name: ... // some text 
    photos: [...] // An array of streams, one for each file 
  // Use res to respond directly to the upload.  
  // You can pass any arguments you like. 
  // This is what the "response" event on the client receives 
  if (success) 
    res(200, '/event/123')
    res(500, 'error')
// client 
const { values } = form(formElement)
ripple.upload('events', values)
  .on('progress', progress => {
      title: 'Uploading Event..'
    , content: progress + '%'
    , type: 'working'
  .on('response', (status, url) => {
    const title   = status == 200 ? 'Done' : 'Error'
        , type    = status == 200 ? 'success' : 'error' 
        , content = status == 200 
            ? 'Great - Your event has now been published!'
            : 'Uh oh, something went wrong! Please try again later'
        , buttons = [{ type: 'primary', text: 'Close' }]
    swal({ title, type, content, buttons })

(NB: swal comes from pemrouz/sweet-alert and go from pemrouz/decouter)