feature-exiffeature-giffeature-orientationfeature-transformfeature-uploadfeature-webhooksnav-arrowAsset 7Asset 8quote

Demos

Note that the Codepen demos pull in only 3 dependencies outside of the demo code:

  1. The Shubox library
  2. Animate.css
  3. Shubox styles

Upload single avatar

Using the default rendered previewContainer markup we can show the uploaded file contents as soon as it is entered, display the built-in progress bar, and a successful `√` or `X` when there's an error.

See the Pen Simple avatar Upload with shubox.io by Team Shubox (@shubox) on CodePen.

Slightly Fancier Avatar Upload with Shubox

To achieve a slightly more fancy experience, we can turn off the `previewsContainer` setting and insert the resulting image ourselves with appropriate class names that will result in a flip-in effect using the animate.css library. In addition the progress of the upload can be customized based on the data attribute applied to the base element. This allows for control more finely tuned than an element that merrely changes the width property.

The upload progress css, it should be noted, can be styled with a sass for loop that will change the display based on the percentage of completion.

See the Pen Slightly fancier avatar upload with shubox.io by Team Shubox (@shubox) on CodePen.

Form Elements

Clicking into <input/> will trigger the upload dialog, will upload the file and replace the contents of the element.

The <textarea/> will behave as usual unless you drag and drop images into the body of it. If you click the adjacent <div/> it will trigger the file dialog on behalf of the textarea. Successfully uploaded files will be appended to the end of the textarea as a markdown image tag.

Note that if you are using Google Chrome you are able to paste image data in your clipboard into the two form elements directly. Shubox will create a new file for you with that data and return the resulting URL.

See the Pen Uploading in, and through, forms with shubox.io by Team Shubox (@shubox) on CodePen.

Multiple Files Uploading

By assigning the target `previewsContainer` to an adjacent div we can style and display the thumbnails along with their upload progress, and resulting success or failure state.

Most of the work here is done in the stylesheet, with only the `previewContainer` being changed in the shubox initializer.

See the Pen Uploading multiple files by Team Shubox (@shubox) on CodePen.

Take & Upload Photo from Webcam

At its most base configuration, the webcam capabilities are driven by cycling through the state of the camera (start. stop - or take photo & upload.) with clicks on/of the target element. The following demo shows that you can delegate those events to links or elements of your choosing.

For a list of all the possible options, visit the documentation at GitHub.

See the Pen Webcam Demo (with buttons) by Team Shubox (@shubox) on CodePen.

Take & Upload Video from Webcam

Similar to photos, setting up videos is as simple as providing `"video"` as the value assigned to `webcam:` or providing an object/hash to `webcam:` with a host of options. The demo below will cycle through starting the camera, starting the video recording, and stopping -- and uploading -- the video recording.

For a list of all the possible options, visit the documentation at GitHub.

See the Pen Record Webcam Video by Team Shubox (@shubox) on CodePen.