WINAMP.COM | Forums - Walkthrough: Allowing users to select a file through a File Open dialog

WINAMP.COM | Forums : Powered by vBulletin version 2.3.9

WINAMP.COM | Forums > Skinning and Design > Modern Skins > Walkthrough: Allowing users to select a file through a File Open dialog

Last Thread Next Thread

Author

Thread

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

Walkthrough: Allowing users to select a file through a File Open dialog

Walkthrough: Allowing users to select a file through a File Open dialog

What is intended: To allow the user to select a file from through a file select dialog and then passing the file path to a string which can then be further processes and be used for various other things.

What can be done by that: You can allow the user to pick up bitmap files and then apply them in the skin for making customized backgrounds, animations or customized graphics/logos at different places. The main aim here is that the user is able to select a file through the dialog than rather type the whole file path which is not only tiresome but can easily result in erorrs.

How it started: I actually made this for leechbite, who wanted to allow users to select a texture through the file dialog which can then be used in the skin as a customized background in his skin, Kameleon DUI.

Technologies at work: The technologies we'll be using are: JavaScript (The most important), HTML, CSS, MAKI (The interface between JS, HTML, CSS and the skin) and obviously, WasabiXML.

Part 1: How we go about it
The idea is simple. Just create a browser object which will link to an HTML file with a file upload input box which will allow the user to select a file. Second, once the file is selected, using JavaScript we will redirect the browser to an HTML dummy file in which we'll be providing a query string such which we will contain the file name. Then we will parse the re-directed page's address and get the path of the filename selected by the user...

Part 2: The Skin
This is simple. All you need is a <browser> object within any container. A simple example is as follows:

code:
  <container id="fselect" name="Select File through Box">
   <layout id="normal">
    <Wasabi:StandardFrame:NoStatus id="fselect" w="200" h="200"/>
    <browser
     id="filebrowse"
     x="30" y="30"
     w="130" h="100"
     scrollbars="never"
    />
    <text
     id="dummyaddholder"
     x="-20" y="-120"
     text="file:///@SKINPATH@"
     alpha="0"
    />
    <text
     id="filename"
     x="30" y="140"
     width="180"
    />
    <script id="fselect.browser" file="fselect.maki"/>
   </layout>
  </container>

The browser object is quite clear. As for the two text object holders, 'dummyaddholder' is added to get the store the skin path somewhere which we can use later. The 'filename' text object is the object to which we will output the file path we recieve.

Part 3: The HTML+JS+CSS page
This is the most important part of it. This HTML page will present a file upload box which can will return uss the path of the file selected. Code for fselect.html

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://wwww.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  <!--
	body {
		margin: 0px;
	}

	input {
		margin-left: -145px;
	}
  -->
  </style>
  <script type="text/javascript">
  <!--
	function checkFile() {
		var name = document.getElementById('fselect').value;
		document.location = "fseldum.html?add={__" + name;
	}
  //-->
  </script>
 </head>

 <body>
  <input type="file" id="fselect" onchange="java script:checkFile()" />
 </body>
</html>

In this file, look at the <input> object. It's attribute says onchange="java script:checkfile()". Hence whenever the content of the <input type="file"> changes, the JavaScript checkfile() function will be executed. As you can see we have defined a checkfile() function which first gets the path of the file using "document.getElementById('fselect').value" and then it appends the file name to a dummy HTML file called fseldum.html. So, if you actually selected a file called 'c:/personal/photograph.jpg', the page will be redirected(using document.location) to: 'fsledum.html?add=(__c:/personal/photograph.jpg'. As we have added the file name to the query string, the page will load without giving any error. The fseldum.html file may be empty or just create <html></html> tags for the sake of it.

As for the CSS there, I set the margin to -149px so that the textline of the <input type="file"> object is hidden and only the "Browse" button is visible.

Part 3: The MAKI file
Now, we come to the interface between the browser and the winamp skin. Here's the code for fselect.m:

code:
#include <std.mi>

Global browser fselect;
Global text dummyadd;
Global int gone;
Global text fileout;

System.onScriptLoaded() {
	layout normal = getContainer("fselect").getLayout("normal");

	fselect = normal.getObject("filebrowse");
	fileout = normal.getObject("filename");

	dummyadd = normal.getObject("dummyaddholder");
	dummyadd.hide();
	fselect.navigateUrl(dummyadd.getText() + "fselect.html");
	gone = 1;
	fselect.setXMLParam("scrollbars", "never");
}

fselect.onDocumentComplete(String url) {
	if(gone == 1) {
		int flocpos = strsearch(url, "?add={__");

		if(flocpos != -1) {
			int starting = (flocpos + strlen("?add={__"));
			int length = (strlen(url) - (flocpos + strlen("?add={__")));
			String floc = strmid(url, starting, length);
			fileout.setText(floc);
		}
	}
}

It's quite simple. I make a browser object and locate it from the skin. Most important here is the fselect.onDocumentComplete() event. It is fired when the page finishes loading. It gives a parameter, which isthe URL at which the browser currently is. In our case it must be something like "file:///C:\program files\winamp\skins\myskin\fseldum.html?add={__c:/personal/photograph.jpg". What we do is parse that string. It is done by first getting the position of the string, then finding the starting position of the address(int starting) and by finding the length of the filepath in that whole string(int length).

Then using strmid, we parse out the filename into a string called 'floc'. This string can be used as you like for various purposes.

Here, I navigate the browser to the fselect.html page as and when the script is loaded. You can do that anytime you wish.

I hope this helps you. Bye

-rohan

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

03-11-2006 09:58 AM

Click here to Send rohan_pwln a Private Message

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

I'll work out an wal-xui-interface for easy implementation in skins

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-14-2006 03:14 PM

Click here to Send martin.deimos a Private Message

Michgelsen
Major Dude

Registered: Oct 2003
From: Netherlands

Good addition for the maki cheats thread!

__________________
Rectangular, AudioRack & Studiosus

Quick Link | Report this post to a moderator | IP: Logged

03-14-2006 05:16 PM

Click here to Send Michgelsen a Private Message

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

i started working right now

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-14-2006 07:20 PM

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

thanks a lot everybody...

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

03-15-2006 06:11 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

is there a way to 'click' on the input object via JS?, so i don't need to click the button and the popup appears on site loading? this might be usefull to create a wasabi button wich will load the html and with it the popup appears!

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-15-2006 08:11 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

fileselect example skin

here is a little example skin with an full skinned xui object!

should i post this on the maki cheats thread?

Martin

Attachment: fileselect_example.wal
This has been downloaded 466 time(s).

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-15-2006 04:04 PM

Michgelsen
Major Dude

Registered: Oct 2003
From: Netherlands

Martin, don't post it yet, I found a little typo in interface.xml. In line 17, there's sysrehion="1", which should be sysregion="1" I think.
In script.m in line 26 I see 'if (value = "1")', which should be 'if (value == "1")'.

And shouldn't you pack exd.mi with it too? It's a .mi file you made yourself right? I saw it's included with script.m.

__________________
Rectangular, AudioRack & Studiosus

Quick Link | Report this post to a moderator | IP: Logged

03-15-2006 06:21 PM

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

thanks a lot martin for that.

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 06:26 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

no prob! will update this soon, cause i added a few functions/removed bugs

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 09:54 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

new Version

fixed all bugs mentioned
+ cannot enter % in editbox -> crash on example1

Attachment: fileselect_example2.wal
This has been downloaded 474 time(s).

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 05:24 PM

SLoB
Major Dude

Registered: Jul 2003
From: UK

cool stuff martin
two things, the filetypes still allow .gif, .html to be chosen, this should be able to be locked down further

and also the maki fileselect scripts are using the same workaround for open notifier cover art workaround which was deemed a no-no

I'm sure this would be looked at with the same view regardless of the cool functionality it offers, this is perhaps even more a trap than the cover art

__________________
L8r
SLoB

Web Design | Web Design Farnborough | Web Development Hampshire

WebSite: http://www.skinconsortium.com - Community for UserInterface Design & Coding
SLoB
cPro - MMD Skin

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 06:10 PM

Click here to Send SLoB a Private Message

Michgelsen
Major Dude

Registered: Oct 2003
From: Netherlands

What was that about? The html/javascript as .maki?

__________________
Rectangular, AudioRack & Studiosus

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 07:31 PM

SLoB
Major Dude

Registered: Jul 2003
From: UK

yep, used in this instance is more of a security issue than the cover art unless its allowed as common practice i can see this being squashed, afaik winamp wont allow skins to be submitted with the workarounds for cover art? so this is using the same workaround

i personally dont have a problem with it, i see it as a solution but it seems as though security is more of an issue than more functionality

__________________
L8r
SLoB

Web Design | Web Design Farnborough | Web Development Hampshire

WebSite: http://www.skinconsortium.com - Community for UserInterface Design & Coding
SLoB
cPro - MMD Skin

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 08:55 PM

Michgelsen
Major Dude

Registered: Oct 2003
From: Netherlands

Hmm I feared so. When I read the "used technologies" part I had my doubts. Anyway I think it's cleverly done, but understand also why they won't accept it.

__________________
Rectangular, AudioRack & Studiosus

Quick Link | Report this post to a moderator | IP: Logged

03-16-2006 09:35 PM

leechbite
Banned

Registered: Sep 2003
From: Canada

awesome! i'll give this a try. although there are some issues with this technique:

1. an embedded (although hidden) IE browser usually slows winamp. (this is not a big issue, kameleon is slow already anyway. )
2. im not sure if it was fixed but this greatly rely on the function onDocumentComplete which as i remembered does not work all the time. on some random cases onDocumentComplete function is not triggered. this might frustrate some users.

Quick Link | Report this post to a moderator | IP: Logged

03-19-2006 09:27 PM

Click here to Send leechbite a Private Message

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

quote:
afaik winamp wont allow skins to be submitted with the workarounds for cover art

...then thy should give us the <wasabi:coverart> object (i#ve contacted benski for that...) and fix system.onSelectFile() and the <wasabi: pathpicker> object!
Anyway i'll go back to use the maki hacked htmls 'cause it is the best solution and anyone uses this!
Question: has winamp-staff allowed to use the maki hack for coversearch?

quote:
two things, the filetypes still allow .gif, .html to be chosen, this should be able to be locked down further

there is a param accept="image/png" but this doesn't work with IE6! can someone find a way to do it...

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-20-2006 09:00 AM

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

ya.. even i too tried using accept="image/png, image/jpeg, image/jpg"... but it didn't work at all in IE6 nor in Opera8. It however worked in Opera9.tp2

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

03-20-2006 10:32 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

in the dreamweaver docs it says it will be supportet with netscape7and iexplorer7

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

03-20-2006 11:01 AM

leechbite
Banned

Registered: Sep 2003
From: Canada

just implemented this on Kameleon. works great! thanks to both of you.

Quick Link | Report this post to a moderator | IP: Logged

04-21-2006 11:26 PM

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

thanks for using it.. leech.

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

04-22-2006 07:41 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

cool!
we made this for poeple that wanna use it!

another idea:
if we want only to select a folder (coverlibrary, etc.) we could do the following:
make a new dynamic container, add a location edit like the explorer search field on the top, then implement a browserobject which shows file:///C: as default url and add a Select button on the button.
now u could navigate to a folder and click on the select button.
via onDocumentcomplete(), or getURl/getXMLParam("url") we could get the path of the current folder the user wants to have!

what do u guys think=

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

04-24-2006 09:47 AM

rohan_pwln
Major Dude

Registered: Aug 2002
From: 18 inches from hell

that's a good idea, but you cannot select folders via the browser file-fetch controls.

__________________
My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway

Quick Link | Report this post to a moderator | IP: Logged

04-24-2006 08:07 PM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

i'll post an example skin soon...

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

04-25-2006 08:07 AM

martin.deimos
Martin Pöhlmann
UI Developer
Winamp Dev Team

Registered: Sep 2004
From: Bavaria

i've bundled this hacked html file with the new version of MSPP, so I don't need the renaming to maki hack anymore!

__________________
WebSite: www.skinconsortium.com - Community for Userinterface Design & Coding
Skins: Click Here

Quick Link | Report this post to a moderator | IP: Logged

05-02-2006 08:38 AM

All times are GMT. The time now is 09:20 AM.

Last Thread Next Thread

WINAMP.COM | Forums > Skinning and Design > Modern Skins > Walkthrough: Allowing users to select a file through a File Open dialog

Show Printable Version

Email this Page

Subscribe to this Thread

Forum Jump:

Forum Rules:

You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

HTML code is off
vB code is ON
Smilies are ON
[IMG] code is ON