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.

| Name | Type | Description | Default | | --------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | fieldName | string | The name of the hidden input fields. Default files[].This is for the second part of the submission, and is different from the image upload field, which is just image. | - | | uploadedResults | string | The list of photos which were saved and don't need uploading. | - | | uploadUri* | string | The URL where to upload files. | - | | LOCALE | Locale | An hash map with locale values. | - | | locale | string | A language for existing locales (either en or ru). | en | | onRemove | (file: !Object) => void | The function to call when a photo was removed. | - | | onAdded | () => void | The function to call when a photo was added. | - | | onPhotoUploaded | (photo: !Object) => void | The callback to call when a photo was uploaded with the result property of the server response. | - |

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