[JS] browsen naar een file vanuit een webomgeving

[Mastakilla]

lo

ik ben een intranet aan het ontwikkelen met ASP.NET VB.NET en een beetje Javascript

Bij de profielen van de gebruikers van dit intranet, kan men een foto kiezen

momenteel wordt hiervoor een <input type=file> tag voor gebruikt, maar tijdens het testen blijkt deze niet fatsoenlijk te werken

zolang men gewoon via browse een file kiest is er geen probleem, maar als men zelf in het textbox gedeelte van deze knop een foutief path naar een file invult (bv gewoon wat random letters), dan wordt het enorm problematisch...

als ik bv wat random letters typ en vervolgens op de submit knop druk, dan verschijnt er een Javascript foutmelding... deze verwijst naar 1 of andere regel waar ik geen flauw idee van heb hoe ik deze moet vinden, en geeft als melding "access denied"...

Nu d8 (hoopte) ik dat dit geen probleem zou zijn, als ik gewoon het path in die textbox bij het "onclick" event van die submit knop controleer... MAAR de error treed op VOOR deze event wordt aangeroepen... ook in de pageload kan ik geen validatie inbouwen, omdat de error ook hiervoor optreed...

Na wat zoeken heb ik ontdekt dat ik wel dmv javascript voor de foutmelding kan optreden (dmv onblur in te stellen), alleen heb ik geen flauw idee hoe ik met javascript het path met 100% zekerheid kan controleren

Ik heb ook al geprobeert de textbox van de input control readonly te maken, maar aangezien dit 1 input control is waar zowel een textbox als een knop in zetten, bleek het niet mogelijk om deze appart in te stellen

ik begin dan ook stilaan de hoop te verliezen

na enkele uren googlen en op mirc rondvragen ben ik nl nog geen meter verder geraakt...
net alsof ik de allereerste persoon op de wereld ben die iets random probeert in te typen in die textbox, of dat ik de enige persoon in de wereld ben waarbij deze error optreed... (beiden lijken mij zeer onwaarschijnlijk)

ik hoop dan ook dat iemand me kan verder helpen...

Bij voorbaat dank,
Maarten

(hieronder volgt nog wat code)

<INPUT id="fototekstbox" onblur="Check(this)" type="file" name="txtFoto" runat="server">

[André]

Je mag natuurlijk nooit zelf pathnamen invullen, want dan zou je dat ook met js kunnen doen en zo bij de client gevoelige info uit kunnen lezen. Je loopt dus gewoon tegen de security aan

[Mastakilla]

ik snap niet wat je bedoeld, kan je het aub iets duidelijker proberen uit te leggen?

en als het niet de bedoeling is om zelf een path in te vullen, waarom is die textbox van die input control dan niet readonly?

je kan toch moeilijk verw88 dat de "normale gebruikers" weten dat je die textbox niet mag gebruiken eh?

[André]

Ik denk dat ik snap wat je bedoeld: jij wil bij een fout path die error niet krijgen? Zet een andere textbox over die file-textbox heen en maak die readonly. Zo kunnen mensen niet zelf een path intypen en moeten ze wel de knop gebruiken.

[ Voor 246% gewijzigd door André op 08-07-2005 15:06 ]

[Mastakilla]

André schreef op vrijdag 08 juli 2005 @ 15:01:
Ik denk dat ik snap wat je bedoeld: jij wil bij een fout path die error niet krijgen? Zet een andere textbox over die file-textbox heen en maak die readonly. Zo kunnen mensen niet zelf een path intypen en moeten ze wel de knop gebruiken.

ik wil die error gewoon opvangen... als men bv iets fout intypt zou die textbox bv gewoon leeggemaakt kunnen worden (wat trouwens nog een ander probleem is aangezien blijkbaar alle properties van deze control die naar de text in deze textbox verwijzen readonly zijn... ik vermoed dat dit komt omdat de control clientside is en ik hem daarom niet kan aanpassen vanuit mijn serverside code)
een intranet is voor werknemers die niets van pcs afweten en moet dus 100% foolproof zijn

zo'n error is dus wel het laatste waar die mensen op zitten te wachten...

verder vind ik het een goed idee van je om er een readonly textbox boven te plaatsen, alleen zou ik niet weten hoe ik een control bovenop een andere control kan plaatsen
toen ik er net ff achter zocht bleek dit via css misschien wel te gaan, maar dan moest je al de positie in pixels gaan opgeven (wat natuurlijk ondoenbaar is aangezien resolutie niet overal hetzelfde is)

trouwens: ik zei net dat het om een javascript error ging, bij nader inzien moet ik toegeven dat ik dit niet zeker weet... Het is een error in internet explorer met als titel in de titelbalk "internet explorer... Er staat een verwijzing in naar een bepaalde regel en een bepaald character, en als melding "access denied"... maar deze info ben ik niets aangezien ik geen flauw idee heb waar hij die bepaalde regel uit heeft (welke temp file ofzo? de source? dit soort errors zou volgens mij de prijs voor "onduidelijkste error in de wereld" kunnen verdienen...)

[ Voor 26% gewijzigd door Mastakilla op 08-07-2005 15:20 ]

[Mastakilla]

is er geen andere / simpelere manier om vanuit een webomgeving een openfiledialog venster te krijgen?

[mulder]

Nein

[Equator]

Doe eens gek, en type de error eens over, of maak een screenie..

Dan kunnen we iets meer zeggen over de melding.

Nevermind..

[ Voor 9% gewijzigd door Equator op 08-07-2005 15:33 ]

[André]

CyberJ schreef op vrijdag 08 juli 2005 @ 15:29:
Doe eens gek, en type de error eens over, of maak een screenie..

Dan kunnen we iets meer zeggen over de melding.

Die heeft hij al genoemd: "Acces denied"

[Equator]

Oh, het is alleen een popup.. Hmm ff gemist..

[Bosmonster]

Niet eerst even kijken waar die javascript error vandaan komt? Want snap het probleem niet zo.

Blijkbaar zit er ergens javascript code die over zn nek gaat van wat letters (wat makkelijk te voorkomen is lijkt me). Uit zichzelf geeft een file input niet ineens js errors in ieder geval

De fout proberen weg te moffelen lijkt me nou ook niet echt een oplossing..

[Mastakilla]

heb je gelijk in bosmonster....

ik heb dan ook zonet wat zitten zoeken naar hoe ik die javascript errors kan debuggen, en dit lukt me nu ook al een beetje

de access denied error krijg ik bij Form.submit ofzo

ik ben intussen al wat verder voor het oplossen van het probleem dankzij deze code:

code:

    function Check(element)
    {
    if (!((element.value.substring(1,2) == ':') || (element.value.substring(0,2) == '\\')))
        {
            document.getElementById('_ctl1_fototekstbox').value = '';
            alert(document.getElementById('_ctl1_fototekstbox').value);
        }
    }

het enige probleem hiermee is volgens mij dat ik die textbox waarde niet leeg krijg

weet iemand hoe ik die <input type=file> control kan resetten ofzo? of iig die textbox leeg kan maken? vanuit javascript wel te verstaan...

[Bosmonster]

document.getElementById('_ctl1_fototekstbox').value = '';

Dat mag dus niet..

Een file input box is alleen te resetten door de hele form te resetten. (Dit kun je eventueel gebruiken als je de file upload in een losse form zet).

[ Voor 54% gewijzigd door Bosmonster op 08-07-2005 16:27 ]

[Mastakilla]

hmzzz

de form resetten?

ik zou niet direct weten hoe...
ik denk nl dat deze @ runtime pas wordt gemaakt ofzo
ik werk nl met user controls, en heb maar 1 aspx file per subsite...

waarom is dit allemaal zo complex?

is dit dan normaal dat dit zo lastig is? of vinden de meeste ontwikkelaars het geen probleem dat een paginas stampvol errors staan als de gebruiken eens per ongeluk iets in probeert te vullen in een textbox?

[ Voor 18% gewijzigd door Mastakilla op 08-07-2005 16:35 ]

[P_de_B]

Het komt niet van de gebruiker, jij probeert met Javascript een waarde te zetten, en dan krijg een permission denied error. Gelukkig maar.

[Mastakilla]

P_de_B schreef op vrijdag 08 juli 2005 @ 16:35:
Het komt niet van de gebruiker, jij probeert met Javascript een waarde te zetten, en dan krijg een permission denied error. Gelukkig maar.

euhmz

ik kreeg die error VOOR ik met javascript een waarde probeerde te zetten in die value...
nu krijg ik die bepaalde error NIET meer

het probleem nu is dat de fout wel opgevangen wordt, maar dat de textbox van die input control nadat ontdekt is dat er iets fout instaat, niet leeg gemaakt kan worden

[P_de_B]

Mastakilla schreef op vrijdag 08 juli 2005 @ 16:38:
[...]

euhmz

ik kreeg die error VOOR ik met javascript een waarde probeerde te zetten in die value...
nu krijg ik die bepaalde error NIET meer

het probleem nu is dat de fout wel opgevangen wordt, maar dat de textbox van die input control nadat ontdekt is dat er iets fout instaat, niet leeg gemaakt kan worden

Ik snap het niet helemaal. Jij doet toch:

code:

 document.getElementById('_ctl1_fototekstbox').value = '';

[ Voor 3% gewijzigd door P_de_B op 08-07-2005 16:41 ]

[Mastakilla]

ik zei net dat die bepaalde fout niet meer voorkomt...
ik vergiste mij dus

zo is er een dropdownlist voor de afdeling, en wanneer men hier selectedindex verandert, wordt het profiel in een sessie opgeslagen en gebeurt er een pagereload (hier moet dus net zoals bij het saven van de form, het profiel op invoer gecontroleerd worden)

wanneer men iets fout invult en vervolgens een dropdownlist met afdeling wijzigt, verliest de input control zijn focus waardoor het kleine stukje javascript van hierboven uitgevoert wordt, en op 1 of andere manier de error onderdrukt...

maar omdat ik de value van de input control niet gereset krijg, blijft hier een foutieve waarde staan

wanneer men vervolgens dan ook probeert te saven, zal de user control de focus NIET verliezen, omdat deze de focus niet meer heeft... de javascript code om de foutmelding te vermijden wordt dan ook niet uitgevoerd deze tweede keer, waardoor de error terug verschijnt...

dit is trouwens de plaats van de error:

code:

<script language="javascript" type="text/javascript">
<!--
    function __doPostBack(eventTarget, eventArgument) {
        var theform;
        if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
            theform = document._ctl0;
        }
        else {
            theform = document.forms["_ctl0"];
        }
        theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
        theform.__EVENTARGUMENT.value = eventArgument;
        theform.submit();
    }
// -->

de laatste regel geeft een "access denied" foutmelding

[ Voor 5% gewijzigd door Mastakilla op 08-07-2005 16:52 ]

[Mastakilla]

P_de_B schreef op vrijdag 08 juli 2005 @ 16:40:
[...]


Ik snap het niet helemaal. Jij doet toch:

code:

 document.getElementById('_ctl1_fototekstbox').value = '';

ja dat heb ik nadien gedaan ja
als poging tot het probleem op te lossen...

en het leegmaken van deze value werkt misschien niet, maar het geeft wel geen error...

[ Voor 17% gewijzigd door Mastakilla op 08-07-2005 16:49 ]

[P_de_B]

Wat is nu nog precies je vraag? Je kunt niet de waarde van een file input zetten.

[Mastakilla]

P_de_B schreef op vrijdag 08 juli 2005 @ 16:50:
Wat is nu nog precies je vraag? Je kunt niet de waarde van een file input zetten.

een oplossing zonder errors en zonder iets van de gebruiker te verw88 (100% foolproof)

maakt niet uit met welke taal, op welke manier, etc, etc

zolang het maar opgelost wordt...

ik heb het dus over het browsen naar een file (een foto bestand) waarna men deze foto in het profiel opslaat...

ik heb dus absoluut geen behoefte aan een textbox waar men dit zelf in kan vullen...
het moet gewoon 100% foolproof en correct zijn...

[mulder]

je gebruikt ASP.NET zie ik, denk je er aan dat je een gegenereerde id gebruikt? Je zult op de plek van dat id <%=[control_naam].Client%> moeten doen om zeker te zijn dat je de goede hebt.

EDIT: ClientId property

[ Voor 10% gewijzigd door mulder op 08-07-2005 18:27 ]

[Mastakilla]

ik heb dit net geprobeert, maar dit werkte jammergenoeg niet...

kan je misschien een vb geven van een concrete oplossing hiervan?

[NMe]

Aan clientside topics maken wij hier in Programming & Webscripting onze handen niet vuil.
Met andere woorden: Javascript moet in Webdesign & Graphics.

PW>>WG

[ Voor 9% gewijzigd door NMe op 08-07-2005 17:39 ]

[KneoK]

Mastakilla schreef op vrijdag 08 juli 2005 @ 16:55:
[...]


een oplossing zonder errors en zonder iets van de gebruiker te verw88 (100% foolproof)

maakt niet uit met welke taal, op welke manier, etc, etc

zolang het maar opgelost wordt...

ik heb het dus over het browsen naar een file (een foto bestand) waarna men deze foto in het profiel opslaat...

ik heb dus absoluut geen behoefte aan een textbox waar men dit zelf in kan vullen...
het moet gewoon 100% foolproof en correct zijn...

Dit is misschien heel simpel gedacht hoor, maar waarom zet je niet gewoon een bericht boven je invoerveldje dat mensen onder geen beding zelf moeten gaan typen, maar dat ze gewoon netjes het knopje gebruiken ?

Als je ze toch een melding wilt geven als ze het fout doen, waarom dan niet vooraf waarschuwen ?

Edit: en anders misschien eens naar een PHP upload scriptje kijken ? Dan kun je gewone invoervelden en submitknoppen gebruiken enzo....

[ Voor 8% gewijzigd door KneoK op 08-07-2005 18:18 ]

[djluc]

Je moet dan verder kijken dan standaard HTML componenten. Je moet dan gaan denken aan Java (niet JavaScript!) of ActiveX. Die talen kunnen ook lokaal bestanden benaderen na het geven van permissie door de gebruiker.

[ripexx]

djluc schreef op vrijdag 08 juli 2005 @ 18:37:
Je moet dan verder kijken dan standaard HTML componenten. Je moet dan gaan denken aan Java (niet JavaScript!) of ActiveX. Die talen kunnen ook lokaal bestanden benaderen na het geven van permissie door de gebruiker.

Daarnaast kan je ook het file system object gebruiken in IE (Oke is wel ActiveX) maar voor een intranet omgeving kan je wel een eis hanteren dat de browser IE moet zijn. En anders mis je gewoon bepaalde functionaliteit. Voordeel van het FSO van MS is dat je snel en eenvoudig het filesystem van de client kan benaderen. Zo kan je gewoon een explorer namaken en daarmee files laten selecteren.

[Verwijderd]

Tenzij het een HTA betreft, is voor het FSO object ook een aanpassing vereist in je security settings. Ook in intranetten is het een no-go om aanpassingen te maken aan instellingen van de browser, anders dan de default instellingen. De kosten van het beheer stijgen de pan uit, om nog maar niet te spreken over nadelige gevolgen voor andere applicaties die weer andere settings nodig hebben, en sommige settings zijn zo kansloos dat ze vooral met applicaties waarin veel javascript wordt gebruikt de browser compleet laten hangen.

[ Voor 14% gewijzigd door Verwijderd op 08-07-2005 20:00 ]

[Mastakilla]

BioWEB schreef op vrijdag 08 juli 2005 @ 18:17:
[...]

Dit is misschien heel simpel gedacht hoor, maar waarom zet je niet gewoon een bericht boven je invoerveldje dat mensen onder geen beding zelf moeten gaan typen, maar dat ze gewoon netjes het knopje gebruiken ?

Als je ze toch een melding wilt geven als ze het fout doen, waarom dan niet vooraf waarschuwen ?

Edit: en anders misschien eens naar een PHP upload scriptje kijken ? Dan kun je gewone invoervelden en submitknoppen gebruiken enzo....

omdat ik er van uit ga dat niemand die meldingen leest lijkt me dit onvoldoende...
ik zal wel je PHP upload script tip eens wat beter bekijken, thx....

thx 4 the replies djluc, ripexx, Gordijnstok
ik zal ook de Java manier nog eens proberen uit te zoeken

ik blijf het wel zeer vreemd vinden dat je zowel langs client als langs server site een html <input type=file> control niet kan resetten of leegmaken

[crisp]

Mastakilla schreef op dinsdag 12 juli 2005 @ 09:56:
[...]
ik blijf het wel zeer vreemd vinden dat je zowel langs client als langs server site een html <input type=file> control niet kan resetten of leegmaken

Dat is, zoals genoemd, een beveiliging waar je inderdaad niet omheen kan. Resetten kan wel, maar dan moet je het hele form resetten

Overigens; als je JS-errors krijgt op de submit() method van een form dan komt dat meestal omdat je ergens een name="submit" hebt gebruikt.

[Mastakilla]

ik gebruik nergens name="submit"

en als je die input control niet kan resetten, waarom kan je dan wel in die tekstbox foute dingen invullen waar ie van crasht?
ik begrijp gerust dat bepaalde dingen niet kunnen om security redenen, maar dat een standaard control gewoon NIET fatsounlijk bruikbaar is omdat er ALTIJD een mogelijkheid blijft om als onwetende user fouten te genereren, dat kan ik echt niet begrijpen...

ik heb zonet een oplossing van deze pagina geprobeert:
http://p2p.wrox.com/archive/asptoday_discuss/2002-07/20.asp

nl de tekstbox zo klein mogelijk maken, en een readonly textbox eraan te koppelen

code:

    function fileSelect(control, value)
    {
        if (document.all[control] != null)
        {
            (document.all[control]).value = value;          
        }
    }

                    <asp:panel id="pnlFoto" runat="server" Height="24px">
                        <asp:TextBox ReadOnly="True" id="txtFotoTekstBox" Runat="server"></asp:TextBox>
                        <INPUT id="fototekstbox" onchange="fileSelect('_ctl1_txtFotoTekstBox',this.value)" style="WIDTH: 7px; HEIGHT: 22px" type="file"
                            size="1" name="txtFoto" runat="server">
                    </asp:panel>

maar ook deze oplossing is niet voldoende...

nog steeds is het mogelijk om dmv tab in die input zijn textbox foutieve waarden in te vullen waardoor fouten optreden...

ik zal dan nu eens wat zoeken naar een manier om het met java te doen...
als iemand hiervoor een pagina met uitleg weet, is deze altijd welkom

[P_de_B]

Je gaat nu serieus een applet maken om dingen te uploaden omdat mensen die een raar pad intypen een permission denied error te besparen?

[Mastakilla]

ik ben net op een mogelijke oplossing gekomen... (als ze mogelijk is tenminste)

ik wou heel de control op invisible zetten en disablen, en dan een extra textbox (zoals in mijn post hierboven) EN een extra knop te maken...

als je dan op deze knop drukt, dan wordt de input control terug tijdelijk enabled, en wordt de knop van de input control ingedrukt (en hier zit ook het probleem, ik weet niet hoe ik dit moet doen bij zo'n control), vervolgens kan men een file kiezen, op ok klikken en wordt de control terug disabled...

weet iemand hoe ik die (clientside?) event kan aanroepen van die input control?

ik hoop dat dit mogelijk is... mijn ideeën beginnen nl op te geraken

[Mastakilla]

P_de_B schreef op dinsdag 12 juli 2005 @ 10:54:
Je gaat nu serieus een applet maken om dingen te uploaden omdat mensen die een raar pad intypen een permission denied error te besparen?

ze krijgen geen permission denied error, ze krijgen een onverstaanbare internet explorer error die verwijst naar een regel en char van niet verder bepaalde debug source code... (ok, er staat ergens "access denied" in de foutmelding, maar dan nog is dit geen foutmelding bedoeld voor de eindgebruiker)

dit levert gegarandeert extra overlast op voor de ICT helpdesk, en het intranet wordt juist ontwikkeld om dit te verminderen...
Een correcte, verstaanbare foutmelding zou ik nog door de vingers kunnen zien, maar het liefst van al heb ik natuurlijk gewoon geen mogelijkheid tot fouten...

[ Voor 14% gewijzigd door Mastakilla op 12-07-2005 11:10 ]

[Mastakilla]

ik heb nu heeeeeeel bijna een mogelijke oplossing...

bij onblur doe ik hetvolgende:

code:

    function Check(element)
    {
        if (!((element.value.substring(1,2) == ':') || (element.value.substring(0,2) == '\\') || (element.value == '')))
        {
            alert("Het path naar de foto is ongeldig... Probeer opnieuw...");
            window.location="profiel.aspx?detailid=0&reloadbyinputcontrol=1";
        }
    }

ik herlaad dus gewoon heel de pagina als er iets fout is ingevult...

Hij haalt alle info opnieuw uit het profiel dat is opgeslagen in een session...

dit werkt tot nu toe allemaal goed, ik zou alleen nog als die input control de focus krijgt, het profiel nog willen opslaan in de session (dit kan door gewoon mijn functie SaveSession() in serverside aan te roepen)
het probleem is dan ook dat ik niet direct een event vind bij die input control om te reageren op het krijgen van de focus...

misschien dat iemand me daar nog mee kan verder helpen?

[Verwijderd]

Waarom zorg je niet gewoon dat het input gedeelte een laag erover heen krijgt.

Als je dan vervolgs met Javascript een lijst laat meelopen van bestanden die je toevoegt heb je echt een steengoeie oplossing.

[Mastakilla]

pfffffftttrrrrr

hoe meer ik hier over opzoek en hoe meer ik probeer, hoe hopelozer ik wordt, en des te meer ik in zie hoe hard deze omgeving (of mijn kunnen om ze te gebruiken) ZUIGEN

een fatsounlijke event voor getfocus en loosefocus lijken ook niet te bestaan in asp.net omgeving
hetgeen ik dan ook aan het proberen was, is na laaaaang zoeken dan ook nog steeds niet gelukt

wat bedoel je met een laag er over heen?
kan je me dat uitleggen? ik zou nl niet weten hoe... (heb al iets gehoort over een manier waarbij je de positie van een object zodanig bepaald dat het erover gaat (met pixels), maar dit lijkt me onhaalbaar als je dat venster ook nog een beetje wil kunnen resizen...
ook is er iets over zetten nog niet perfect volgens mij... net zoals die oplossing waarbij ik er een textbox naastzet, denk ik dat ik via tab nog steeds de textbox kan bereiken en rommel kan invullen om em zo te laten crashen...
of vergis ik mij?

verder moet ik maar 1 simpel filetje kunnen selecteren, geen meerdere ofzo

[Mastakilla]

uiteindelijk heb ik geen fatsounlijke oplossing gevonden...

ik heb het nu wel zodanig geprogged dat er geen ongewenste errors meer kunnen voorkomen

dit heb ik gedaan door de selectie van de foto in een apparte popup venster te doen...

je klikt dus op de foto en vervolgens verschijnt er een popup met hierin die <input type=file> control

in deze popup kan je vervolgens op browse, cancel, reset of ok klikken

hoewel deze extra popup eigelijk overbodig is, lijkt dit me de enige, nog een beetje in orde, oplossing...
ik kan hier nl als er een fout optreed, deze in javascript opvangen en gewoon heel die popup herladen (dit kon ik niet in de profiel pagina zelf omdat de wijzigingen dan verloren gingen)

Dank aan Pascal voor het idee

[ Voor 15% gewijzigd door Mastakilla op 13-07-2005 16:29 ]

[Pascal Saul]

Mastakilla schreef op woensdag 13 juli 2005 @ 16:28:
Dank aan Pascal voor het idee