multiple-sources-uploader v1.1.3

multiple-sources-uploader

Lightweight (~20Kb minified & gziped) uploader that connects with social medias.

Why?

I couldn't find any package that would help me getting photos from social media APIs. The closest thing I found was cloudinary/uploadcare widgets, which are quite heavy (not acceptable on mobile) and restricted to use with their services.

Also, I didn't like the idea of uploading big photos and to resize them on the server. That's why I included a cropper and a resizer (based on pica - high quality resizer) to this uploader. This way, you'll only upload what you need and save bandwith & storage space (plus time for your users). As a bonus, it can convert your photos to webp if your browser support it.

When I resized a 5.7Mb photo to 1000x1000, its final weight was only 56Ko (webp format). Pretty smooth to upload, right?

Features

Upload any photos from:

• your computer
• your webcam/phone camera
• Facebook
• Google Photos
• Instagram

Edit them:

• crop (+ aspect ratio)
• rotate
• mirror
• resize

Work on small and big screens :)

Documentation

Constructor

import MSUploader from 'multiple-sources-uploader'

MSUploader(options)

Options

Uploader

Note:

• The popup will close right after the upload starts.
• The user will get an alert if he tries to leave the page while an upload is still active.
• We recommend to disable the submit button of your form 'onStart' and to reactivate it 'onDone'.

Cropper

Local

Note:

• the cropper will only be compatible with the formats your browser can read
• if you specify webp, it will only accept this type of images if your browser support it

Facebook

Google Photos

Instagram

Note: To deactivate a social media, set its options to null.

Example (with amazon s3 upload)

MSUploader({
  uploader: {
    url: 'https://my-bucket.s3.amazonaws.com',
    getSignature: callback => {
      // Retrieve s3 presigned post fields from your server
      fetch('/s3_signature')
        .then(response => response.json())
        .then(callback)
    },
    onStart: blob => {
      // You can use the blob to display a preview.
      // Don't forget to call URL.revokeObjectURL once the img is loaded
      document.querySelector('img').src = URL.createObjectURL(blob)
      // Ensure to get the photo URL before the user submit his form
      document.querySelector('[type="submit"]').disabled = true
    },
    onProgress: progress => {
      console.log(`${progress}%`)
    },
    onError: xhr => {
      console.log(`Yikes. Something wrong happened.`)
    },
    onDone: xhr => {
      // Extract the URL from the response (specific to S3)
      const loc = xhr.responseXML.getElementsByTagName('Location')[0]
      const url = decodeURIComponent(loc.innerHTML)
      // Set your hidden field with the URL
      document.querySelector('[name="photo_url"]').value = url
      // Re-enable the form
      document.querySelector('[type="submit"]').disabled = false
    },
  },
  cropper: {
    ratio: { v: 1, h: 1 }, // square aspect ratio
    minWidth: 100,
    resizeToWidth: 1000,
    webpIfSupported: true,
  },
  local: {
    accept: 'image/jpeg,image/webp', // Only jpg/jpeg or webp
  },
  facebook: {
    appId: '...',
    locale: 'en_US',
  },
  googlePhotos: {
    oAuthClientID: '...',
  },
  instagram: {
    clientID: '...',
  },
})

i18n

MSUploader.setMessages({ ... }) provides a way to update all the texts. Look at the english messages (by default).

You can either use the translations in the locales/ folder, or to write your own (feel free to make a PR in this case so everybody can use it=)

import MSUploader from 'multiple-sources-uploader'
import fr from 'multiple-sources-uploader/lib/locales/fr'

MSUploader.setMessages(fr)

Css

You can find it in the dist/ folder. Look at the sources to easily override them.

import MSUploader from 'multiple-sources-uploader'
import 'multiple-sources-uploader/dist/ms-uploader.css'