Note that the Codepen demos pull in only 3 dependencies outside of the demo code:
Upload single avatar
Using the default rendered
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.
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.
will trigger the upload dialog, will upload
the file and replace the contents of the
behave as usual unless you drag and drop
images into the body of it. If you click the
<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
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.
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.