This one took us more time than expected too.
Of course we could go on faster and make it as on other marketplaces. But we wanted it to be “bullet-proof”, customizable and robust.
Let’s see why we’ve spent more time on creating it properly
First of all, any upload presents a security issue. Anybody can try to upload something else than an image and just rename the file by setting an image extension in the filename. Our uploader checks if this is an image, sees its size in pixels and without any query to the server validates data or asks for another input. Even in case this validation is bypassed, there is another check on the server side. Another risk would be a huge amount of data sent and stored on the server by the same username via the uploader. We thought about this too. Each user has his own upload space on the server and no file can be duplicated in it (by this we mean the contents of the file no matter the filename). So if an author tries to upload a file which has already been uploaded by him before, the new file will be discarded (only if the content is identical) and the already existing file will be used instead. This is an invisible action to the end user, but we thought it would be a huge benefit for the marketplaces owners which will spare server storage usage which means less running costs.
Second, we wanted it to be dynamic, because we speak so much about the fact that TMS is the most robust and complex Themes Marketplace Script. So, the uploader has to be configurable from the product type fields settings. Here is how the image uploads fields settings look like in the back-end on Product Types:
As you can see, we’ve set a predefined size to Product Thumbnail and Poster (that 590x300px image) and allowed only one file for it. At the same time, for Product Previews we’ve allowed several file types with a size range for width and height and maximum size. Plus for each field, we’ve specified if it has to be moderated by an moderator or admin in case the author updates the product. Plus the multi-language support.
What’s better in this upload method? Moderators won’t receive just a .zip file with previews as it happens now on ThemeForest for example, but each file goes to its field and we’ll extract easily in the front-end the previews properly. So, less effort for moderators and more possibilities to visualize data in the front-end after publishing.
Great. Let’s now see what happens in the front-end with these fields.
Default state (with the mouse over the required field icon):
Mouse over the Thumbnail Upload an Image button state:
Mouse over the Previews Upload an Image button state:
Images Uploaded State:
Notice that all the validation is done without sending any file to the server. Which is awesome – less resources consumed.
Here’s a video so you can see how it actually looks and feels. Sorry for the quality. Hope it’s enough to get an impression of how it works:
Let us know your thoughts, questions and suggestions. Also please let me know if you want me to publish videos like this from time to time with various aspects of the script.
PS: Of course the script shows the actual progress and isn’t just a progress bar animation. And we’ll also include on the blue progress bar the uploaded progress in percents.