Did you miss a pre-upload watermarking feature in HTML5 uploader? Did you want to make the user interface more versatile? New Upload Suite includes these features and many more changes!
I was eager to write this post last couple of months. When we started working on a new version in January, I expected that we quickly add one major feature (watermarking) and few smaller improvements and roll out yet another minor update. However, it turned out that those features and improvements caused an avalanche of changes that had us to delay the release unexpectedly and reconsider the future of the Upload Suite.
As a result, the change log of this version is the largest in the history of the Upload Suite since the release of Image Uploader 7. To convey the importance of this release, we have designated a new version number – 8.5, instead of 8.1.
What are those changes? You can see a full list in the What’s New article of the documentation, but let me highlight the most important changes.
Watermarking
According to the feedback of our customers, the ability to add watermarks before the upload turned out to one of the most wanted features from Java uploader. That’s why we concentrated on it.
However, we did not just blind-copied the functionality of the Java uploader. We wanted to make this feature better, more convenient and more powerful. On the other hand, we realize how important it to be backward compatible and tried to make migration from Java uploader painless.
- The watermark settings are 100% compatible with the uploader. You can just copy the thumbnailWatermark param value to HTML5 uploader and it will work.
- If you are going to change watermark settings dynamically, you may prefer to set them as JSON object rather than a long semicolon-separated string. You can do it easily now.
- We have added an ability to rotate the watermark by specifying an angle.
- We have also implemented an ability to draw tiled watermarks in addition to a single watermark image. No need to prepare a high-res tiled watermark image anymore.
- Now you can control if you want to apply a watermark before the resize (like earlier) or after.
- In case if you want to give the user an ability to configure a watermark, we have added an ability to preview it on some image. We have done it primarily for our online demo, but you may find it useful as well.
Here are some useful links:
User interface customization
One of the things people did not like in HTML5 uploader is that its user interface is designed only for a single scenario, when you need a “basket” which you fill with photos and then upload them. We tried to make it more versatile.
First, I noticed that many people asked how to hide the top bar or the Upload button. Although it is easy to do using CSS, I felt that it is not a right way. Now you can hide everything through API and it will work in both HTML5 and Flash uploader. The only thing you cannot hide is the upload pane itself, but I think it will be possible in the next version, where you will be able to leave only the Add Files button.
Another feature is even more interesting – an ability to receive a preview element for a specific item in the upload list through API. You can insert this element everywhere on a page. For example, you may create your own upload list or display a currently selected item. It works asynchronously, so before the preview is loaded, the user may see a file icon, like in a standard upload pane.
Use these links to view them:
Bootstrap compatible (thanks to new Bootstrap-based demo apps)
If you opened online demos linked above, you may noticed that now they are completely rewritten. When we started writing a demo for watermark feature, we realized that our demo markup is quite difficult to maintain, not to mention that it looks outdated. That’s why we decided to rewrite it based on Bootstrap. It made the code more readable and clean.
You may notice that we did not just rewritten the same functionality with a new markup. We have also reworked them for better demonstration Upload Suite API usage and features. For example, the ability to upload additional data along with files now demonstrated in two ways – using the HTML form and JavaScript method. Or, in the File Restriction demo you can see all possible options better.
While we wrote the demo, we noticed that there were some incompatibilities with Bootstrap and some elements were distorted or text sizes were altered. No need to fix CSS yourself anymore.
What's next?
The future of the Upload Suite is a subject of a separate article. For now, I can say that we have three directions to move forward:
- Add more Java uploader features to HTML5 uploader
- Move towards to a single SDK for all uploaders and revise the API. It will involve support of various MVC frameworks, etc.
- Work on internal improvements invisible outside, but still important, such as build and test automation.
I will love to write about it a bit more detailed in further posts.