[jQuery] Re: File inputs
on 2/1/08 2:13 AM, Mika Tuupola at [EMAIL PROTECTED] wrote: > > > On Jan 31, 2008, at 5:59 PM, Steffan A. Cline wrote: > >> Works in FF-Mac, Safari-Mac, IE6&7-PC >> >> I wish this could be incorporated into the jQuery plugin. I am not >> that well >> versed yet enough to do this. While basic it could be done to have a >> dummy >> field that strips the path and shows just the file name. That is my >> plan on >> the real page. > > > Just out of interest. Have you seen this: > > http://www.appelsiini.net/projects/filestyle > http://www.appelsiini.net/projects/filestyle/demo.html > > -- > Mika Tuupola > http://www.appelsiini.net/ > I had looked at that but this one has the actual file field where I did not want that. Here is a screenshot. Hitting Add pops up the file selector. Delete will empty the dummy field. Upon submit the server side processing handles the remainder. This however brings me to the validation issue for another post. How can I validate in a specific manner the file types of these since they are not fixed. I do not see an easy way to declare the fields to be tested at the top and then test write in the matching ID as declared in the top. I wonder if it¹s possible to tie validation to an object based on it¹s class. Reason is that I have multiple items on the page which all have different files accepted. Thanks Steffan --- T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4 Steffan A. Cline [EMAIL PROTECTED] Phoenix, Az http://www.ExecuChoice.net USA AIM : SteffanC ICQ : 57234309 YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED] GOOGLE: Steffan.Cline Lasso Partner Alliance Member --- <>
[jQuery] Re: File inputs
On Jan 31, 2008, at 5:59 PM, Steffan A. Cline wrote: Works in FF-Mac, Safari-Mac, IE6&7-PC I wish this could be incorporated into the jQuery plugin. I am not that well versed yet enough to do this. While basic it could be done to have a dummy field that strips the path and shows just the file name. That is my plan on the real page. Just out of interest. Have you seen this: http://www.appelsiini.net/projects/filestyle http://www.appelsiini.net/projects/filestyle/demo.html -- Mika Tuupola http://www.appelsiini.net/
[jQuery] Re: File inputs
on 1/31/08 1:52 AM, Diego A. at [EMAIL PROTECTED] wrote:
>
> I've tried for a long time to do this and as far as I know: it just
> can't be done. Perhaps the next generation of browsers will allow us
> developers to call the file seclection box like this
> "window.chooseFile", just like we can use "window.prompt"...
>
> If this does turn out to be possible, eventually, then I'll add it to
> my multiple file upload plugin...
>
> On Jan 30, 4:11 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
>> on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>>
>>
>>
>>
>>
>>> Some code would be useful - you've said that .click() doesn't work in
>>> FF, but it probably isn't the .click() bit that isn't working.
>>
>>> One suggestion (untested) is that you include both the normal button
>>> and the new image, but hide the image with CSS by default. This means
>>> that if JS is disabled, the user can still click the normal button.
>>
>>> Then with jQuery, hide the button and show the image on
>>> document.ready. Then apply a trigger to the image that fires the
>>> normal button action. It means you shouldn't need to code anything
>>> special - just piggy-back on the usual action of the button.
>>
>>> Eg:
>>
>>> $("#myImage").click(function () {
>>> $("#fileButton").trigger('click');
>>> });
>>
>>> On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>>
> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>>
>> I know there is a plug-in for styling file inputs but what about
>> using a
>> custom image instead? I need to do something where I have an ADD and a
>> DELETE button side by side. I tried this using .click() and it worked
>> flawlessly but alas FF does not support it! How stupid!.
>>
> What are you trying to achieve? What does ADD and DELETE buttons do?
>>
> --
> Mika Tuupola
> http://www.appelsiini.net/
>>
The add button would simply pop up the file selector as clicking on the
actual file button would do. The delete button would set a hidden flag to
remove the stored file.
>>
See the previous thread ".click()" This described the previous method which
I gave up on.
>>
Thanks
>>
Steffan
>>
>> Well, I tried many variations of .click() with FF and according to this
>> link:
>>
>> http://www.quirksmode.org/dom/inputfile.html
>>
>> reads:
>>
>> "The click() method allows you to simulate a click on a form field.
>> Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
>> and Opera haven't added this method to file upload fields. I wonder why,
>> adding it is not really a security risk since the worst that can happen is
>> that the file selection window pops up.
>>
>> So unfortunately we cannot use this simple solution."
>>
>> I hadn't tried your "trigger" method. Did you test it in FF? I just did and
>> unfortunately as said on quirksmode that does not work :( but it does on
>> everything else.
>>
>> What else do you suggest?
>>
>> Thanks
>>
>> Steffan
>>
I finally figured it out. I have a working version using CSS.
Works in FF-Mac, Safari-Mac, IE6&7-PC
I wish this could be incorporated into the jQuery plugin. I am not that well
versed yet enough to do this. While basic it could be done to have a dummy
field that strips the path and shows just the file name. That is my plan on
the real page.
Any thoughts anyone?
Thanks
Steffan
---
T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
Steffan A. Cline
[EMAIL PROTECTED] Phoenix, Az
http://www.ExecuChoice.net USA
AIM : SteffanC ICQ : 57234309
YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
GOOGLE: Steffan.Cline Lasso Partner Alliance Member
---
[jQuery] Re: File inputs
Actually, this method seems good enough to me:
http://www.quirksmode.org/dom/inputfile.html
...specially with the forced IE6 updated coming soon.
On Jan 31, 8:52 am, "Diego A." <[EMAIL PROTECTED]> wrote:
> I've tried for a long time to do this and as far as I know: it just
> can't be done. Perhaps the next generation of browsers will allow us
> developers to call the file seclection box like this
> "window.chooseFile", just like we can use "window.prompt"...
>
> If this does turn out to be possible, eventually, then I'll add it to
> my multiple file upload plugin...
>
> On Jan 30, 4:11 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
>
> > on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>
> > > Some code would be useful - you've said that .click() doesn't work in
> > > FF, but it probably isn't the .click() bit that isn't working.
>
> > > One suggestion (untested) is that you include both the normal button
> > > and the new image, but hide the image with CSS by default. This means
> > > that if JS is disabled, the user can still click the normal button.
>
> > > Then with jQuery, hide the button and show the image on
> > > document.ready. Then apply a trigger to the image that fires the
> > > normal button action. It means you shouldn't need to code anything
> > > special - just piggy-back on the usual action of the button.
>
> > > Eg:
>
> > > $("#myImage").click(function () {
> > > $("#fileButton").trigger('click');
> > > });
>
> > > On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> > >> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>
> > >>> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>
> > I know there is a plug-in for styling file inputs but what about
> > using a
> > custom image instead? I need to do something where I have an ADD and a
> > DELETE button side by side. I tried this using .click() and it worked
> > flawlessly but alas FF does not support it! How stupid!.
>
> > >>> What are you trying to achieve? What does ADD and DELETE buttons do?
>
> > >>> --
> > >>> Mika Tuupola
> > >>>http://www.appelsiini.net/
>
> > >> The add button would simply pop up the file selector as clicking on the
> > >> actual file button would do. The delete button would set a hidden flag to
> > >> remove the stored file.
>
> > >> See the previous thread ".click()" This described the previous method
> > >> which
> > >> I gave up on.
>
> > >> Thanks
>
> > >> Steffan
>
> > Well, I tried many variations of .click() with FF and according to this
> > link:
>
> >http://www.quirksmode.org/dom/inputfile.html
>
> > reads:
>
> > "The click() method allows you to simulate a click on a form field.
> > Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
> > and Opera haven't added this method to file upload fields. I wonder why,
> > adding it is not really a security risk since the worst that can happen is
> > that the file selection window pops up.
>
> > So unfortunately we cannot use this simple solution."
>
> > I hadn't tried your "trigger" method. Did you test it in FF? I just did and
> > unfortunately as said on quirksmode that does not work :( but it does on
> > everything else.
>
> > What else do you suggest?
>
> > Thanks
>
> > Steffan
>
> > ---
> > T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
> > Steffan A. Cline
> > [EMAIL PROTECTED] Phoenix,
> > Azhttp://www.ExecuChoice.netUSA
> > AIM : SteffanC ICQ : 57234309
> > YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
> > GOOGLE: Steffan.Cline Lasso Partner Alliance Member
> > ---
[jQuery] Re: File inputs
I've tried for a long time to do this and as far as I know: it just
can't be done. Perhaps the next generation of browsers will allow us
developers to call the file seclection box like this
"window.chooseFile", just like we can use "window.prompt"...
If this does turn out to be possible, eventually, then I'll add it to
my multiple file upload plugin...
On Jan 30, 4:11 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>
>
>
>
>
> > Some code would be useful - you've said that .click() doesn't work in
> > FF, but it probably isn't the .click() bit that isn't working.
>
> > One suggestion (untested) is that you include both the normal button
> > and the new image, but hide the image with CSS by default. This means
> > that if JS is disabled, the user can still click the normal button.
>
> > Then with jQuery, hide the button and show the image on
> > document.ready. Then apply a trigger to the image that fires the
> > normal button action. It means you shouldn't need to code anything
> > special - just piggy-back on the usual action of the button.
>
> > Eg:
>
> > $("#myImage").click(function () {
> > $("#fileButton").trigger('click');
> > });
>
> > On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> >> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>
> >>> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>
> I know there is a plug-in for styling file inputs but what about
> using a
> custom image instead? I need to do something where I have an ADD and a
> DELETE button side by side. I tried this using .click() and it worked
> flawlessly but alas FF does not support it! How stupid!.
>
> >>> What are you trying to achieve? What does ADD and DELETE buttons do?
>
> >>> --
> >>> Mika Tuupola
> >>>http://www.appelsiini.net/
>
> >> The add button would simply pop up the file selector as clicking on the
> >> actual file button would do. The delete button would set a hidden flag to
> >> remove the stored file.
>
> >> See the previous thread ".click()" This described the previous method which
> >> I gave up on.
>
> >> Thanks
>
> >> Steffan
>
> Well, I tried many variations of .click() with FF and according to this
> link:
>
> http://www.quirksmode.org/dom/inputfile.html
>
> reads:
>
> "The click() method allows you to simulate a click on a form field.
> Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
> and Opera haven't added this method to file upload fields. I wonder why,
> adding it is not really a security risk since the worst that can happen is
> that the file selection window pops up.
>
> So unfortunately we cannot use this simple solution."
>
> I hadn't tried your "trigger" method. Did you test it in FF? I just did and
> unfortunately as said on quirksmode that does not work :( but it does on
> everything else.
>
> What else do you suggest?
>
> Thanks
>
> Steffan
>
> ---
> T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
> Steffan A. Cline
> [EMAIL PROTECTED] Phoenix,
> Azhttp://www.ExecuChoice.net USA
> AIM : SteffanC ICQ : 57234309
> YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
> GOOGLE: Steffan.Cline Lasso Partner Alliance Member
> ---
[jQuery] Re: File inputs
Ah, I see.
Maybe have a look at the uploader plugin? Otherwise, I think you're
stuck :/
On Jan 30, 5:11 pm, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>
>
>
>
>
> > Some code would be useful - you've said that .click() doesn't work in
> > FF, but it probably isn't the .click() bit that isn't working.
>
> > One suggestion (untested) is that you include both the normal button
> > and the new image, but hide the image with CSS by default. This means
> > that if JS is disabled, the user can still click the normal button.
>
> > Then with jQuery, hide the button and show the image on
> > document.ready. Then apply a trigger to the image that fires the
> > normal button action. It means you shouldn't need to code anything
> > special - just piggy-back on the usual action of the button.
>
> > Eg:
>
> > $("#myImage").click(function () {
> > $("#fileButton").trigger('click');
> > });
>
> > On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> >> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>
> >>> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>
> I know there is a plug-in for styling file inputs but what about
> using a
> custom image instead? I need to do something where I have an ADD and a
> DELETE button side by side. I tried this using .click() and it worked
> flawlessly but alas FF does not support it! How stupid!.
>
> >>> What are you trying to achieve? What does ADD and DELETE buttons do?
>
> >>> --
> >>> Mika Tuupola
> >>>http://www.appelsiini.net/
>
> >> The add button would simply pop up the file selector as clicking on the
> >> actual file button would do. The delete button would set a hidden flag to
> >> remove the stored file.
>
> >> See the previous thread ".click()" This described the previous method which
> >> I gave up on.
>
> >> Thanks
>
> >> Steffan
>
> Well, I tried many variations of .click() with FF and according to this
> link:
>
> http://www.quirksmode.org/dom/inputfile.html
>
> reads:
>
> "The click() method allows you to simulate a click on a form field.
> Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
> and Opera haven't added this method to file upload fields. I wonder why,
> adding it is not really a security risk since the worst that can happen is
> that the file selection window pops up.
>
> So unfortunately we cannot use this simple solution."
>
> I hadn't tried your "trigger" method. Did you test it in FF? I just did and
> unfortunately as said on quirksmode that does not work :( but it does on
> everything else.
>
> What else do you suggest?
>
> Thanks
>
> Steffan
>
> ---
> T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
> Steffan A. Cline
> [EMAIL PROTECTED] Phoenix,
> Azhttp://www.ExecuChoice.net USA
> AIM : SteffanC ICQ : 57234309
> YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
> GOOGLE: Steffan.Cline Lasso Partner Alliance Member
> ---
[jQuery] Re: File inputs
On Jan 30, 2008, at 6:11 AM, Steffan A. Cline wrote: Well, I tried many variations of .click() with FF and according to this link: http://www.quirksmode.org/dom/inputfile.html Yes, it is not possible to programmatically trigger click event on file input. But still, I would suggest you provide example page. I still do not understand what you are trying to do :) -- Mika Tuupola http://www.appelsiini.net/
[jQuery] Re: File inputs
on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>
> Some code would be useful - you've said that .click() doesn't work in
> FF, but it probably isn't the .click() bit that isn't working.
>
> One suggestion (untested) is that you include both the normal button
> and the new image, but hide the image with CSS by default. This means
> that if JS is disabled, the user can still click the normal button.
>
> Then with jQuery, hide the button and show the image on
> document.ready. Then apply a trigger to the image that fires the
> normal button action. It means you shouldn't need to code anything
> special - just piggy-back on the usual action of the button.
>
>
> Eg:
>
> $("#myImage").click(function () {
> $("#fileButton").trigger('click');
> });
>
> On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
>> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>>
>>
>>
>>
>>
>>
>>
>>> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>>
I know there is a plug-in for styling file inputs but what about
using a
custom image instead? I need to do something where I have an ADD and a
DELETE button side by side. I tried this using .click() and it worked
flawlessly but alas FF does not support it! How stupid!.
>>
>>> What are you trying to achieve? What does ADD and DELETE buttons do?
>>
>>> --
>>> Mika Tuupola
>>> http://www.appelsiini.net/
>>
>> The add button would simply pop up the file selector as clicking on the
>> actual file button would do. The delete button would set a hidden flag to
>> remove the stored file.
>>
>> See the previous thread ".click()" This described the previous method which
>> I gave up on.
>>
>> Thanks
>>
>> Steffan
Well, I tried many variations of .click() with FF and according to this
link:
http://www.quirksmode.org/dom/inputfile.html
reads:
"The click() method allows you to simulate a click on a form field.
Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
and Opera haven't added this method to file upload fields. I wonder why,
adding it is not really a security risk since the worst that can happen is
that the file selection window pops up.
So unfortunately we cannot use this simple solution."
I hadn't tried your "trigger" method. Did you test it in FF? I just did and
unfortunately as said on quirksmode that does not work :( but it does on
everything else.
What else do you suggest?
Thanks
Steffan
---
T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
Steffan A. Cline
[EMAIL PROTECTED] Phoenix, Az
http://www.ExecuChoice.net USA
AIM : SteffanC ICQ : 57234309
YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
GOOGLE: Steffan.Cline Lasso Partner Alliance Member
---
[jQuery] Re: File inputs
Actually, I just went a re-read the thread and I have NO idea what it is you're trying to achieve. On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote: > on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote: > > > > > > > > > On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote: > > >> I know there is a plug-in for styling file inputs but what about > >> using a > >> custom image instead? I need to do something where I have an ADD and a > >> DELETE button side by side. I tried this using .click() and it worked > >> flawlessly but alas FF does not support it! How stupid!. > > > What are you trying to achieve? What does ADD and DELETE buttons do? > > > -- > > Mika Tuupola > >http://www.appelsiini.net/ > > The add button would simply pop up the file selector as clicking on the > actual file button would do. The delete button would set a hidden flag to > remove the stored file. > > See the previous thread ".click()" This described the previous method which > I gave up on. > > Thanks > > Steffan > > --- > T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4 > Steffan A. Cline > [EMAIL PROTECTED] Phoenix, > Azhttp://www.ExecuChoice.net USA > AIM : SteffanC ICQ : 57234309 > YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED] > GOOGLE: Steffan.Cline Lasso Partner Alliance Member > Hide quoted > text - > > - Show quoted text -
[jQuery] Re: File inputs
Some code would be useful - you've said that .click() doesn't work in
FF, but it probably isn't the .click() bit that isn't working.
One suggestion (untested) is that you include both the normal button
and the new image, but hide the image with CSS by default. This means
that if JS is disabled, the user can still click the normal button.
Then with jQuery, hide the button and show the image on
document.ready. Then apply a trigger to the image that fires the
normal button action. It means you shouldn't need to code anything
special - just piggy-back on the usual action of the button.
Eg:
$("#myImage").click(function () {
$("#fileButton").trigger('click');
});
On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>
>
>
>
>
>
>
> > On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>
> >> I know there is a plug-in for styling file inputs but what about
> >> using a
> >> custom image instead? I need to do something where I have an ADD and a
> >> DELETE button side by side. I tried this using .click() and it worked
> >> flawlessly but alas FF does not support it! How stupid!.
>
> > What are you trying to achieve? What does ADD and DELETE buttons do?
>
> > --
> > Mika Tuupola
> >http://www.appelsiini.net/
>
> The add button would simply pop up the file selector as clicking on the
> actual file button would do. The delete button would set a hidden flag to
> remove the stored file.
>
> See the previous thread ".click()" This described the previous method which
> I gave up on.
>
> Thanks
>
> Steffan
>
> ---
> T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
> Steffan A. Cline
> [EMAIL PROTECTED] Phoenix,
> Azhttp://www.ExecuChoice.net USA
> AIM : SteffanC ICQ : 57234309
> YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
> GOOGLE: Steffan.Cline Lasso Partner Alliance Member
> Hide quoted
> text -
>
> - Show quoted text -
[jQuery] Re: File inputs
on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote: > > > On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote: > >> I know there is a plug-in for styling file inputs but what about >> using a >> custom image instead? I need to do something where I have an ADD and a >> DELETE button side by side. I tried this using .click() and it worked >> flawlessly but alas FF does not support it! How stupid!. > > > What are you trying to achieve? What does ADD and DELETE buttons do? > > -- > Mika Tuupola > http://www.appelsiini.net/ > The add button would simply pop up the file selector as clicking on the actual file button would do. The delete button would set a hidden flag to remove the stored file. See the previous thread ".click()" This described the previous method which I gave up on. Thanks Steffan --- T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4 Steffan A. Cline [EMAIL PROTECTED] Phoenix, Az http://www.ExecuChoice.net USA AIM : SteffanC ICQ : 57234309 YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED] GOOGLE: Steffan.Cline Lasso Partner Alliance Member ---
[jQuery] Re: File inputs
On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote: I know there is a plug-in for styling file inputs but what about using a custom image instead? I need to do something where I have an ADD and a DELETE button side by side. I tried this using .click() and it worked flawlessly but alas FF does not support it! How stupid!. What are you trying to achieve? What does ADD and DELETE buttons do? -- Mika Tuupola http://www.appelsiini.net/
