Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #8082 > unrolled thread

Upload and Preview Image with Javascript with making any server calls

Back to article view | Back to comp.lang.javascript

Contents

  Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-06 07:51 -0800
    Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-07 16:27 -0800
    Re: Upload and Preview Image with Javascript with making any server calls Elegie <elegie@anonymous.invalid> - 2011-11-08 10:06 +0100
    Re: Upload and Preview Image with Javascript with making any server calls "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2011-11-08 04:51 -0800
      Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 17:21 -0800
        Re: Upload and Preview Image with Javascript with making any server calls Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-09 02:51 +0100
      Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 17:22 -0800
        Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 19:20 -0800

#8082 — Upload and Preview Image with Javascript with making any server calls

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 in the predefined area to the user and once he is satisfed with image, then maybe he 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 ?

[toc] | [next] | [standalone]

#8118

Is there anyone out here who can help me please.

[toc] | [prev] | [next] | [standalone]

#8122

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,

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.

[toc] | [prev] | [next] | [standalone]

#8129

On Nov 6, 9:51 am, kiran <kiranmb...@gmail.com> wrote:
> 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 in the predefined area to the user and once he is satisfed with image, then maybe he can save it to the server.

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.

[toc] | [prev] | [next] | [standalone]

#8150

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 which needs 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 img tag 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 have bandwidth 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.

[toc] | [prev] | [next] | [standalone]

#8153

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.

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>

> 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">

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/>

> <html>
> 
> <head>
> 
> <title>file upload trial</title>
> 
> <style type="text/css">
> 
> div.clmaincontainer{
> 
>   width:30%;
> 
>   height:600px;

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

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

>   }
> 
> div.climg{
> 
> width:30%;
> 
> height:auto;

`auto' is the initial value.
 
> border-style:inset;

Again, pointless.  There is no border.
 
>  
> 
> }
> 
> </style>
> 
> </head>

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

MIME types are registered lowercase.

> image</img>

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

> <div id="idimgdisplay" class="climgdisplay">
> 
> </div>
> 
> </div>
> 
> <script
> 
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>

Not Valid XHTML 1.0.

> […]
> 
> </html>
> 
> This works perfectly fine in IE7,8,9 and FF 7.01 version.

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.

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.

"Does not work" is not an error description.

<http://jibbering.com/faq/>

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

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.

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
-- 
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

[toc] | [prev] | [next] | [standalone]

#8152

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.

[toc] | [prev] | [next] | [standalone]

#8154

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. 


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 lines rather 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"> 


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; 


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

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; 


`auto' is the initial value. 
  
> border-style:inset; 

Again, pointless.  There is no border.
 

>   
> 
> } 
> 
> </style> 
> 
> </head> 

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 


MIME types are registered lowercase. 

Kiran: Its typo error.However thanks for pointing it.

> image</img> 

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


> <div id="idimgdisplay" class="climgdisplay"> 
> 
> </div> 
> 
> </div> 
> 
> <script 
> 
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> 

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. 

> […] 

> 
> </html> 
> 
> This works perfectly fine in IE7,8,9 and FF 7.01 version. 


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. 


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 good part of my career before coming to IT.If it bombs, then maybe I will again come 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. 


"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 office replaces 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.

<http://jibbering.com/faq/> 


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


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. 


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 
-- 
    realism:    HTML 4.01 Strict 
    evangelism: XHTML 1.0 Strict 
    madness:    XHTML 1.1 as application/xhtml+xml 
                                                    -- Bjoern Hoehrmann 

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web