Hi All,
I am working on a file management widget and it''s starting to get
exciting thanks to prototype. Anyway, I want to implement
asynchronous file uploads. I realize that I can''t do this with
Ajax.Request, or can I? (let me know if I am wrong). I searched the
interweb looking for example techniques and I found that some people
are using a hidden iframe with a form in it. They then submit the
form from the iframe so that the use does not perceive a page load.
This seems like the way to go.
The Problem
Since this is a "widget", I am dynamically creating all of the
elements via a class (see my previous thread:
http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/32c86a75b804135b/184ebd7716791d1d?lnk=gst&q=my+own+class&rnum=1#184ebd7716791d1d)
so that anyone who uses it can just make an instance of my class and
it magically works (with the appropriate server backend of course).
The problem is, when I create an iframe using
document.createElement(iframe), I am not sure how to keep creating
elements within the iframe. Does anyone know how to properly access
the DOM of an iframe in a cross browser manner? I don''t think
prototype offers anything specifically for iframes (am i wrong
again?).
Here is what I have so far.
This is a little snippet from my class that builds the structure for
the widget. This particular part is where the iframe is created.
//This is the hidden IFRAME for file uploads
this.hiddenContainer = document.createElement(''div'');
$(this.hiddenContainer).setStyle({display:''none''});
this.container.appendChild(this.hiddenContainer);
this.fileUploadIframe = document.createElement(''iframe'');
this.hiddenContainer.appendChild(this.fileUploadIframe);
//this.fib is hopefully the document object for the iframe
this.fib = this.fileUploadIframe.contentDocument;
//This is the form in the IFRAME
this.fileUploadForm = document.createElement(''form'');
this.fileUploadForm.setAttribute(''method'',
''get'');
this.fileUploadForm.setAttribute(''action'',
''/error'');
//here I am trying to add my form to the body of the document in the
iframe
this.fib.body.appendChild(this.fileUploadForm);
If anyone needs to see my class in it''s entirety, just let me know.
thanks in advance!
-stephan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
capripot-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Apr-03 06:41 UTC
Re: prototype.js: Asynchronous File Uploads
Hello The DOM of an iframe is the same DOM that a HTML page, you begin with a <html> element ... Capripot On 30 mar, 21:15, "smellis" <stephan.el...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi All, > > I am working on a file management widget and it''s starting to get > exciting thanks to prototype. Anyway, I want to implement > asynchronous file uploads. I realize that I can''t do this with > Ajax.Request, or can I? (let me know if I am wrong). I searched the > interweb looking for example techniques and I found that some people > are using a hiddeniframewith a form in it. They then submit the > form from theiframeso that the use does not perceive a page load. > This seems like the way to go. > > The Problem > Since this is a "widget", I am dynamically creating all of the > elements via a class (see my previous thread:http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thr...) > so that anyone who uses it can just make an instance of my class and > it magically works (with the appropriate server backend of course). > The problem is, when I create aniframeusing > document.createElement(iframe), I am not sure how to keep creating > elements within theiframe. Does anyone know how to properly access > the DOM of aniframein a cross browser manner? I don''t think > prototype offers anything specifically for iframes (am i wrong > again?). > > Here is what I have so far. > This is a little snippet from my class that builds the structure for > the widget. This particular part is where theiframeis created. > > //This is the hiddenIFRAMEfor file uploads > this.hiddenContainer = document.createElement(''div''); > $(this.hiddenContainer).setStyle({display:''none''}); > this.container.appendChild(this.hiddenContainer); > this.fileUploadIframe = document.createElement(''iframe''); > this.hiddenContainer.appendChild(this.fileUploadIframe); > //this.fib is hopefully the document object for theiframe > this.fib = this.fileUploadIframe.contentDocument; > > //This is the form in theIFRAME > this.fileUploadForm = document.createElement(''form''); > this.fileUploadForm.setAttribute(''method'', ''get''); > this.fileUploadForm.setAttribute(''action'', ''/error''); > //here I am trying to add my form to the body of the document in theiframe > this.fib.body.appendChild(this.fileUploadForm); > > If anyone needs to see my class in it''s entirety, just let me know. > > thanks in advance! > > -stephan--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Here is what I use: http://pastie.caboo.se/50410 Not the best code, I know, but it works so I haven''t fiddled with it anymore. If you make some improvements to it let me know! Colin smellis wrote:> Hi All, > > I am working on a file management widget and it''s starting to get > exciting thanks to prototype. Anyway, I want to implement > asynchronous file uploads. I realize that I can''t do this with > Ajax.Request, or can I? (let me know if I am wrong). I searched the > interweb looking for example techniques and I found that some people > are using a hidden iframe with a form in it. They then submit the > form from the iframe so that the use does not perceive a page load. > This seems like the way to go. > > The Problem > Since this is a "widget", I am dynamically creating all of the > elements via a class (see my previous thread: > http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/32c86a75b804135b/184ebd7716791d1d?lnk=gst&q=my+own+class&rnum=1#184ebd7716791d1d) > so that anyone who uses it can just make an instance of my class and > it magically works (with the appropriate server backend of course). > The problem is, when I create an iframe using > document.createElement(iframe), I am not sure how to keep creating > elements within the iframe. Does anyone know how to properly access > the DOM of an iframe in a cross browser manner? I don''t think > prototype offers anything specifically for iframes (am i wrong > again?). > > Here is what I have so far. > This is a little snippet from my class that builds the structure for > the widget. This particular part is where the iframe is created. > > //This is the hidden IFRAME for file uploads > this.hiddenContainer = document.createElement(''div''); > $(this.hiddenContainer).setStyle({display:''none''}); > this.container.appendChild(this.hiddenContainer); > this.fileUploadIframe = document.createElement(''iframe''); > this.hiddenContainer.appendChild(this.fileUploadIframe); > //this.fib is hopefully the document object for the iframe > this.fib = this.fileUploadIframe.contentDocument; > > //This is the form in the IFRAME > this.fileUploadForm = document.createElement(''form''); > this.fileUploadForm.setAttribute(''method'', ''get''); > this.fileUploadForm.setAttribute(''action'', ''/error''); > //here I am trying to add my form to the body of the document in the > iframe > this.fib.body.appendChild(this.fileUploadForm); > > If anyone needs to see my class in it''s entirety, just let me know. > > thanks in advance! > > -stephan > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Wow, that''s nice. Thanks dude! I will let you know if I change anything. -stephan On 4/3/07, Colin Mollenhour <eliteii92g-NPSFNn/7+NYVo650/ln6uw@public.gmane.org> wrote:> > > Here is what I use: http://pastie.caboo.se/50410 > Not the best code, I know, but it works so I haven''t fiddled with it > anymore. If you make some improvements to it let me know! > > Colin > > smellis wrote: > > Hi All, > > > > I am working on a file management widget and it''s starting to get > > exciting thanks to prototype. Anyway, I want to implement > > asynchronous file uploads. I realize that I can''t do this with > > Ajax.Request, or can I? (let me know if I am wrong). I searched the > > interweb looking for example techniques and I found that some people > > are using a hidden iframe with a form in it. They then submit the > > form from the iframe so that the use does not perceive a page load. > > This seems like the way to go. > > > > The Problem > > Since this is a "widget", I am dynamically creating all of the > > elements via a class (see my previous thread: > > > http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/32c86a75b804135b/184ebd7716791d1d?lnk=gst&q=my+own+class&rnum=1#184ebd7716791d1d > ) > > so that anyone who uses it can just make an instance of my class and > > it magically works (with the appropriate server backend of course). > > The problem is, when I create an iframe using > > document.createElement(iframe), I am not sure how to keep creating > > elements within the iframe. Does anyone know how to properly access > > the DOM of an iframe in a cross browser manner? I don''t think > > prototype offers anything specifically for iframes (am i wrong > > again?). > > > > Here is what I have so far. > > This is a little snippet from my class that builds the structure for > > the widget. This particular part is where the iframe is created. > > > > //This is the hidden IFRAME for file uploads > > this.hiddenContainer = document.createElement(''div''); > > $(this.hiddenContainer).setStyle({display:''none''}); > > this.container.appendChild(this.hiddenContainer); > > this.fileUploadIframe = document.createElement(''iframe''); > > this.hiddenContainer.appendChild(this.fileUploadIframe); > > //this.fib is hopefully the document object for the iframe > > this.fib = this.fileUploadIframe.contentDocument; > > > > //This is the form in the IFRAME > > this.fileUploadForm = document.createElement(''form''); > > this.fileUploadForm.setAttribute(''method'', ''get''); > > this.fileUploadForm.setAttribute(''action'', ''/error''); > > //here I am trying to add my form to the body of the document in the > > iframe > > this.fib.body.appendChild(this.fileUploadForm); > > > > If anyone needs to see my class in it''s entirety, just let me know. > > > > thanks in advance! > > > > -stephan > > > > > > > > > > > > > > > >-- ------------------------------ To the government spies reading my email: Lick my balls assholes! ------------------------------ --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Colin, Have you tested the code with internet explorer 7? It does not seem to work for me. I will look into it and let you know if I get it working. -stephan On Apr 3, 9:05 am, "Stephan Ellis" <stephan.el...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Wow, that''s nice. Thanks dude! I will let you know if I change anything. > -stephan > > On 4/3/07, Colin Mollenhour <eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org> wrote: > > > > > > > Here is what I use:http://pastie.caboo.se/50410 > > Not the best code, I know, but it works so I haven''t fiddled with it > > anymore. If you make some improvements to it let me know! > > > Colin > > > smellis wrote: > > > Hi All, > > > > I am working on a file management widget and it''s starting to get > > > exciting thanks to prototype. Anyway, I want to implement > > > asynchronous file uploads. I realize that I can''t do this with > > > Ajax.Request, or can I? (let me know if I am wrong). I searched the > > > interweb looking for example techniques and I found that some people > > > are using a hidden iframe with a form in it. They then submit the > > > form from the iframe so that the use does not perceive a page load. > > > This seems like the way to go. > > > > The Problem > > > Since this is a "widget", I am dynamically creating all of the > > > elements via a class (see my previous thread: > > >http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thr... > > ) > > > so that anyone who uses it can just make an instance of my class and > > > it magically works (with the appropriate server backend of course). > > > The problem is, when I create an iframe using > > > document.createElement(iframe), I am not sure how to keep creating > > > elements within the iframe. Does anyone know how to properly access > > > the DOM of an iframe in a cross browser manner? I don''t think > > > prototype offers anything specifically for iframes (am i wrong > > > again?). > > > > Here is what I have so far. > > > This is a little snippet from my class that builds the structure for > > > the widget. This particular part is where the iframe is created. > > > > //This is the hidden IFRAME for file uploads > > > this.hiddenContainer = document.createElement(''div''); > > > $(this.hiddenContainer).setStyle({display:''none''}); > > > this.container.appendChild(this.hiddenContainer); > > > this.fileUploadIframe = document.createElement(''iframe''); > > > this.hiddenContainer.appendChild(this.fileUploadIframe); > > > //this.fib is hopefully the document object for the iframe > > > this.fib = this.fileUploadIframe.contentDocument; > > > > //This is the form in the IFRAME > > > this.fileUploadForm = document.createElement(''form''); > > > this.fileUploadForm.setAttribute(''method'', ''get''); > > > this.fileUploadForm.setAttribute(''action'', ''/error''); > > > //here I am trying to add my form to the body of the document in the > > > iframe > > > this.fib.body.appendChild(this.fileUploadForm); > > > > If anyone needs to see my class in it''s entirety, just let me know. > > > > thanks in advance! > > > > -stephan > > -- > ------------------------------ > To the government spies reading my email: > Lick my balls assholes! > --------------------------------~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I think the problem I am running into is that IE7 is not seeing my dynamically created file input fields. I turned on logging server side and I noticed that none of my file upload fields are being sent to the server. Anyone have an idea on this? Colin, I updated your Form.IframeSubmit class to use try.these in the onStateChange method, seems a little cleaner now. I have a few other changes planned, but no time. http://pastie.caboo.se/51654 Thanks guys. On 4/4/07, smellis <stephan.ellis-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Colin, > Have you tested the code with internet explorer 7? It does not seem > to work for me. I will look into it and let you know if I get it > working. -stephan > > On Apr 3, 9:05 am, "Stephan Ellis" <stephan.el...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Wow, that''s nice. Thanks dude! I will let you know if I change > anything. > > -stephan > > > > On 4/3/07, Colin Mollenhour <eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org> wrote: > > > > > > > > > > > > > Here is what I use:http://pastie.caboo.se/50410 > > > Not the best code, I know, but it works so I haven''t fiddled with it > > > anymore. If you make some improvements to it let me know! > > > > > Colin > > > > > smellis wrote: > > > > Hi All, > > > > > > I am working on a file management widget and it''s starting to get > > > > exciting thanks to prototype. Anyway, I want to implement > > > > asynchronous file uploads. I realize that I can''t do this with > > > > Ajax.Request, or can I? (let me know if I am wrong). I searched the > > > > interweb looking for example techniques and I found that some people > > > > are using a hidden iframe with a form in it. They then submit the > > > > form from the iframe so that the use does not perceive a page load. > > > > This seems like the way to go. > > > > > > The Problem > > > > Since this is a "widget", I am dynamically creating all of the > > > > elements via a class (see my previous thread: > > > > >http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thr. > .. > > > ) > > > > so that anyone who uses it can just make an instance of my class and > > > > it magically works (with the appropriate server backend of course). > > > > The problem is, when I create an iframe using > > > > document.createElement(iframe), I am not sure how to keep creating > > > > elements within the iframe. Does anyone know how to properly access > > > > the DOM of an iframe in a cross browser manner? I don''t think > > > > prototype offers anything specifically for iframes (am i wrong > > > > again?). > > > > > > Here is what I have so far. > > > > This is a little snippet from my class that builds the structure for > > > > the widget. This particular part is where the iframe is created. > > > > > > //This is the hidden IFRAME for file uploads > > > > this.hiddenContainer = document.createElement(''div''); > > > > $(this.hiddenContainer).setStyle({display:''none''}); > > > > this.container.appendChild(this.hiddenContainer); > > > > this.fileUploadIframe = document.createElement(''iframe''); > > > > this.hiddenContainer.appendChild(this.fileUploadIframe); > > > > //this.fib is hopefully the document object for the iframe > > > > this.fib = this.fileUploadIframe.contentDocument; > > > > > > //This is the form in the IFRAME > > > > this.fileUploadForm = document.createElement(''form''); > > > > this.fileUploadForm.setAttribute(''method'', ''get''); > > > > this.fileUploadForm.setAttribute(''action'', ''/error''); > > > > //here I am trying to add my form to the body of the document in the > > > > iframe > > > > this.fib.body.appendChild(this.fileUploadForm); > > > > > > If anyone needs to see my class in it''s entirety, just let me know. > > > > > > thanks in advance! > > > > > > -stephan > > > > -- > > ------------------------------ > > To the government spies reading my email: > > Lick my balls assholes! > > ------------------------------ > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Stephan Ellis wrote:> I think the problem I am running into is that IE7 is not seeing my > dynamically created file input fields. I turned on logging server side > and I noticed that none of my file upload fields are being sent to the > server. Anyone have an idea on this?Hi mate Sorry not been following your thread, just caught this message in my general E-mail. This is throwing up big flags in my brain - "Have you included enctype="multipart/form-data"? As you know, in order to get a file upload to work you need to have <form .. enctype="multipart/form-data"> .. </form>. That said I really wouldn''t be surprised if IE was knocking you back for touching <input type="file"> elements with JavaScript... there''s so much potential for abuse if the security policy''s a little off. Thanks -Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I didn''t think about internet explorer''s security issues, but gmail does the same thing I have been trying to accomplish. I do have the enctype set to multipart/form-data on all my input fields. Interesting... On 4/4/07, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote:> > > Stephan Ellis wrote: > > I think the problem I am running into is that IE7 is not seeing my > > dynamically created file input fields. I turned on logging server side > > and I noticed that none of my file upload fields are being sent to the > > server. Anyone have an idea on this? > > Hi mate > > Sorry not been following your thread, just caught this message in my > general E-mail. > > This is throwing up big flags in my brain - "Have you included > enctype="multipart/form-data"? > > As you know, in order to get a file upload to work you need to have > <form .. enctype="multipart/form-data"> .. </form>. > > That said I really wouldn''t be surprised if IE was knocking you back for > touching <input type="file"> elements with JavaScript... there''s so much > potential for abuse if the security policy''s a little off. > > Thanks > > -Rob > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---