Hello everyone. At first, let me please say little background about recent events in my life, if you are interested only in technical stuff, skip this paragraph. Be unpredictable events it happens, that I am currently working on front-end of one web application for big big company. My role in team is not big, but I like my work and now I actually work on something pretty interesting. It is only 3 days what I am working with Dojo, Ajax, so please be patient with me. But as you can see I learn fast :-).
Let`s say something, what we would like to do today. As Google has started its Drag and Drop for Gmail, everyone wants to have one like that. So my BigB company has asked me to do also one like that for them. This is what I am working on in combination of Dojo, Ajax, HTML5 and classic HTML. Our task is like this: You have some form, there is some default behavior on this form and you would like to keep it, but also add some other. Thing are now like this, we have DOJO Fileinput and user can select there files and after submit of form they get uploaded on page. Now we would like to sth. like this. After dragging files on special div, we would like to add new Fileinput fields with those files in it. So no XHR request or sth. like this what is commonly used for uploading, we have to rely on script, which is processing form now and of course we can not touch him. So how to do this? There is a lot of limitations.
First of all, get working Drag and Drop, what is pretty simply task and even withou no knowledge of DOM or Ajax you can do it, I was able to do it, so you have to do it also. Follow this examples:
Get here until phase you would have access to you dataTransfer object. Now it is going to be little more complicated. First of all we need to put files to . To do this will help of new property of input DOM object and it is files. API is described here: http://help.dottoro.com/ljwjmspm.php. It is an Filelist object, and there are some problems with it, which I will mention later. Ok now, we have the files there and we would like also show names of files to user. This really could be problem with classic input, because value property is read only for security reasons, which are pretty clear. Using it could anyone download any file from your computer. So what to do now? Because we are using DOJO, there is one big advantage. DOJO Fileinput is little bit hack, and what you see is actually not an real file input, it is just text input and button, inside an file input. I know it sounds strange, but try to take a look on code in DOJO and you will get it fast. So now we just get this text input and we put there our file.name, great. We submit form, hoping that everything will go ok, and... PROBLEM!
Files added by user are uploaded without a problem, but files added to input programmatically are not submitted, so where the problem is? Could it be even done? So let`s take a look on documentation of Filelist, let`s play little bit with debuger and after a while we could find out, that our files property of input is allways 0?!?!. And this is pretty a problem in implementation of Filelist. Because, yes, you can access files with operator [], and this operator even accepts file to write into files, but it does not increase its length :-(. So on submit is nothing submitted. And what is worse, it is read only property, and there is no way how to change it. Just look on previous link.
This is pretty serious issue, and I hope, that in future implementations it will change, I would even report it to someone, if I would know to who. I can imagine, that there will arise a lot of more security and other issues, with allowing this property not to be read only, or by letting operator [] to set length. Other solution is to make operator [] able only to read, not write, but I believe, this would be step back. It is really nice help for developers. Especially, when you want to use file from other sources (DND, Web...). So how now solve this problem? On monday I am going try to write my own XHR request and override submit function, which is sending form. Will see, if it could be done, more info in part 2.
I hope, I have helped you at least a little bit. Have a nice day.
No comments:
Post a Comment