photo-uploader v1.1.0

photo-uploader

photo-uploader is A Preact JSX Photo Uploader Component. It supports file uploading using multipart/form-data protocol, and can be easily translated. The component depends on Bootstrap styles (skins will follow up soon too).

github:~$ \
yarn add photo-uploader
npm install photo-uploader

Table Of Contents

• Table Of Contents
• API
• PhotoUploader
  • Props
• Locales
  • Locale
• Server Response
• Copyright

API

The package is available by importing its default component:

import PhotoUploader from 'photo-uploader'

The package has been compiled into h-pragma calls (without JSX) using ÀLaMode transpiler, and the CSS imports are changed into importing a CSS injector script. See the build folder to see how it looks. The import/export statements are left as they are though, and the recommended usage of the package is to bundle it with Depack — the front-end bundler that uses Google Closure Compiler.

PhotoUploader

Creates an area with an input to choose files, and a drag-and-drop zone. As soon as photos are added, their previews are generated on a small canvas, to prevent using too much memory to display heavy pictures, and metadata is read to display the date when the photo was taken.

In future releases, the previews will also be rotated according to the orientation from the metadata.

/* eslint-env browser */
import { render, Component } from 'preact'
import PhotoUploader from 'photo-uploader'
import 'preact/devtools/'

class Main extends Component {
  render() {
    return (
      <div className="container">
        Hello World
        <PhotoUploader uploadUri="/form" />
      </div>)
  }
}

render(<Main />, document.querySelector('#preact'))

Props: The photo uploader will create preview elements for each photo and have a hidden input field populated with the photoId received when the photo was updated.

When photos are uploaded to the URL provided, their read the photoId from the JSON response and add it to the hidden id field provided. The parent form (which is not implemented by this component) can then be used to save the ids of saved pictures to the server. The implementation intentionally decouples uploading photos from saving them on the server, so that it is possible to upload them to a route which is different from the business-logic server that would save the photo into appropriate category (etc) which would also be present in the form implemented by the page.

There are 6 states of the photo:

• added Just dropped to the component, needs to start uploading grey.
• uploading Started the upload process blue.
• error Upload failed, there's a button to retry red.
• processing The upload has completed, waiting for the server to finish processing (resizing, metadata, etc) blue.
• ready Ready to be saved yellow.
• saved The photo was saved via the form, it's id is present in the uploadedResults property of the component, and it won't be saved again green.

Locales

It is possible to extend the language of the form by providing a custom LOCALE object via the properties. The following interface is used:

Locale: Language translations.

Server Response

The component expects to receive a JSON response with 3 properties: error, result and photoId. The photo ID will be stored in the hidden input field, so that the parent form can send it, unless it's already included in the uploadedResults property which should be maintained by the parent form also. The result is the SRC of the uploaded image, which will replace the canvas-generated preview. It could be rotated according to metadata or watermarked etc. The error will be shown in the notification of the preview.

Copyright

(c) Demimonde 2019