Tag Archives: javascript

magento, php

Why Magento Flex uploader won’t show your selected files?

1 Comment

If you hurry, then just scroll down until the end of the article to see the solution.

In the last couple of hours I tried to figure this out, because it was really ugly to select some files to upload and then see nothing selected (even if it was selected in the javascript object).
First of all I wanted to make myself sure that everything is configured well, so I’ve opened my previous article about how to use the Magento Flex uploader. Everything was nice, even after the second look. Then it got in my mind that the file uploading shows nicely the selected files before uploading. Compared the code… everything looked good. As a last try I began looking into the flash component’s source code and into the associated javascripts. And the miracle has happened. I simply couldn’t believe it. The reason why it was not working was the undefined maxUploadFileSize javascript variable. Incredible, isn’t it? Lets see the short explanation:

1. after pressing the browse button and when the files are selected, the handleSelect method will be called (we are talking about the Flex.Uploader javascript class which is located in flexuploader.js)

2. handleSelect looks like this:

handleSelect: function (event) {
            this.files = event.getData().files;
            this.checkFileSize();
            this.updateFiles();
            this.getInnerElement('upload').show();
            if (this.onFileSelect) {
                this.onFileSelect();
            }
        },

the problem occurs while trying to call the checkFileSize method.

3. lets see what is there:

checkFileSize: function() {
            newFiles = [];
            hasTooBigFiles = false;
            this.files.each(function(file){
                if (file.size > maxUploadFileSizeInBytes) {
                    hasTooBigFiles = true;
                    this.uploader.removeFile(file.id)
                } else {
                    newFiles.push(file)
                }
            }.bind(this));
            this.files = newFiles;
            if (hasTooBigFiles) {
                alert(
                    this.translate('Maximum allowed file size for upload is')+' '+maxUploadFileSize+".n"+this.translate('Please check your server PHP settings.')
                );
            }
        },

do you see the bolded variables? There are no checks whether the maxUploadFileSizeInBytes or the maxUploadFileSize is defined. When the code execution reaches these checks, it simply breaks the code execution, so handleSelect won’t ever run the remained code.

So for those who just came here and scrolled down for a quick solution:

Define maxUploadFileSizeInBytes and maxUploadFileSize javascript variables in your code, something like this:

    var maxUploadFileSizeInBytes = 2097152;
    var maxUploadFileSize = '2M';

That’s all.

php

Frameworks vs. traditional coding

1 Comment

In the last few years the usage of frameworks became a must. In my opinion there are three types of coder:

1. who loves frameworks

2. who doesn’t care too much

3. who hates frameworks

The big question is: why to love/hate frameworks? Well, because they are smart.

A few years ago, in 2005, when I started learning php the best and most used browser was IE6 (internet explorer version 6). As you may know it is a very silly browser and you have to write the code carefully to achieve your goals. Most pages were very cubic-like, and they were contructed from tables… and tables in tables. At that time the frameworks still had the egg shells on their bottoms. Even Php was in the same boot: version 5.0.0, the brand new object oriented, rewritten Php.

Some guys have decided to write some rudimentary frameworks. But wait-wait-wait… what is a framework? You can read it in this Wikipedia article or just briefly: it is a software which controls the flow of your program, it is extensible and last but not least it structurates your code. Hmm… you could ask me now: ok, but what flow are you talking about? and why to extend a code? or even better: what does it mean to extend a code?

Let me answer these. The frameworks have some drawbacks: they have some strict rules which must be followed; all these rules together creates the flow. This means that a predefined logic will always run before your code. Naturally this can be a good thing but also a bad one.

Let me give you a few examples:

Zend framwork [php]:

a URL like: www.example.com/animals/dogs by default will be parsed and it will run your dogsAction method in your AnimalsController class.

Smarty [php template framework]:

in your template when you are using for example {$myVariable} it will be transformed into a value set previously in a php file with $smarty->assign(“myVariable”, “my value”);

jQuery [javascript]:

by using $(‘input[name=first_name]’) the framework finds the input tag with the name “first_name”. You could say now that you can do it with a traditional javascript method by using document.querySelector… well yes, but not before IE8.

And here we are: the frameworks have pros! They have such functionalities which are natively not supported by the system. The javascript example with jQuery will work even on IE6!

As you can see, I’m using as examples the internet explorer browser. This is because it is the slowest, silliest and most featureless browser which is used by millions of people; and when you want to write a cool website, it should work on most of the browsers. Don’t understand me wrongly: in my opinion the IE6-8 is dead, but still tons of people are using them.

And we arrived to the extensibility… It means to write your code in the same style as the framework: structured. Most of the Php frameworks separate different type of logic into separate files: html from php logic. Since a few years we hear about the MVC. The MVC separates into three: model = everything related to an object; view = html related; controller = a class which interacts with models and views. Separating the logic doesn’t mean that you won’t have php code in it. It means that it will be a minimalistic php: ifs, loops, variables. Why is it good for you? It is easier for you to find different portions of code and you can work with others in the same project in the same time without overwriting each other.

Another good thing on frameworks are the plugins. There are many plugins for the basic frameworks. Why to reimplement the wheel? Just use it and you’re done.

Are there any drawbacks? Well, there are… The frameworks are usually slower than the pure coding. I’ve been benchmarking Mysql from Php: PDO vs. non-PDO. The non-PDO version of the same script worked 10% faster. Zend Framework uses PDO, so by start it is slower a little bit. But don’t panic, we are talking about micro seconds. On a heavy framework like Magento, well… it is slow enough, so it needs a dedicated machine anyway.

When to use traditional coding and when to use frameworks? Well, it depends. If you are writing simple things like hello world, then don’t use a framework! On small pages you can use them partially, for example a javascript framework (jQuery, Prototype, Mootools, YUI etc.). In other cases it is recommanded to use a framework (Zend Framework, Symfony, CodeIgniter, Cakephp, Magento etc.).

There is one more thing. By learning the “language” of a framework, you will be able to work on a project (written in the same framework) which was written by someone else.

If you are starting to work with the framework, try to do it everything in their way. So if you use Zend Framework, then don’t create manually forms, but create ZendForm. This way you can add validation of the fields easily.

Also, it is good to know that sometimes you have to create such functionalities of your site, which is not supported natively by the framework. In these cases you have to “hack” the framework somehow. Sometimes a simple thing needs a week of researching, while you could write it in the traditional way in five minutes.

In my opinion, anyone can write structured code without a framework, but it is good to know the other way too.

 

flash uploader, javascript

Uploadify with jQuery noConflict

1 Comment

Yesterday I tried to implement on a webpage the Uploadify 3.1. I downloaded the zip package from the official website. It didn’t contain an example code usage, this was a bad omen. Anyway, I used it before, so I could easily set up and integrate it on the page.

But it didn’t work.

The place – where the upload button should have been –  changed the mouse pointer but the button was invisible. Also I could click on it and then browse for files with it, but the file was not uploaded. I’ve searched for a while after such a bug and after spending a few hours with the search engine, I found out that Uploadify has problems when the $ function is not the jQuery. In my case the $ was the Prototype and the jQuery was the $j. In the Uploadify jquery plugin I tried to replace all the relevant $ functions with $j, but it still didn’t work.

Briefly: if $ is not jQuery, then don’t use Uploadify, unless you want to rewrite the Uploadify jQuery plugin and recompile the Uploadify flash component.