ml-file-uploader v0.1.0

MLabs File Uploader

Uploads 1 or multiple files to Mlabs File Server.

How it works in a nutshell

For each file the class will

1. Build an normalized information payload for each file
2. Asks the server for a signed URL for each file
3. Uploads the file on this signed URL
4. Keeps polling the server asking for the files state
5. Trigger the "fileUploaded" callback for each file uploaded

This module backend lives on HERE

Usage

Import, require or add this script on your page. Then

const uploader = new MlFileUploader({
    ownerId: '000000000', // user id
});

Then you must create an array of objects with represents your files in the following fashion:

{
    fileObject: file,   // the file object (blob)
    channels: [],       // ignore (not implemented yet)
    configuration: {},  // optional - trakto id and other stuff
    uuid: '',           // optional - If you do not pass one, it will be generated on the fly
    ownerId: '',        // optional - it will use the instance ownerId if not provided
    fileType: '',       // optional - will be infered from fileObject if not passed
    extension: '',      // optional - will be infered from fileObject if not passed
    fileName: '',       // optional - will be infered from fileObject if not passed
    processors: '',     // optional - misc configurations about video chuncks and file processment
}

You will build this object depending on the way you are collecting the files. The important is to create an array of objects like that. Heres an example using a multiple file input and vanilla js:

let selectedFiles = undefined;
let preparedFiles = [];

document.querySelector('input[type=file').addEventListener('change', e => {
    e.preventDefault();
    
    preparedFiles = [];
    selectedFiles = e.target.files;

    Array.from(selectedFiles).forEach(file => {
    preparedFiles.push({
        fileObject: file,
        configurations: {}
    })
    });      
});

Now ask the uploader to up your files, and pass your callbacks:

uploader.upload({
    files: preparedFiles,
    onStart: (state) => {
        console.log('ALL STARTED!');
    },
    onFileUploaded: (state) => {
        console.log(state);
    },
    onFileRejected: (state) => {
        console.log(state);
    },
    onFinish: (state) => {
        console.log('ALL FINISHED!');
    },
});

You can check the index.html for a working example.

Uploader Configuration

files: Array of files to upload, (check above how to build objects to send)

onStart: Runs when the upload queue starts (not triggered if there is no files on files)

onFileUploaded: Triggered for each file uploaded with 1 argument about the uploaded file.

onFileRejected: Triggered for each file uploaded when a file has failed to upload on the server.

onFinish: Triggered when all files has been uploaded. If you use the same instance and call "upload()" multiple times, will be only one "On Finish" for all.

Development

This project is builded with webpack, babel and eslint.

Getting started

npm install

Developing

npm run dev

Developing with browser support

npm run serve

Developing with browser support and No Cors

This option runs chrome with security concerns disabled. This is useful to test requests, posts, gets etc without any CORS. Is not possible to override headers "Origin" on browser, with the option the browser will not fail on Cors.

npm run serve-no-cors

Build

npm run build

The Module

Webpack will pack a module on dist when you run "npm run build". The module is already in UMD (Universal Module Definition), so you can import, require or add directly on browser. This modules runs on top of "do-your-module" wireframe (just a starter configuration for webpack).

Sources on "src". Build on "dist".