image preview from temprorary folder

11 posts, 1 answers
  1. shaik Mohammed
    shaik Mohammed avatar
    12 posts
    Member since:
    Apr 2014

    Posted 27 Apr 2014 Link to this post

    Hi,

    i want to save image in temporary folder and get preview on upload file

    Regards
    Yasin
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Apr 2014 in reply to shaik Mohammed Link to this post

    Hi,

    It is not a good idea to display images from the Temporary folder, because it is cleared periodically. Better display it from the Target folder as follows.

    ASPX:
    <telerik:RadAsyncUpload ID="radasyncuploadPreviewImage" runat="server" TargetFolder="Uploads"
        OnFileUploaded="radasyncuploadPreviewImage_FileUploaded">
    </telerik:RadAsyncUpload>
    <telerik:RadButton ID="radbtnPreviewImage" runat="server" Text="Preview">
    </telerik:RadButton>
    <telerik:RadBinaryImage ID="radbinimgPreviwImage" runat="server" />

    C#:
    protected void radasyncuploadPreviewImage_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
    {
        radbinimgPreviwImage.ImageUrl = radasyncuploadPreviewImage.TargetFolder+"/" + e.File.FileName;
    }

    Let me know if you have any concern.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. shaik Mohammed
    shaik Mohammed avatar
    12 posts
    Member since:
    Apr 2014

    Posted 28 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thank for your quick response,

    i have a scenario for new user profile, user has to select image from the computer,and automatically image preview will appear with crop option. once crop is done then user can submit his image and other data on server with the submit button.
    i don't want to save big/original image on server with out cropping, because server space will be shortage. i hope with temporary folder will delete images automatically after 4 hours.
    Please i need any scrip for logic to achieve my scenario
    Regards,
    Yasin
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2014 in reply to shaik Mohammed Link to this post

    Hi shaik Mohammed,

    Please try the approach mentioned in this online demo to achieve your scenario.

    Thanks,
    Shinu.
  6. shaik Mohammed
    shaik Mohammed avatar
    12 posts
    Member since:
    Apr 2014

    Posted 29 Apr 2014 in reply to Shinu Link to this post

    But the example is saving data in database.
    private byte[] GetImage(int id)
       {
           string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["TelerikConnectionString35"].ConnectionString;
     
           using (SqlConnection conn = new SqlConnection(connectionString))
           {
               string cmdText = "SELECT ImageData FROM AsyncUploadImages WHERE ImageID = @ImageID;";
                 
               SqlCommand cmd = new SqlCommand(cmdText, conn);
               SqlParameter idParam = new SqlParameter("@ImageID", SqlDbType.Int);
               idParam.Value = id;
                 
               cmd.Parameters.Add(idParam);
               conn.Open();
                 
               using (SqlDataReader reader = cmd.ExecuteReader())
               {
                   if (reader.Read())
                   {
                       byte[] imageData = (byte[])reader["ImageData"];
                       return imageData;
                   }
                   else
                   {
                       throw new ArgumentException("Invalid ID");
                   }              
               }
           }
       }

     what if some one uploaded image and suddenly closed browse? it will always in database.
    custom handler is nice option, but could you please post script that can be use temporary folder?

    Regards,
    Yasin
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Apr 2014 in reply to shaik Mohammed Link to this post

    Hi shaik Mohammed,

    Basically Temporary file directory is used only internally in RadAsyncUpload and the files in it should not be modified and that is why they can not be used from the server. In order to achieve your scenario one suggestion is that you can use the Custom Http Handler.

    Thanks,
    Shinu.
  8. Answer
    Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 30 Apr 2014 Link to this post

    Hello Yasin,

    You could use custom handler and upload the file in a particular folder and then return the ID of the image and show it like in the demo. I am sending you a sample project for a reference.

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. shaik Mohammed
    shaik Mohammed avatar
    12 posts
    Member since:
    Apr 2014

    Posted 04 May 2014 in reply to Peter Filipov Link to this post

    Peter Filipov said:Hello Yasin,

    You could use custom handler and upload the file in a particular folder and then return the ID of the image and show it like in the demo. I am sending you a sample project for a reference.

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     


    Dear Peter Filipov ,
    I'm very thank full to you. you gave me the demo exactly what i required. and i got little issue on remove image function, after i change temporary folder from "~" to "~/ImageTemp"
    TemporaryFolder="~/ImageTemp"

    Then i have added "handlerwithpath " to get URL from "ImageTemp"
    function getImageUrl(id) {
                   var url = window.location.href;
                   var handler = id;
                   //createrd by yasin
                   var handlerwithpath = "ImageTemp/" + handler;
                   var index = url.lastIndexOf("/");
                   var completeUrl = url.substring(0, index + 1) + handlerwithpath;
                   return completeUrl
               }
    Everything is working perfectly but, i cannot able to remove file with remove function

    function fileUploadRemoving(sender, args) {
                   var index = args.get_rowIndex();
                   $(".imageContainer img:eq(" + index + ")").remove();
               }

    Please help

    Regards,
    Yasin
  10. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 07 May 2014 Link to this post

    Hi Yasin,

    Are you getting a javascript error? Do you have java jQuery reference?
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>


    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. shaik Mohammed
    shaik Mohammed avatar
    12 posts
    Member since:
    Apr 2014

    Posted 08 May 2014 in reply to Hristo Valyavicharski Link to this post

    Hristo Valyavicharski said:Hi Yasin,

    Are you getting a javascript error? Do you have java jQuery reference?
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>


    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     


    Hi Hristo,

    I'm not getting any errors, i want to remove image from temporary image folder on asp.net button click event .and how can i set time for automatically delete image after 5 minutes from tempfolder?

    Thank you
  12. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 13 May 2014 Link to this post

    Yasin,

    There is no need to clear the Temporary Folder. Submitted files will should be moved to the Target folder. Others will be removed automatically depending on the TemporaryFileExpiration property.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017