Example/Tutorial on img upload and associating img with Image-pro

Example/Tutorial on img upload and associating img with Image-prop?

Marcus Andersson

Vote:

Hi!

Does anyone have a straightforward exampel or knowledge of a tutorial on image upload and associating the uploaded image with an Image-property?

I've browsed several examples on how to use virtual directories in EPiServer but I can't seem to get it to work.

Basically, this is what I want to do:

From a web page, upload an image to the virtual file system. The file should be visible in the file manager.
Associate the uploaded file with an Image-property on a dynamically created page.

//Marcus

#43763

Sep 23, 2010 8:31

David Knipe

Vote:

Hello Marcus

This code is used as part of the iPhone image upload but it shows how to upload an image to a VPP folder:

 if (this.fu.HasFile)
        {
            UnifiedFile file;
            string virtualDir = "/Global/iPhoneUploadedImages/";
            if (!HostingEnvironment.VirtualPathProvider.DirectoryExists(virtualDir))
            {
                UnifiedDirectory.CreateDirectory(virtualDir);
            }
            UnifiedDirectory directory = HostingEnvironment.VirtualPathProvider.GetDirectory(virtualDir) as UnifiedDirectory;
            directory.BypassAccessCheck = true;
            byte[] fileBytes = this.fu.FileBytes;
            if (directory.GetFiles().Length > 0)
            {
                file = directory.GetFiles()[0];
            }
            else
            {
                file = directory.CreateFile("tmpiPhoneImage.png");
            }
            Stream stream = file.Open(FileMode.Create);
            int length = fileBytes.Length;
            stream.Write(fileBytes, 0, fileBytes.Length);
            stream.Close();
            directory.BypassAccessCheck = false;
        }

Obviously there is the associated aspx to go with this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageUpload.aspx.cs" Inherits="EPiServer.Research.iPhone.ImageUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:FileUpload runat="server" ID="fu" EnableViewState="false" />
        
        <asp:Button ID="Submit" runat="server" />
    </div>
    </form>
</body>
</html>

You can replace the global VPP folder reference with one to the page files VPP folder and this should cover your needs?

If you want to know how to create a page programmatically I'd suggest you look at the EPiServer SDK documentation at http://sdk.episerver.com

David

#44731

Oct 13, 2010 19:58