[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1328
  • Last Modified:

FCKEditor : Image upload and view problem

In my ASP.NET programme I am using FCKEditor. Everything is working fine except image upload or uploaded image display. whenever I am clicking on 'Inser Image" then it is giving me the following error
"The server didn't reply with a proper XML data. Please check your configuration."
After receiving this error, if I am trying to upload the image the image is uploaded in the server, but it not showing in th fckeditor ... so that user can choose what image he or she wants to select

Its urgent !!!
0
akulavi
Asked:
akulavi
  • 9
  • 6
  • 2
1 Solution
 
MinoDCCommented:
Are you using a CMS? If not, you could try to use this:
http://cksource.com/
0
 
akulaviAuthor Commented:
Hi MinoDC,

At this moment I am not able to change the software .... Pls specify if any solution u have ...
0
 
maheshsnkrCommented:
hi MinoDC,

Are u getting the error while clicking the button 'Insert/Edit Image' within the fckeditor or 'Browse Server' button iside the popup ?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
MinoDCCommented:
have version 5 of PHP?
0
 
akulaviAuthor Commented:
hi maheshsnkr,

I am getting the error while clicking on "Browse Server" Button..... In case of clicking "Insert/Edit Image no error is showing
0
 
akulaviAuthor Commented:
Hai MinoDC,

Pls go through my question ..... I am using ASP.Net .... not PHP
0
 
maheshsnkrCommented:
hi akulavi,

I have attached 2 images that will helpyou to solve the issue.

1. The first image (fckconfig.js (Changes)), is the place where its is coded, which page is to be shown while clicking the Browse server button.
I have changed that default link to a newly added one.

2. We need to add a server page in the exact location (which is mentioned in Image 2 (FCK-2.JPG)
Add the new page.

3. Inside the new page, i have a fileuploader control (which will broese the image), an upload button (to save the image path in a hidden field), A hidden field control (to store the uploaded file path) and on OK button ( to bring the image back to the parent page)

4. After uploading, ckick OK button to send the image back to parent. You can use the following code for that.

protected void btnOk_Click(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(GetType(), "FileUpload", "javascript:window.top.opener.SetUrl('" + hdnFilePath.Value + "');window.close();", true);
    }
FCK-1.bmp
FCK-2.JPG
0
 
akulaviAuthor Commented:
Hi maheshsnkr,

Thanks a lot for your solution ............. I am using vb.net. Will u pls attach the BrowseImage.aspx file so that it will be easier for me to understand ...... Otherwise kindly clarify me the following points :

1. In design time I have included a FileUpload control.
2. Then ...... "an upload button (to save the image path in a hidden field)" - What does that mean and what will be the name and the id of the control ?
3.  "A hidden field control (to store the uploaded file path) " - What will be the name of the control ?
4. "and on OK button ( to bring the image back to the parent page)" - What does that mean and what will be the name and / or the id of the control ?
0
 
maheshsnkrCommented:
hi akulavi,

I have included the full page code along this , also the page .design(Image FCK_4.jpg).
Also you need to set a path for saving the image in the server, (from there that image will get downloaded).

We need to set that path in a js file (See the image FCK_3.JPG)
(The js file path is there in the Image)
You can save the file anywhere in the application, but one thing is that, you need to make necessary changes in the js file also.
Imports System.IO
 
Partial Class _Default
    Inherits System.Web.UI.Page
 
    'CODE IN PAGE BEHIND
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
        hdnFilePath.Value = StoreImageInServer(fupUpload.FileName, fupUpload.PostedFile.FileName)
    End Sub
 
    Protected Sub btnok_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnok.Click
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "FileTransfer", "javascript:window.top.opener.SetUrl('" + hdnFilePath.Value + "');window.close();", True)
        Response.Write("javascript:window.top.opener.SetUrl('" + hdnFilePath.Value + "');window.close();")
    End Sub
 
    Private Function StoreImageInServer(ByVal FileName As String, ByVal FullPath As String) As String
        Dim DirInfo As DirectoryInfo
        Dim FileNameToReturn As String = Path.GetFileNameWithoutExtension(FileName) & "_" & DateTime.Now.ToFileTime() & Path.GetExtension(FileName).ToString()
 
        Try
            DirInfo = New DirectoryInfo(Server.MapPath("~") & "/FileUploads/UserFiles/Images/")
            If DirInfo.Exists = False Then
                Directory.CreateDirectory(DirInfo.FullName)
            End If
 
            Dim DestPath As String = (Server.MapPath("~") & "\FileUploads\UserFiles\Images\") + FileNameToReturn
            fupUpload.SaveAs(DestPath)
 
        Catch generatedExceptionName As Exception
 
        End Try
        Return FileNameToReturn
    End Function
 
End Class

Open in new window

FCK-3.JPG
0
 
akulaviAuthor Commented:
Hai maheshsnkr,

I think you forgot to attach Image 4.....
0
 
maheshsnkrCommented:
hi akulavi,

Please find the attached Image.
FCK-4.JPG
0
 
akulaviAuthor Commented:
Hai maheshsnkr,

Thank you very much for your sol. Certain changes I had done in case of image saving URL. The code works perfect. Only one problem lying with this solution. Once the image had been uploaded there is no such interfaces from where we can see what are images resided in the Server so that before uploading we can take a quickview of the existing images.......... Whatever for now your solution had worked perfectly ..... But can we give some kind of scenario so that user can have a preview of all the images before uploading .....
0
 
maheshsnkrCommented:
Hi akulavi
Happy to hear that you have got the solution.

Now am giving the solution for viewing the uploaded files and selecting one of those in fck editor.
I have uploaded the page design (Full page design) and the code for selecting the file (Full Source Code)
Imports System.IO
Imports System.Data

Partial Class _Default
    Inherits System.Web.UI.Page

    'CODE IN PAGE BEHIND
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If (IsPostBack = False) Then
            CreateFilesView()
        End If
    End Sub

    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
        hdnFilePath.Value = StoreImageInServer(fupUpload.FileName, fupUpload.PostedFile.FileName)
    End Sub

    Protected Sub btnok_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnok.Click
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "FileTransfer", "javascript:window.top.opener.SetUrl('" + hdnFilePath.Value + "');window.close();", True)
    End Sub

    Private Function StoreImageInServer(ByVal FileName As String, ByVal FullPath As String) As String
        Dim DirInfo As DirectoryInfo
        Dim FileNameToReturn As String = Path.GetFileNameWithoutExtension(FileName) & "_" & DateTime.Now.ToFileTime() & Path.GetExtension(FileName).ToString()

        Try
            DirInfo = New DirectoryInfo(Server.MapPath("~") & "/FileUploads/UserFiles/Images/")
            If DirInfo.Exists = False Then
                Directory.CreateDirectory(DirInfo.FullName)
            End If

            Dim DestPath As String = (Server.MapPath("~") & "\FileUploads\UserFiles\Images\") + FileNameToReturn
            fupUpload.SaveAs(DestPath)

        Catch generatedExceptionName As Exception

        End Try
        Return FileNameToReturn
    End Function

    Private Sub CreateFilesView()
        Dim dtFiles = New DataTable()
        Dim dtrow As DataRow

        dtFiles.Columns.Add("SerialNumber")
        dtFiles.Columns.Add("FileName")
        dtFiles.Columns.Add("FullPath")

        Dim ImageFolder As String = Server.MapPath("~") & "/FileUploads/UserFiles/Images/"
        Dim DirInfo As New DirectoryInfo(ImageFolder)
        If Not DirInfo.Exists Then
            Directory.CreateDirectory(ImageFolder)
        Else
            Dim Files As FileInfo() = DirInfo.GetFiles()
            If Files IsNot Nothing AndAlso Files.Length > 0 Then
                For Count As Integer = 0 To Files.Length - 1
                    dtrow = dtFiles.NewRow()

                    Dim FileName As String() = Files(Count).Name.Split("_"c)
                    If FileName.Length > 0 Then
                        Dim Extension As String = Files(Count).Extension.ToUpper()
                        If Extension = ".JPG" OrElse Extension = ".JPEG" OrElse Extension = ".PNG" OrElse Extension = ".GIF" OrElse Extension = ".BMP" Then
                            dtrow("SerialNumber") = Count.ToString()
                            'dtrow["FileName"] = Files[Count].Name; 

                            dtrow("FileName") = FileName(0) + Path.GetExtension("~/FileUploads/UserFiles/Images/" & Files(Count).Name)

                            'dtrow["FullPath"] = "~/FileUploads/UserFiles/Images/" + Files[Count].Name; 

                            dtrow("FullPath") = Files(Count).Name
                            dtFiles.Rows.Add(dtrow)
                        End If
                    End If
                Next
            End If
        End If
        BindFileGrid(dtFiles)
    End Sub

    Private Sub BindFileGrid(ByVal dtFilesView As DataTable)
        If dtFilesView IsNot Nothing AndAlso dtFilesView.Rows.Count > 0 Then
            lstFileName.DataSource = dtFilesView
            lstFileName.DataTextField = "FileName"
            lstFileName.DataValueField = "FullPath"
            lstFileName.DataBind()
            lstFileName.Items(0).Selected = True
            imgPreview.Visible = True
            imgPreview.ImageUrl = "~/FileUploads/UserFiles/Images/" & lstFileName.Items(0).Value
            btnOk.Visible = True
        Else
            imgPreview.Visible = False
            btnOk.Visible = False
        End If
    End Sub

    Protected Sub lstFileName_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles lstFileName.SelectedIndexChanged
        imgPreview.ImageUrl = "~/FileUploads/UserFiles/Images/" + lstFileName.SelectedValue
    End Sub

    Protected Sub btnSelectUploadedFile_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSelectUploadedFile.Click
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "FileTransfer", "javascript:window.top.opener.SetUrl('" + lstFileName.SelectedItem.Value + "');window.close();", True)
    End Sub
End Class

Open in new window

FCK-2.JPG
0
 
akulaviAuthor Commented:
Hai maheshsnkr,

Thanks a ton for your solution. Your solution works perfect for me. Can it be possible if user wants to select any image from the list, that image will be selected for use....
0
 
akulaviAuthor Commented:
Hai maheshsnkr,

Sorry for disturbing you for asking the above question ..... Whatever functionality I wanted its already given by you ......... Thanks a ton ...... By the way one more thing I am going to submit another question in Expert-Exchange regarding FCKEditor in few minutes .... Pls. look into that question also...... because I think your understanding of the user's problem is much more better than others......

anyway again Thanks for all your help !!!!!!
0
 
akulaviAuthor Commented:
I like maheshsnkr's understandability . He/she is very good at the point of understanding the problem of the User... Anyways Thanks A Ton !!!!
0
 
maheshsnkrCommented:
hi akulavi,

If u find the solution as helpfull, dont forget to mark the solution as accepted, coz others will also get benifit from this :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now