What is involved to upload image file into HTML doc?

[Deanna475]

Hello all. I'll be honest. I don't know a thing about ASP except that my preliminary research on the web tells me that what I want to accomplish involves ASP. Or maybe not? Here's my situation .....

Imagine, if you will, an interactive web page colourizer or page composer. You can control all of the elements on the page and change the background colour from several palettes, an RGB colour slider or choose a background image from the library of pre-selected graphics which reside on my server. You can change the font colour, size and family of the font, bold and/or italicize the "sample" text, etc. You can choose between different layouts (3-frame set up, 2 frames, etc.). The entire "canvas" area is totally customizable and when the user has a page they are satisfied with, they can copy and paste the source code for their creation and proceed to edit their page in their HTML editor. Pretty nifty, if you ask me!! *S*

But to make this page composer truly effective and to really give a web designer an excellent idea of what their page can look like before they even copy the source code, I thought it prudent that the user should be able to "paste"/upload their own background graphic into a table cell which I have identified as "canvas".

Now ...... through JavaScript and CSS, I have accomplished all of the above except for the functionality of what I described in the second paragraph. This is where I think ASP comes into play.

What is involved in getting a user's image from their hard drive to "import/paste/upload" it into a standard HTML page to take the place of the background attribute of the table cell, keeping in mind that there is text and other images already coded in the cell. The images that are already in the cell are straightforward IMG SRC and do not form part of the cell's background.

My research has told me that there are ASP-based "file transfer / fileUp" modules available for tasks similar to what I want to do but they are 99% overkill for what I want to accomplish and cost around $300 US (the ones I found anyway). I'm not against spending some coinage on this project but I don't have $300 US (converted into Canadian dollars might as well be $3,000 !!!) for something that does way more than I need it to, plus there's the installation fee to consider since I don't have a clue about how to do this on my own. I only know that it *can* be done.

Any feedback in this department would be greatly appreciated.

Deanna, {trying to sound like she knows what she's talking about ;) }

PS: In case it matters, I only need this to work in IE5.5+ browsers on PCs using Windows 95+ o/s.

[Mhtml]

Well, you don't need to use ASP if it is only a preview thing, you can just specify the location of the file on the users pc.

But if they were going to actually save it on the net straight away or something like that you will need an asp component.

ASP Upload is free and works well. http://www.aspupload.com

As I was saying before, if they are just going to be previewing it themselves you can just link directly to the file on their harddrive.

[Deanna475]

Hi and thank you for your quick reply. Yes, I only want the user's image to be a preview thing -- to see what their customized web page would look like using a background image from their hard drive. In fact, the user may have more than one image they want to preview in the canvas area of my HTML page and so for sure this is only a temporary thing.

So, how do I go about specifying the location of the file on the users pc? Is this a JavaScript issue now?

Any further input would be much appreciated. Thanks.

[glenngv]

use the file input element:

<input type="file" name="backgroundFile">


then to put the value of that in the cell background:

document.getElementById("idOfCell").style.backgroundImage=document.formNameHere.backgroundFile.value;

[Deanna475]

Hi Glen. No kidding? It can be that easy? I've talked to 4 web developers, been all over the freakin' web researching this, was actually looking at $300 modules, and you say I can accomplish what I want with 2 lines of code? Well, I'll be ......... *S*

If this works, then you're amazing!! Oh, but don't we need an "apply" button or OK button or something? Ya know, once the file name is in the input box, the user has to apply it to the cell's background. So how would we code the OK/Apply button for this?

Deanna

[glenngv]

ive given the code already in my previous post.

[Deanna475]

Ahhh, OK. So the equivalent of a "submit" or OK button goes something like this:

<input type=button onClick="document.getElementById("idOfCell").style.backgroundImage=document.formNameHere.backgroundFile.value;">

The reason I ask is because I thought I might have to add that to the overall script that makes all of the elements on the page change. I've never coded an input button to perform such a function.

Right then, if I'm on the right track, I'll apply this to my page right now and see how it goes ........

Thank you for your input again.

D.

[Deanna475]

Hmmmm, I appear to have done something wrong. I keep getting an invalid argument error message.

<input type="file" name="backgroundFile">

<input type=button value=Apply onFocus="if(this.blur)this.blur()" onClick=document.getElementById("canvas").style.backgroundImage=document.f1.backgroundFile.value;>

Did I implement this correctly?

D.

[Spudhead]

<input type="button" value="Apply" onClick="document.getElementById('canvas').style.backgroundImage=document.f1.backgroundFile.value;">

Try that. I dunno why that blur() stuff was in there, but it's probably not helping :)

[Deanna475]

Hi Spudhead and thanks for your input as well. Hmmmm, did as you suggested and now I'm getting an "object expected" error. :confused:

Oh, and the "onblur" part prevents the dotted lines from appearing around the input button. But I removed it just as you suggested and it doesn't matter either way.

So this is what I have now:

<input type="file" name="backgroundFile">

<input type="button" value="Apply" onClick="document.getElementById('canvas').style.backgroundImage=document.f1.backgroundFile.value;">

Any other suggestions? I'm listening ....... *S*

D.

[glenngv]

can you post the whole code?

[Deanna475]

Sure, Glenn. You can view the entire project at:

http://www.theinspirationgallery.com/composer/generator12.htm

The code in question can be easily located by searching for the comment: <!--GLENN, THIS IS THE CODE IN QUESTION-->

Please bear in mind that it's still not finished and this is only a temporary link.

Thank you for taking a look at this for me. Your time and expertise is much appreciated.

D.

[glenngv]

oh sorry, the code I've given you has wrong syntax.

you should have used:

document.getElementById("canvas").style.backgroundImage="url("+document.f1.backgroundFile.value+")"

why didn't you notice that the syntax I gave you was wrong when you had other codes like:

case "canvas" :
document.getElementById("canvas").style.backgroundImage="url("+which_image+")"
break;

[Deanna475]

Ahhhh, because I'm not doing the coding alone!! In fact, the majority and the most intricate parts of the scripting have been done by my partner who only this afternoon added the code which you used as an example. He is of the opinion that it's not possible to upload an image from a hard drive using JS; he thought this was only possible with the use of ASP or some other SSI language, and I agreed with him until I posted this thread as a last resort. So I wanted to branch out on my own and see if I could figure it out. With your help, I just may have done so. I am going to change the code now and see what's what.

Thank you Glenn.

A moment later ..... you did it, Glenn!! It does just as I want it to. Thank you so VERY much. My partner will also be pleasantly surprised when I show him this new update.

D.

[glenngv]

just a note that we are NOT doing an upload script here. It's just a preview thing. If, eventually, the image has to reside on the server, then (as your partner said) you need server-side script to upload the image on the server.

[Deanna475]

Understood Glenn. And I only want it to be a preview thing. In fact, I can't stop "playing" with it since I added your code. I'm previewing just about every background graphic on my hard drive! *S* Thank you again. :thumbsup:

D.