Databases
StackOverflow2013
Postsdbo
POImage extension is lost when using fileupload in fancybox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImage extension is lost when using fileupload in fancybox
    primarykey
    data
    text
    <p>Hi I am trying to implement fileupload inside fancybox. To be more specific i want the users to upload their image just as on stackoverflow.</p> <p><strong>Problem :</strong> When i am uploading the pic inside the fancybox, the extension of the image is lost. However on doing the same without the fancybox effect results in a successful submission and retrieval.</p> <p><strong>aspx code :</strong></p> <pre><code>&lt;div class="poc1"&gt; &lt;asp:Image ID="Image1" runat="server" /&gt; &lt;div class="changePic"&gt; &lt;a class="fancybox" href="#shadow"&gt; Change Pic &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt; &lt;br /&gt;&lt;br /&gt; &lt;asp:Label ID="Label2" runat="server" Text="Label"&gt;&lt;/asp:Label&gt; &lt;br /&gt; &lt;div id="shadow" style="display:none;width:300px;"&gt; &lt;asp:FileUpload ID="FileUpload1" runat="server" /&gt; &lt;br /&gt;&lt;br /&gt; &lt;asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" /&gt; &lt;br /&gt;&lt;br /&gt; &lt;/div&gt; </code></pre> <p><strong>jquery :</strong></p> <pre><code>&lt;script type="text/javascript"&gt; $(".fancybox").fancybox({ parent: "form:first", openEffect : 'none', closeEffect : 'none', afterLoad : function() { this.content = this.content.html(); } }); &lt;/script&gt; </code></pre> <p><strong>aspx.cs cdode :</strong></p> <pre><code>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; using System.Web.Security; using System.IO; public partial class Default3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { string virtualFolder = "~/UserPics/"; string physicalFolder = Server.MapPath(virtualFolder); string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; SqlConnection myConnection = new SqlConnection(connectionString); MembershipUser currentUser = Membership.GetUser(); Guid currentUserId = (Guid)currentUser.ProviderUserKey; //save old pic vlaue in string SqlCommand cmdSelect = new SqlCommand("SELECT [UserPicUrl] FROM [UserDetails] WHERE ([UserId] = @UserId)", myConnection); cmdSelect.Parameters.AddWithValue("@UserId", currentUserId); myConnection.Open(); string oldPicUrl = (string)(cmdSelect.ExecuteScalar()); string oldPic = Server.MapPath(oldPicUrl); Label1.Text = "old Pic :- " + oldPic; //save new pic string fileName = Guid.NewGuid().ToString(); string extension = System.IO.Path.GetExtension(FileUpload1.FileName); FileUpload1.SaveAs(System.IO.Path.Combine(physicalFolder, fileName + extension)); String ImageUrl = virtualFolder + fileName + extension; Label2.Text = "New Pic :- " + ImageUrl; Image1.ImageUrl = ImageUrl; //update new pic in db SqlCommand cmdUpdate = new SqlCommand("UPDATE [UserDetails] SET [UserPicUrl] = @UserPicUrl WHERE [UserId] = @UserId", myConnection); cmdUpdate.Parameters.AddWithValue("@UserId", currentUserId); cmdUpdate.Parameters.AddWithValue("@UserPicUrl", ImageUrl); //delete old pic cmdUpdate.ExecuteNonQuery(); myConnection.Close(); myConnection.Dispose(); File.Delete(oldPic); } } </code></pre> <p>Please shed a light where i am wrong, have worked on it too much but cant find a solution. Or is there any other <strong>simple</strong> way to have the lightbox effect around the fileupload condition.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRaghav
    1. USRaghav
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COTheoretically, the Fancy box should just be "wrapping" around existing dom elements, and the FileUpload control from ASP should be handling the file extension. Seems like we are missing something here. After the Lightbox loads, does the HTML inside the lightbox look correct (FileUpload and such?).
      singulars
      1. POImage extension is lost when using fileupload in fancybox
      1. USDavid C
    2. COYes sir everything looks fine, just the image name which gets inserted in the file system looses its extension. For example abc.png gets converted into ~/UserPics/2f897154-f417-4d87-a6de-df6afe592e8f which without the fancybox effect results with an .png extension.
      singulars
      1. POImage extension is lost when using fileupload in fancybox
      1. USRaghav
    3. COIf you set a breakpoint on postback, what is the value of : FileUpload1.FileName?
      singulars
      1. POImage extension is lost when using fileupload in fancybox
      1. USDavid C
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload