How do I Integrate "Packing A Picnik " using File upload

Hi

The sample given in this site "Packing A Picnik" is given for a link href. (ie) when we click any link u can get picnik site to be loaded in a lightbox iframe and pass the image name in the import parameter.

But I want the same functionality by using the form file element.

My code for file upload is :
For ex:

<form name="frmAction" id="frmAction" action="http://www.picnik.com/service/" method="post" enctype="multipart/form-data" >
   <input type="hidden" name="_apikey" value="73f32fe27cc90015b0bd8083e30bcab7"/>
   <input type="hidden" name="_import" value="imagedata"/>
   <input type="hidden" name="_close_target" value="http://sitename.com/"/>
   <input type="hidden" name="_replace" value="yes" />
   <input type="file" name="imagedata" />
   <input type="button" value="Import!" class="pbox"  />
   </form>

When i upload any image in the file filed(imagedata) i should get a iframe lightbox similar to the above example (which works with a link href)mentioned in the picnik site . My uploaded image should appear in the picnick site for editing as it does when using a href link.

I found this code in the js file

$('pbox_picnik').innerHTML="<iframe id='pbox_iframe' frameborder='0' scrolling='no' src='"+this._elLink.href+"'></iframe>";

which means in this iframe it takes the src only when there is href link.... But i want to post a form along with the datas(image upload) and send to picnik site within the iframe..

I tried this out and i could not import the image through the file field and load it in iframe....

Does anyone have this code....If you can help me plzzzzz...Its really urgent.... Kindly do the needfull

Hi there,

What you're describing is certainly possible, although we don't have any sample code for it.  What you'll need to do is something like:

- change the form's action to be a javascript function you create
- build up a URL as a string and then insert an hidden link into the document
- in that function, create a new pblink object attached to the hidden link and call its activate() function

That *should* work, although this is all off the top of my head. 

hi steve,

u look me the expert guy on picnik api as i have seen ur posts and learned quiet a lot. but i got stuck at same point as my this friend so wud u take some step and help us guys. i m new to web developement and offcourse picnik as well.

with regards.
ishtiaq khan

hi
is ther any body who cud help me how to integrate Picnik Box using file upload option.

i have added of code which i m using. i want to have the solution for this scenario, there is a solution for hyper link option on Picnik but not one i m looking for. Help me please i m stuck here.

<form action="http://www.picnik.com/service/" method="POST" enctype="multipart/form-data">

   <input type="hidden" name="_apikey" value="95124c1ed786f362dcbded384df8332d"/>
   
   <input type="hidden" name=_export value="http://localhost:1672/MyPicnikSite/DownloadPicture.aspx" />
   
   <input type="hidden" name=_export_agent value ="browser" />
   
   <input type ="hidden" name=class value="pbox" />
   
   <input type ="hidden" name="_thumbs" value="yes" />
   
   <input type ="hidden" name="_original_thumb"  />
   
   <input type ="hidden" name="_title"  />
   
   <input type =hidden name ="_export_title" value ="Export To MyPicnik" />
   
   <input type =hidden name ="_host_name" value ="MyPicnikSite" />
   
   <input type =hidden name ="_exclude" value ="in,out" />
   
   <input type =hidden name ="_close_target" value="http://localhost:1672/MyPicnikSite/UploadPicture.aspx" />
         
   <input type ="hidden" name ="_imageid"  />
   

   <input type ="hidden" name ="_replace" value ="ask" />
   

   <input type="hidden" name="_import" value="imagedata"/>
      
   

   <input type="file" name="imagedata"  />
   
   

   <input type="submit" value="Import!" id="Submit1" language="javascript" onclick="return Submit1_onclick()"   />

</form>