Upload and Preview Image with Javascript with making any server calls

K

kiran

HI All,



I have a requirement here wherein I have to upload a image preferably JPEG and Preview it to the users.I know there are some ways of doing it like uploading the image and storing it in the server via ajax or server side programs and then bringing it back to the user for preview. But I do not want togo that way,



I was thinking it is possible that user upload the image, JS somehow storesthe image data in the variable in the runtime and then displays it in thepredefined area to the user and once he is satisfed with image, then maybehe can save it to the server.



I would be helpfull if you can suggest some solutions to this as i have been doing a research for sometime now and all I can see is there are plugins some with jquery and some with other librarires , all those has one thing in common, they make calls to server side programs to store the image somewhere.I dont want to make any calls ,just the user needs to select the image and then click the preview button ,see the image in predefined area and once satisfied then make the server call.



I faintly remember this was the process during IE5/6 era though cannot recollect precisely.Is this possible now ?
 
E

Elegie

On 06/11/2011 16:51, kiran wrote :

Hi,
I have a requirement here wherein I have to upload a image preferably
JPEG and Preview it to the users. I know there are some ways of doing
it like uploading the image and storing it in the server via ajax or
server side programs and then bringing it back to the user for
preview. But I do not want to go that way,
Click to expand...

The control input[type] is bound to severe security constraints, as it
accesses the user file system. Could you give some more context, and
explain why doing so is not possible for you?

For your information, the W3 consortium has published a working draft
for the "File API", which could be used to solve your issue. However I
have not read it yet, and do not know to what extend it is supported by
browsers. From what I have read on the web, Firefox, Chrome, Opera and
Safari seem to have been working on it.

<URL: http://www.w3.org/TR/FileAPI/>
<URL: https://developer.mozilla.org/en/DOM/FileReader>

I will let you read the specification, investigate for yourself, and
build your own set of test cases. Note that your script, if you write it
using this API, is unlikely to end up being cross-browsers. As a result,
fallback constraints may imply some upload/download to a web server (be
it using XmlHttpRequest or using a simple "preview" submit button).

Regards,
Elegie.
 
M

Michael Haufe (TNO)

HI All,

I have a requirement here wherein I have to upload a image preferably JPEG and Preview it to the users.I know there are some ways of doing it like uploading the image and storing it in the server via ajax or server side programs and then bringing it back to the user for preview. But I do not want to go that way,

I was thinking it is possible that user upload the image, JS somehow stores the image data in the variable  in the runtime and then displays it inthe predefined area to the user and once he is satisfed with image, then maybe he can save it to the server.
Click to expand...

See this:

<https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-
uploader/>

Note that for older browsers this will not work. For example, in
Internet explorer you cannot get the path to the file but instead a
fakepath. For non-compliant browsers you'll have to use the server or
fallback to Java/Flash/HTA to do the file browsing portion to get the
appropriate path.
 
K

kiran

Thanks Micheal and Elegie for replying.I have been spending quite sometime now on this.My head is starts paining when i think about this for lack of options for further thoughts.Anyways,here is code, I wrote,

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

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<html>

<head>

<title>file upload trial</title>

<style type="text/css">

div.clmaincontainer{

width:30%;

height:600px;

border-style:solid;

}

div.climg{

width:30%;

height:auto;

border-style:inset;



}

</style>

</head>

<body>

<div id="idmaincontainer" class="clmaincontainer">

<input type="file" name="img" id="idimgupload" class="climgupload"/><br></br>

<img src="" type="image/JPEG" id="my_img" class="climg">your uploaded image</img>

<div id="idimgdisplay" class="climgdisplay">

</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script>

$(document).ready(function(){

$('input.climgupload').change(function(){

var path = $('#idimgupload').attr("value");

alert(path);

$('#my_img').attr('src',path );

alert("test for bind");

});



});



</script>

</body>

</html>

This works perfectly fine in IE7,8,9 and FF 7.01 version.All I need to do it add my site to trusted sites and enable IE show the directory path while uploading files.
Now strange thing here is that it works in my office FF7.01 version and does not work on my local laptop version.So I believe there is something whichneeds to tweaked to make it works and definitey now a code issue.All I am doing in this is picking the path of the file and then adding it to src imgtag and displaying the image.Of course its all happy path and this is crude code and needs some cleanup.
Now why I am doing this rather than other ways,basically in India , we havebandwidth issue, so if I am making 2 calls to upload and display images, its a kind of slowness to my site.I am exploring other ways as well.

I am using jquery here, but I am definitely open to plain JS or any other libaries which help me here.I would be gratefull to you all for your thoughts and suggestions.
 
K

kiran

Yes Micheal I did check that links,but I am not sure if older browser will support HTML5 and thats the reason I did not explore File APIs.
 
T

Thomas 'PointedEars' Lahn

kiran said:
Thanks Micheal and Elegie for replying.I have been spending quite sometime
now on this.My head is starts paining when i think about this for lack of
options for further thoughts.
Click to expand...

So does mine when I try to make sense of your postings. You could at least
*try* to post something easily readable. Or is that already too much to ask
for from a Google Groups user?

<http://www.catb.org/~esr/faqs/smart-questions.html>
<http://www.netmeister.org/news/learn2quote.html>
Anyways,here is code, I wrote,

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

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
Click to expand...

1. Don't declare and use XHTML unless you really understand and need it.
Declare and use HTML.

2. If you declare XHTML, make it *Valid* at least.

<html>

<head>

<title>file upload trial</title>

<style type="text/css">

div.clmaincontainer{

width:30%;

height:600px;
Click to expand...

3. Don't use pixel-sized widths or heights unless necessary.
border-style:solid;
Click to expand...

Since the initial border width is 0, this is pointless.
}

div.climg{

width:30%;

height:auto;
Click to expand...

`auto' is the initial value.
border-style:inset;
Click to expand...

Again, pointless. There is no border.
}

</style>

</head>
Click to expand...

Not Valid.
<body>

<div id="idmaincontainer" class="clmaincontainer">

<input type="file" name="img" id="idimgupload"
class="climgupload"/><br></br>

<img src="" type="image/JPEG" id="my_img" class="climg">your uploaded
Click to expand...

MIME types are registered lowercase.
image</img>
Click to expand...

Not Valid (X)HTML. The `img' element has the content model EMPTY.
<div id="idimgdisplay" class="climgdisplay">

</div>

</div>

<script
Click to expand...
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

1. Do not use jQuery 1.5. The current version is 1.7.
2. Do not use jQuery from somewhere; download it to your webspace instead.
3. Do not use jQuery at all. Pretty junk is still junk.
<script>
Click to expand...

Not Valid XHTML 1.0.
[…]

</html>

This works perfectly fine in IE7,8,9 and FF 7.01 version.
Click to expand...

Doubtful. If so, then by sheer coincidence.
All I need to do it add my site to trusted sites and enable IE show the
directory path while uploading files.
Click to expand...

If you expect your users to do the same, you are most certainly mistaken.
Now strange thing here is that it works in my
office FF7.01 version and does not work on my local laptop version.
Click to expand...

"Does not work" is not an error description.

So I believe there is something which needs to tweaked to make it works
and definitey now a code issue.
Click to expand...

The problem is primarily due to the fact that you have not the slightest
idea what you are doing but you are not aware of it.
I am using jquery here, but I am definitely open to plain JS or any other
libaries which help me here.I would be gratefull to you all for your
thoughts and suggestions.
Click to expand...

You cannot work around security restrictions. You can only lower security
settings, or you can use the proper API. The File API has nothing to do
with HTML5 to begin with.

<http://www.w3.org/TR/FileAPI/>


PointedEars
 
K

kiran

kiran wrote:
Thanks Micheal and Elegie for replying.I have been spending quite sometime
now on this.My head is starts paining when i think about this for lack of
options for further thoughts.
Click to expand...


So does mine when I try to make sense of your postings. You could at least
*try* to post something easily readable. Or is that already too much to ask
for from a Google Groups user?

<http://www.catb.org/~esr/faqs/smart-questions.html>
<http://www.netmeister.org/news/learn2quote.html>
<http://jibbering.com/faq/notes/posting>

Kiran: Fair enough reply Thomas.I should have posted just a couple of linesrather than copy pasting the code.My bad.
Anyways,here is code, I wrote,

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

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
Click to expand...


1. Don't declare and use XHTML unless you really understand and need it.
Declare and use HTML.

2. If you declare XHTML, make it *Valid* at least.

<http://validator.w3.org/>

Kiran: I was aware of this,but somehow missed it to correct it.But i admit,i have lot to understand.

<html>

<head>

<title>file upload trial</title>

<style type="text/css">

div.clmaincontainer{

width:30%;

height:600px;
Click to expand...


3. Don't use pixel-sized widths or heights unless necessary.
border-style:solid;
Click to expand...

Since the initial border width is 0, this is pointless.

Kiran: This advice is very much appreciated.I assume that different screen size impacts pixels dimensions more and cannot dynamically adjusted.So its bad idea to have pixel size dimensions.

}

div.climg{

width:30%;

height:auto;
Click to expand...


`auto' is the initial value.
border-style:inset;
Click to expand...

Again, pointless. There is no border.

}

</style>

</head>
Click to expand...

Not Valid.

<body>

<div id="idmaincontainer" class="clmaincontainer">

<input type="file" name="img" id="idimgupload"
class="climgupload"/><br></br>

<img src="" type="image/JPEG" id="my_img" class="climg">your uploaded
Click to expand...


MIME types are registered lowercase.

Kiran: Its typo error.However thanks for pointing it.
image</img>
Click to expand...

Not Valid (X)HTML. The `img' element has the content model EMPTY.

<div id="idimgdisplay" class="climgdisplay">

</div>

</div>

<script
Click to expand...
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>


1. Do not use jQuery 1.5. The current version is 1.7.
2. Do not use jQuery from somewhere; download it to your webspace instead.
3. Do not use jQuery at all. Pretty junk is still junk.
<script>
Click to expand...

Kiran: This code was written in notepad and its more of rough cut.Also definitely using google/MS cdn helps when you are away from IDE.I am not a web designer by profession.So cannot really commment on Jquery.But i have same logic written in javascript with same results.


Not Valid XHTML 1.0.
[…]
Click to expand...
</html>

This works perfectly fine in IE7,8,9 and FF 7.01 version.
Click to expand...


Doubtful. If so, then by sheer coincidence.

Kiran: Can you try this in your machine and let me know if works.I did search google and there were cases where it has worked for folks.I can see it working in my machine for IE 9.

All I need to do it add my site to trusted sites and enable IE show the
directory path while uploading files.
Click to expand...


If you expect your users to do the same, you are most certainly mistaken.

Kiran: I own the site and I am going to sell it.I have sold stuffs for goodpart of my career before coming to IT.If it bombs, then maybe I will againcome back to you :)
Now strange thing here is that it works in my
office FF7.01 version and does not work on my local laptop version.
Click to expand...


"Does not work" is not an error description.

Kiran: It does not show up image.IMG SRC is replaced correctly for but for some reasons, I get 404 error,this means that the FF which I have in officereplaces path correctly and displays
image correctly and the same thing does not happen in my laptop firefox.So I am trying to understand the reasons for this.

So I believe there is something which needs to tweaked to make it works
and definitey now a code issue.
Click to expand...


The problem is primarily due to the fact that you have not the slightest
idea what you are doing but you are not aware of it.



I am using jquery here, but I am definitely open to plain JS or any other
libaries which help me here.I would be gratefull to you all for your
thoughts and suggestions.
Click to expand...


You cannot work around security restrictions. You can only lower security
settings, or you can use the proper API. The File API has nothing to do
with HTML5 to begin with.

<http://www.w3.org/TR/FileAPI/>

Kiran: yes I can see that almost all google search says that input=file has some security restrictions,I really dont understand if this is such a huge hole to security, then why was input=file tag was not removed from HTML Specs.

Kiran: Thanks I will check file API and see if this fits my requirement.Does this support older browsers ?

Many thanks Thomas , all your suggestions makes sense.




PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image upload not working in browser 4
Php/mySQL upload form generator 2
How do I upload image to firebase and retrieve it using picasso 14
Stuck with html and css 25
How to compress image for website? 3
How Do I Set text on an Image and use the image as a border? 7
Pyautogui, cv2 and cannot find image 0
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0

Members online

Total: 77 (members: 1, guests: 76)
Robots: 430

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,815
Latest member
treekmostly22

Latest Threads

Top