tldr: Browsers need better ways of handling large HTTP requests – possibly with an "upload monitor" (Scroll to the last paragraph for a little more)

I think that we’ve all come across this before: you go to a website, select a file to upload, hit “Submit” and then wait forever and hope that the file you’ve selected has actually made it to the server on the other side. Recently, while building an ASP.NET MVC application for a client, I decided that I wanted a better experience for my end users, especially since this application is to be externally hosted from the client, who is the primary user. As such, I didn’t want the client to be waiting and hoping that the documents and images that they are uploading are actually reaching the other side.

So, to get past this issue, my first idea was to turn to AJAX. Using JavaScript made sense as it meant that no 3rd-party plugins are required and that anyone with JavaScript disabled can still upload files (albeit with a worse interface – but anyone disabling JavaScript should expect that). Unfortunately, AJAX file uploaders appeared to be mediocre at best – they were inaccurate with percentage (if they showed a percentage), the interfaces were pretty poor and most didn’t support multiple file upload features (such as selecting multiple files in the open file dialog).

With a quick bit of searching, I found SWFUpload – which appeared to have all the features that I wanted: a nice interface, multiple file uploads and very customisable. Having implemented SWFUpload into my application, I hit a major bug. As it turns out, SWFUpload was built using Flash, and Flash (being the wonderful Adobe application it is) only sends cookies from Internet Explorer, if at all. This meant that the uploading component would not use the same session as Firefox, and so would be redirected to the "log in" page instead of uploading the file. The suggested fix from SWFUpload didn’t work (apart from the various security exploits it introduced) and implementing my own SessionIDManager (to permit session id’s in the query string) failed due to ASP.NET’s SQL Membership Provider storing additional Authentication data in a separate cookie.

Luckily enough, Silverlight supports sending the cookies from the browser it is hosted in. Hoping for a simple, drop-in solution I was (again) severely disappointed. The Silverlight component I had chosen (Silverlight Multi File Uploader), as well as many others, send the file in the body of the HTTP request (instead of putting it in a mulitpart/form-data encoded POST header) and chunked the upload. This was greatly frustrating as I wanted to put the uploaded file straight into the database, without placing it temporarily on the file system. After some hacking of the Silverlight component, I was able to strip out the chunking code, but attempting to have the request use mulitpart/form-data failed due to Silverlight’s unusual (but rather logical) way of doing HTTP Requests. Silverlight relies on the browser sending the request and completing its headers (such as Content-Length). However, the Content-Length header is put before the Content-Type and this causes IIS (and, most likely, every other webserver) to ignore the POST variables. In short, I couldn’t have the file uploaded properly (ie appearing in the Request.Files array), but I could live with put it in the HTTP Request body (and access it via the Request.InputStream stream).

But enough of the backstory – what is to be done? Well, its quite simple. The user’s browser should realise that it is uploading a large file and show the user how much of the file is complete (and, possibly, speed and estimated time). I find it curious that the user is presented so much information about a download and yet next to nothing about the statistics of an upload. When you think about it from a web developer’s point of view, the browser is the only place to implement this feature. Why? Because HTML is for content, CSS for styling and JavaScript for functionality. Out of those three, JavaScript is the best candidate for implementing an upload "monitor"; but JavaScript has no information about the OS the browser is in (nor should it), and so there is no way for the JavaScript to know how large the file is – this means that the responsibility falls out of the Web Developer’s hands and into the browsers hands.

Sharebee.com, the one and only online file upload distribution service. To help you keep your shared files online using several different file hosting / web hosting providers.

Upload »
Choose the file you want to keep
online and upload it at Sharebee.
Distribute »
Sharebee will upload the file to
several file hosting services.
Update »
Links are checked for status and will
be removed and updated when needed.

About Sharebee: Thank you for using Sharebee.com, Sharebee 3.0 final will be released very soon. With many new features!
Ready to upload your file? Upload as much as you want.
Sharebee.com is a 100% free service, sponsored by advertisements.

Check this link for details : Three new user interface controls in ColdFusion 9http://www.adobe.com/devnet/coldfusion/articles/coldfusion9_uicontrols.html

Instead of picking one file at a time, Google Doc’s new upload page lets you choose multiple files and upload them simultaneously, in just a couple of steps.

Prerequisite: Google account.

Application Site: http://docs.google.com/

Process Time: 1 minute.

Steps:

Step-1. Go to the application site.

Step-2. Log in to your account.

Step-4. Click the “Upload” button on the upper left corner of the page.

Step-5. Click “Select files to upload” to upload files from your computer. [1]

Step-6. The file browser pops up. Select multiple files by pressing Shift and clicking the files.

Step-6. Alternatively, click the “Select more files” link that appears after you upload the first set of files if you want to select more files.

Step-7. Select a “Destination folder” from your Google Docs. [2]

Step-8. Click “Start upload”.

Step-9. Google Docs displays the status of upload per file until completion.

Compare:  Upload PDF Files on Google Docs

Notes:

[1] Conversion limitations and supported file types:

Documents (up to 500KB of text)

• HTML files and plain text (.txt).
• Microsoft Word (.doc, .docx), Rich Text (.rtf), OpenDocument Text (.odt) and StarOffice (.sxw).

Presentations (up to 10MB)

• Microsoft PowerPoint (.ppt, .pps).

Spreadsheets (up to 1MB)

• Comma Separated Value (.csv).
• Microsoft Excel (.xls, .xlsx) files and OpenDocument Spreadsheet (.ods).

PDF Files (up to 10MB)

[2] This is optional. Default is “No folder”.

http://msdn.microsoft.com/en-us/library/dd490727.aspx

C# Copy Code //String parameters to assign site and document library destination URL
const string siteUrl = “http://moss2007rtm1/“;
const string siteName = “/SiteDirectory/PartsList/”;
const string destination = “http://moss2007rtm1/SiteDirectory/PartsList/Shared%20Documents/TestUpload.doc“;

//Freeze UI
Cursor = Cursors.WaitCursor;
buttonNewFolder.Enabled = false;
buttonUploadDocument.Enabled = false;

//Use SPSite class constructor to create site collection based on URL
SPSite siteCollection = new SPSite(siteUrl);

//Assign target web site based on site name
SPWeb site = siteCollection.AllWebs[siteName];

//Assign file stream to file opened based on file location form input
FileStream fStream = File.OpenRead(textBoxFilePath.Text);

//Instantiate byte array to correspond to the file stream object
byte[] contents = new byte[fStream.Length];

//Read data from file stream and write into byte array
fStream.Read(contents, 0, (int)fStream.Length);
fStream.Close();

//Add file to document library based on destination URL and content of byte array
site.Files.Add(destination, contents);

//UI clean-up
Cursor = Cursors.Default;
buttonNewFolder.Enabled = true;
buttonUploadDocument.Enabled = true;

Intent of my Blog

Few months back, i wrote a blog on Creating Struts2 application on Google App Engine and some developers asked me how to upload a file using struts2 on google app engine. At that point of time, i was playing with google app engine and was not very clear about the limitation google app engine imposes. Google App Engine does not allow your application to write a file to their application server. This was a very big limitation as most of the application require some sort of file upload. So, i decided to find some way by which i can achieve the upload functionality and i found this link. But, i didn’t wanted to use servelt in my code because i was trying to build a application using struts 2.I wanted to work with actions and use FileUploadInterceptor. With the current implementation of struts 2 FileUploadInterceptor, i can’t do fileupload because it writes file to server.So, after spending some time with struts2 code, i wrote my own extension for Struts 2.This post will discuss how you can use small struts2 wrapper framework, i created for google app engine in your application to do fileupload and more.

Prerequisites for starting Struts2 Application on Google App Engine

Before you start building your sample application on google app engine using struts 2 you will need the following:-

1. Google App Engine runs on java 5 and above so if necessary, download and install the Java SE Development Kit (JDK) for your platform and for mac users download and install the latest version.
2. In this example we will be using Eclipse as our ide. So if necessary, download eclipse and google app engine plugin for eclipse.You will also need to download the google  java app engine SDK. For more information you can refer to installing the java SDK for google app engine.
3. Download the latest release of Struts2 framework.If you want to learn struts 2 a very good reference is struts 2 in action book.Please buy Struts 2 in Action.
4. Download the latest release of struts2-gae framework.It is an wrapper around struts 2 for google app engine.

Step by Step procedure to create Struts2 File Upload application on Google App Engine.

Step 1: Create a new project by clicking the New Web Application Project button in the toolbar.

Step 2 : Give the project name say struts2-fileupload  as we are going to create a simple file upload application. Enter package name as com.login and uncheck “Use Google Web Toolkit,” and ensure “Use Google App Engine” is checked and click the finish button.

Step3 : When you click the finish button you will get a sample HelloWorld application, which you can run going in the Run menu, select Run As > Web Application.By default application will run at port 8080, you can view the sample application at http://locahost:8080. For more information on the sample google web application created by the plugin you can refer to Google java app engine documentation .Please keep in mind that intent of this document is not to provide developers the overview of Google App engine for Java.

Step4 : By now you are ready with the google app engine infrastructure and we can move to the next step of creating a file upload application in Struts 2.

• for creating a struts 2 application you will need to first add the required dependencies to the struts2-fileupload project. The required struts 2 jars are below mentioned and you can find these jars in struts2 package you downloaded inside the lib folder :-
  • commons-fileupload-1.2.1.jar
  • commons-io-1.3.2.jar
  • commons-logging-1.1.jar
  • freemarker-2.3.13.jar
  • ognl-2.6.11.jar
  • struts2-core-2.1.6.jar
  • struts2-gae-0.1.jar
  • xwork-2.1.2.jar
• Add these dependencies in your eclipse java build path.

• Add these dependencies in the war/WEB-INF/lib folder so that these jars gets deployed along with your application.
• First step in creating a struts 2 application is configuring the web.xml (deployment descriptor) which is located in WEB-INF folder.You can remove the servlet declaration from web.xml as we will not be needing this.In the last post,we configured FilterDispatcher(this is theFilterDispatcher which comes with struts2) but in this application we need to add the GaeFilterDispatcher(this is provided by struts 2 extension framework for GAE). We will declare GaeFilterDispatcher in web.xml, because in struts2 every request goes  pass through a FilterDispatcher, which will invoke the appropriate action corresponding to the URL mapping.So our web.xml will look like :-

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
 <filter>
 <filter-name>struts2-gae</filter-name>
 <filter-class>com.struts2.gae.dispatcher.GaeFilterDispatcher</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>struts2-gae</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 </welcome-file-list>
</web-app>

• To start we will be creating a jsp fileupload page using struts 2 tag library and we will call file upload page from index.html.To call the fileupload page there are two ways first, we can directly call the upload.jsp page from link second, we can calling it through struts. We will be taking the second step as this will show you how to configure actions when you dont need to invoke any action.Lets first see how our login page and index.html will look like :-

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Struts2 File upload on Google App Engine</title>
</head>

<body>
<h1>Struts2 File upload on Google App Engine!</h1>
<table>
<tr>
<td colspan="2" style="font-weight: bold;">Available Application:</td>
</tr>
<tr>
<td><a href="/add" />Upload my Photo</td>
</tr>
</table>
</body>
</html>

upload.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"</pre>
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload my Photo</title>
</head>
<body>
 <s:form action="upload" method="post" enctype="multipart/form-data">
 <s:file name="photo" label="Upload new Photo"></s:file>
 <s:submit value="Upload"></s:submit>
 </s:form>

</body>
</html>

After creating the upload.jsp we need to configure this as action in the struts.xml file which you be should put inside source folder parallel to log4j.properties file.We can configure action as mentioned below:-

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<include file="struts-default.xml"></include>
<package name="" namespace="/" extends="struts-default">
		<action name="add">
			<result>/upload.jsp</result>
		</action>
	</package>
</struts>

• Now try running this application by right click on project run as > web application and click http://localhost:8080. You will see index.html and when you click on upload my photo you will get this exception :-

SEVERE: Unable to set parameter [location] in result of type    [org.apache.struts2.dispatcher.ServletDispatcherResult]

Caught OgnlException while setting property ‘location’ on type ‘org.apache.struts2.dispatcher.ServletDispatcherResult’. – Class: ognl.OgnlRuntime

File: OgnlRuntime.java

Method: invokeMethod

Line: 508 – ognl/OgnlRuntime.java:508:-1

at com.opensymphony.xwork2.ognl.OgnlUtil.internalSetProperty(OgnlUtil.java:392)

Caused by: java.lang.IllegalAccessException: Method [public void org.apache.struts2.dispatcher.StrutsResultSupport.setLocation(java.lang.String)] cannot be accessed.

at ognl.OgnlRuntime.invokeMethod(OgnlRuntime.java:508)

at ognl.OgnlRuntime.callAppropriateMethod(OgnlRuntime.java:812)

at ognl.OgnlRuntime.setMethodValue(OgnlRuntime.java:964)

at ognl.ObjectPropertyAccessor.setPossibleProperty(ObjectPropertyAccessor.java:75)

at ognl.ObjectPropertyAccessor.setProperty(ObjectPropertyAccessor.java:131)

at com.opensymphony.xwork2.ognl.accessor.ObjectAccessor.setProperty(ObjectAccessor.java:28)

at ognl.OgnlRuntime.setProperty(OgnlRuntime.java:1656)

at ognl.ASTProperty.setValueBody(ASTProperty.java:101)

at ognl.SimpleNode.evaluateSetValueBody(SimpleNode.java:177)

at ognl.SimpleNode.setValue(SimpleNode.java:246)

at ognl.Ognl.setValue(Ognl.java:476)

at com.opensymphony.xwork2.ognl.OgnlUtil.setValue(OgnlUtil.java:192)

at com.opensymphony.xwork2.ognl.OgnlUtil.internalSetProperty(OgnlUtil.java:385)

… 73 more

• In order to resolve this problem we  need to make entry in web.xml file also for OgnlListener.This OgnlListener is also provided by struts2-gae framework.(A struts2 extension framework for GAE).

[/sourcecode]

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<filter>
<filter-name>struts2-gae</filter-name>
<filter-class>com.struts2.gae.dispatcher.GaeFilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2-gae</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<listener>
<listener-class>com.struts2.gae.listener.OgnlListener</listener-class>
</listener>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

[sourcecode]

• You need to add this step if you are using Google App Engine 1.2.6 because when you run struts2 application on google app engine 1.2.6 you will get the following error:-

javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax.swing.tree.TreeNode is a restricted class. Please see the Google App Engine developer’s guide for more details.
at org.apache.jasper.runtime.PageContextImpl.doHandlePageException(PageContextImpl.java:825)
at org.apache.jasper.runtime.PageContextImpl.access$1100(PageContextImpl.java:64)
at org.apache.jasper.runtime.PageContextImpl$12.run(PageContextImpl.java:745)
at java.security.AccessController.doPrivileged(Native Method)
at org.apache.jasper.runtime.PageContextImpl.handlePageException(PageContextImpl.java:743)
at org.apache.jsp.login_jsp._jspService(login_jsp.java:86)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:94)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:806)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:324)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:292)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:236)
at com.google.appengine.tools.development.PrivilegedJspServlet.access$101(PrivilegedJspServlet.java:23)
at com.google.appengine.tools.development.PrivilegedJspServlet$2.run(PrivilegedJspServlet.java:59)
at java.security.AccessController.doPrivileged(Native Method)
at com.google.appengine.tools.development.PrivilegedJspServlet.service(PrivilegedJspServlet.java)

To avoid this error you need to create a new package “freemarker.core” in your source folder and add the following class

</span></span>

/*
 * Copyright (c) 2003 The Visigoth Software Society. All rights
 * reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above
copyright
 *    notice, this list of conditions and the following disclaimer in
 *    the documentation and/or other materials provided with the
 *    distribution.
 *
 * 3. The end-user documentation included with the redistribution, if
 *    any, must include the following acknowledgement:
 *       "This product includes software developed by the
 *        Visigoth Software Society (http://www.visigoths.org/)."
 *    Alternately, this acknowledgement may appear in the software
itself,
 *    if and wherever such third-party acknowledgements normally
appear.
 *
 * 4. Neither the name "FreeMarker", "Visigoth", nor any of the names
of the
 *    project contributors may be used to endorse or promote products
derived
 *    from this software without prior written permission. For written
 *    permission, please contact visigo...@visigoths.org.
 *
 * 5. Products derived from this software may not be called
"FreeMarker" or "Visigoth"
 *    nor may "FreeMarker" or "Visigoth" appear in their names
 *    without prior written permission of the Visigoth Software
Society.
 *
 * THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESSED OR IMPLIED
 * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
 * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED.  IN NO EVENT SHALL THE VISIGOTH SOFTWARE SOCIETY OR
 * ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
 * USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
 * OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 * SUCH DAMAGE.
 *
====================================================================
 *
 * This software consists of voluntary contributions made by many
 * individuals on behalf of the Visigoth Software Society. For more
 * information on the Visigoth Software Society, please see
 * http://www.visigoths.org/
 */

package freemarker.core;

import java.io.IOException;

/**
 * A TemplateElement representing a block of plain text.
 *
 * @version $Id: TextBlock.java,v 1.17 2004/01/06 17:06:42 szegedia Exp $
 */
public final class TextBlock extends TemplateElement {
 private static final char[] EMPTY_CHAR_ARRAY = new char[0];
 static final TextBlock EMPTY_BLOCK = new TextBlock(EMPTY_CHAR_ARRAY, false);
 // We're using char[] instead of String for storing the text block because
 // Writer.write(String) involves copying the String contents to a char[]
 // using String.getChars(), and then calling Writer.write(char[]).By
 // using Writer.write(char[]) directly, we avoid array copying on each
 // write.
 private char[] text;
 private final boolean unparsed;

 public TextBlock(String text) {
 this(text, false);
 }

 public TextBlock(String text, boolean unparsed) {
 this(text.toCharArray(), unparsed);
 }

 private TextBlock(char[] text, boolean unparsed) {
 this.text = text;
 this.unparsed = unparsed;
 }

 /**
 * Simply outputs the text.
 */
 public void accept(Environment env) throws IOException {
 env.getOut().write(text);
 }

 public String getCanonicalForm() {
 String text = new String(this.text);
 if (unparsed) {
 return "<#noparse>" + text + "</#noparse>";
 }
 return text;
 }

 public String getDescription() {
 String s = new String(text).trim();
 if (s.length() == 0) {
 return "whitespace";
 }
 if (s.length() > 20) {
 s = s.substring(0, 20) + "...";
 s = s.replace('\n', ' ');
 s = s.replace('\r', ' ');
 }
 return "text block (" + s + ")";
 }

 TemplateElement postParseCleanup(boolean stripWhitespace) {
 if (text.length == 0)
 return this;
 int openingCharsToStrip = 0, trailingCharsToStrip = 0;
 boolean deliberateLeftTrim = deliberateLeftTrim();
 boolean deliberateRightTrim = deliberateRightTrim();
 if (!stripWhitespace || text.length == 0) {
 return this;
 }
 if (parent.parent == null && previousSibling() == null)
 return this;
 if (!deliberateLeftTrim) {
 trailingCharsToStrip = trailingCharsToStrip();
 }
 if (!deliberateRightTrim) {
 openingCharsToStrip = openingCharsToStrip();
 }
 if (openingCharsToStrip == 0 && trailingCharsToStrip == 0) {
 return this;
 }
 this.text = substring(text, openingCharsToStrip, text.length
 - trailingCharsToStrip);
 if (openingCharsToStrip > 0) {
 this.beginLine++;
 this.beginColumn = 1;
 }
 if (trailingCharsToStrip > 0) {
 this.endColumn = 0;
 }
 return this;
 }

 /**
 * Scans forward the nodes on the same line to see whether there is a
 * deliberate left trim in effect. Returns true if the left trim was
 * present.
 */
 private boolean deliberateLeftTrim() {
 boolean result = false;
 for (TemplateElement elem = this.nextTerminalNode(); elem != null
 && elem.beginLine == this.endLine; elem = elem
 .nextTerminalNode()) {
 if (elem instanceof TrimInstruction) {
 TrimInstruction ti = (TrimInstruction) elem;
 if (!ti.left && !ti.right) {
 result = true;
 }
 if (ti.left) {
 result = true;
 int lastNewLineIndex = lastNewLineIndex();
 if (lastNewLineIndex >= 0 || beginColumn == 1) {
 char[] firstPart = substring(text, 0,
 lastNewLineIndex + 1);
 char[] lastLine = substring(text, 1 + lastNewLineIndex);
 if (trim(lastLine).length == 0) {
 this.text = firstPart;
 this.endColumn = 0;
 } else {
 int i = 0;
 while (Character.isWhitespace(lastLine[i])) {
 i++;
 }
 char[] printablePart = substring(lastLine, i);
 this.text = concat(firstPart, printablePart);
 }
 }
 }
 }
 }
 if (result) {
 }
 return result;
 }

 /**
 * Checks for the presence of a t or rt directive on the same line. Returns
 * true if the right trim directive was present.
 */
 private boolean deliberateRightTrim() {
 boolean result = false;
 for (TemplateElement elem = this.prevTerminalNode(); elem != null
 && elem.endLine == this.beginLine; elem = elem
 .prevTerminalNode()) {
 if (elem instanceof TrimInstruction) {
 TrimInstruction ti = (TrimInstruction) elem;
 if (!ti.left && !ti.right) {
 result = true;
 }
 if (ti.right) {
 result = true;
 int firstLineIndex = firstNewLineIndex() + 1;
 if (firstLineIndex == 0) {
 return false;
 }
 if (text.length > firstLineIndex
 && text[firstLineIndex - 1] == '\r'
 && text[firstLineIndex] == '\n') {
 firstLineIndex++;
 }
 char[] trailingPart = substring(text, firstLineIndex);
 char[] openingPart = substring(text, 0, firstLineIndex);
 if (trim(openingPart).length == 0) {
 this.text = trailingPart;
 this.beginLine++;
 this.beginColumn = 1;
 } else {
 int lastNonWS = openingPart.length - 1;
 while (Character.isWhitespace(text[lastNonWS])) {
 lastNonWS--;
 }
 char[] printablePart = substring(text, 0, lastNonWS + 1);
 if (trim(trailingPart).length == 0) {
 // THIS BLOCK IS HEINOUS! THERE MUST BE A BETTER
 // WAY! REVISIT (JR)
 boolean trimTrailingPart = true;
 for (TemplateElement te = this.nextTerminalNode(); te != null
 && te.beginLine == this.endLine; te = te
 .nextTerminalNode()) {
 if (te.heedsOpeningWhitespace()) {
 trimTrailingPart = false;
 }
 if (te instanceof TrimInstruction
 && ((TrimInstruction) te).left) {
 trimTrailingPart = true;
 break;
 }
 }
 if (trimTrailingPart)
 trailingPart = EMPTY_CHAR_ARRAY;
 }
 this.text = concat(printablePart, trailingPart);
 }
 }
 }
 }
 return result;
 }

 /*
 * private String leftTrim(String s) { int i =0; while (i<s.length()) { if
 * (!Character.isWhitespace(s.charAt(i))) break; ++i; } return
 * s.substring(i); }
 */
 private int firstNewLineIndex() {
 String content = new String(text);
 int newlineIndex1 = content.indexOf('\n');
 int newlineIndex2 = content.indexOf('\r');
 int result = newlineIndex1 >= 0 ? newlineIndex1 : newlineIndex2;
 if (newlineIndex1 >= 0 && newlineIndex2 >= 0) {
 result = Math.min(newlineIndex1, newlineIndex2);
 }
 return result;
 }

 private int lastNewLineIndex() {
 String content = new String(text);
 return Math.max(content.lastIndexOf('\r'), content.lastIndexOf('\n'));
 }

 /**
 * figures out how many opening whitespace characters to strip in the
 * post-parse cleanup phase.
 */
 private int openingCharsToStrip() {
 int newlineIndex = firstNewLineIndex();
 if (newlineIndex == -1 && beginColumn != 1) {
 return 0;
 }
 ++newlineIndex;
 if (text.length > newlineIndex) {
 if (newlineIndex > 0 && text[newlineIndex - 1] == '\r'
 && text[newlineIndex] == '\n') {
 ++newlineIndex;
 }
 }
 if (new String(text).substring(0, newlineIndex).trim().length() > 0) {
 return 0;
 }
 // We look at the preceding elements on the line to see if we should
 // strip the opening newline and any whitespace preceding it.
 for (TemplateElement elem = this.prevTerminalNode(); elem != null
 && elem.endLine == this.beginLine; elem = elem
 .prevTerminalNode()) {
 if (elem.heedsOpeningWhitespace()) {
 return 0;
 }
 }
 return newlineIndex;
 }

 /**
 * figures out how many trailing whitespace characters to strip in the
 * post-parse cleanup phase.
 */
 private int trailingCharsToStrip() {
 String content = new String(text);
 int lastNewlineIndex = lastNewLineIndex();
 if (lastNewlineIndex == -1 && beginColumn != 1) {
 return 0;
 }
 String substring = content.substring(lastNewlineIndex + 1);
 if (substring.trim().length() > 0) {
 return 0;
 }
 // We look at the elements afterward on the same line to see if we
 // should strip any whitespace after the last newline
 for (TemplateElement elem = this.nextTerminalNode(); elem != null
 && elem.beginLine == this.endLine; elem = elem
 .nextTerminalNode()) {
 if (elem.heedsTrailingWhitespace()) {
 return 0;
 }
 }
 return substring.length();
 }

 boolean heedsTrailingWhitespace() {
 if (isIgnorable()) {
 return false;
 }
 for (int i = 0; i < text.length; i++) {
 char c = text[i];
 if (c == '\n' || c == '\r') {
 return false;
 }
 if (!Character.isWhitespace(c)) {
 return true;
 }
 }
 return true;
 }

 boolean heedsOpeningWhitespace() {
 if (isIgnorable()) {
 return false;
 }
 for (int i = text.length - 1; i >= 0; i--) {
 char c = text[i];
 if (c == '\n' || c == '\r') {
 return false;
 }
 if (!Character.isWhitespace(c)) {
 return true;
 }
 }
 return true;
 }

 boolean isIgnorable() {
 if (text == null || text.length == 0) {
 return true;
 }
 if (!isWhitespace()) {
 return false;
 }
 // trick here
 boolean atTopLevel = true;
 TemplateElement prevSibling = previousSibling();
 TemplateElement nextSibling = nextSibling();
 return ((prevSibling == null && atTopLevel) || nonOutputtingType(prevSibling))
 && ((nextSibling == null && atTopLevel) || nonOutputtingType(nextSibling));
 }

 private boolean nonOutputtingType(TemplateElement element) {
 return (element instanceof Macro || element instanceof Assignment
 || element instanceof AssignmentInstruction
 || element instanceof PropertySetting
 || element instanceof LibraryLoad || element instanceof Comment);
 }

 private static char[] substring(char[] c, int from, int to) {
 char[] c2 = new char[to - from];
 System.arraycopy(c, from, c2, 0, c2.length);
 return c2;
 }

 private static char[] substring(char[] c, int from) {
 return substring(c, from, c.length);
 }

 private static char[] trim(char[] c) {
 if (c.length == 0) {
 return c;
 }
 return new String(c).trim().toCharArray();
 }

 private static char[] concat(char[] c1, char[] c2) {
 char[] c = new char[c1.length + c2.length];
 System.arraycopy(c1, 0, c, 0, c1.length);
 System.arraycopy(c2, 0, c, c1.length, c2.length);
 return c;
 }

 boolean isWhitespace() {
 return text == null || trim(text).length == 0;
 }

}

• Now if you run the web application you will see the upload page.
• Next step is to configure the GaeFileUploadInterceptor in struts.xml file.In struts 2, file upload is done by FileUploadInterceptor which intercept all the MultiPartRequest and provides the File object to the action. Then action does what ever it wants to do with the File object.But, on google app engine you can’t get the File object because file writes and many other file related operations are not allowed on GAE.So, we will use GaeFileUploadInterceptor which provides a String object which contains all the file content.You can save this string as a blob into the datastore or convert this string object into InputStream and return to the user.You need to add an entry in struts.xml for GaeFileUploadInterceptor.

</pre>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<include file="struts-default.xml"></include>
<package name="" namespace="/" extends="struts-default">
<interceptors>
<interceptor name="gaeFileUploadInterceptor"
class="com.struts2.gae.interceptor.GaeFileUploadInterceptor" />
<interceptor-stack name="fileUploadStack">
<interceptor-ref name="gaeFileUploadInterceptor"></interceptor-ref>
<interceptor-ref name="basicStack"></interceptor-ref>
</interceptor-stack>
</interceptors>

<default-interceptor-ref name="fileUploadStack" />
<action name="add">
<result>/upload.jsp</result>
</action>
</package>

</struts>
<pre>

• Next step is to create the UploadAction which will handle the upload request.

package com.fileupload;

import java.io.InputStream;

import org.apache.commons.io.IOUtils;

import com.opensymphony.xwork2.ActionSupport;

public class UploadAction extends ActionSupport {

 private static final long serialVersionUID = -300329750248730163L;
 private String photo;
 private String photoContentType;
 private String photoFileName;
 private InputStream photoStream;

 public String upload() throws  Exception {
 photoStream = IOUtils.toInputStream(photo,"ISO-8859-1");
 return "success";
 }

 public String getPhoto() {
 return photo;
 }

 public void setPhoto(String photo) {
 this.photo = photo;
 }

 public String getPhotoContentType() {
 return photoContentType;
 }

 public void setPhotoContentType(String photoContentType) {
 this.photoContentType = photoContentType;
 }

 public String getPhotoFileName() {
 return photoFileName;
 }

 public void setPhotoFileName(String photoFileName) {
 this.photoFileName = photoFileName;
 }

 public InputStream getPhotoStream() {
 return photoStream;
 }

 public void setPhotoStream(InputStream photoStream) {
 this.photoStream = photoStream;
 }
}

If you notice there are three properties in the action photo,photoContentType,photoFileName.These properties get their values from the GaeFileUploadInterceptor. These properties have to start with name you gave the file in the upload.jsp <s:file name=”photo” label=”Upload new Photo”></s:file>. In this, name is “photo” so you will get your file content in a property called photo and the two other properties will start with photo.

The second thing to notice is that result of action is “success” which is not SUCCESS you normally use. In this we are using a different result type called org.apache.struts2.dispatcher.StreamResult. Stream result is a custom Result type for sending raw data (via an InputStream) directly to the HttpServletResponse.

• Now we will configure UploadAction in struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
 <include file="struts-default.xml"></include>
 <package name="" namespace="/" extends="struts-default">
 <interceptors>
 <interceptor name="gaeFileUploadInterceptor"
 class="com.struts2.gae.interceptor.GaeFileUploadInterceptor" />
 <interceptor-stack name="fileUploadStack">
 <interceptor-ref name="gaeFileUploadInterceptor"></interceptor-ref>
 <interceptor-ref name="basicStack"></interceptor-ref>
 </interceptor-stack>
 </interceptors>

 <default-interceptor-ref name="fileUploadStack" />
 <action name="add">
 <result>/upload.jsp</result>
 </action>
 <action name="upload" method="upload">
 <result name="success" type = "stream">
 <param name="contentType">image/jpeg</param>
 <param name="inputName">photoStream</param>
 <param name="contentDisposition">filename="photo.jpg"</param>
 <param name="bufferSize">1024</param>
 </result>
 </action>
 </package>

</struts>

• Finally, Run this application you will be able to upload the photo and then view it in your browser.

In this blog, i have tried to explain you how you can do file upload using struts 2 on google app engine.Please make sure you download the struts2-gae jar.Hope this helps you all.

You can dowload the sample project from here.

ASP.NET FileUpload and File.Open() method problems

เนื่องจากท่านเบนซ์เรียกร้องมาว่าอยากให้เดโม struts upload ให้ดูหน่อย นั่งไตร่ตรองอยู่พักนึง และก็อืมๆๆ ได้ๆ ทำก็ทำ ฮ่าฮ่า รับปากมาหลายวันและ กว่าจะได้ฤกษ์ทำก็วันนี้แหละ ตอนตีสองครึ่งด้วย ฮ่าฮ่า ได้ข่าวว่าพุ่งนี้เรียนเช้านี่นา แหะๆ มาๆ เริ่มกันดีกว่า หุหุ ตอนแรกก็นานมากกว่าจะนั่งระลึกชาติได้ว่าทำอะไรก่อนอะไรหลัง อันนั้นอันนี้คืออะไร เพราะเรียนมาแล้วไม่ได้ทวน Error500 กันไปหลายรอบ กว่าจะได้ ทำให้เห็นความสำคัญของ struts-config มากขึ้นอีกสามเท่า 55+ (พี่เม้งชวนคุย แว๊ก ตีสามแล้ว)

เริ่มจิงๆ เถอะ ฮ่าฮ่า

ขอเดโมเฉยๆ ละกันนะ ไม่อยากพูดถึงทฤษฎีมาก เพราะง่วง บวกกับ ยังไม่แม่นเท่าไหร่

เริ่มแรก ก็สร้าง Project ขึ้นมาก่อน อย่าลืม เลือกใช้ struts framework ด้วยล่ะ อิอิ ในที่นี้สร้าง project ชื่อ StrutsUpload

จำไม่ได้เหมือนกันว่าจิงๆ มันต้องสร้างอะไรขึ้นมาก่อน ระหว่าง jso กับ strutsActionForm หรือว่าอะไรก็ได้ เอาเป็นว่าขอสร้าง ActionForm ก่อนละกัน ในที่นี้สร้าง strutsActionForm ชื่อ FileActionForm

พอได้ FileActionForm มาแล้วก็ลบ Attribute เดิม กับ setter, getter method ทิ้งไป แล้วก็สร้าง attribute กับ setter, getter อันใหม่ขึ้นมา อันนี้เราจะเอาไว้เก็บ file ที่จะอัพโหลดขึ้นมา

private FormFile file;

public FormFile getFile() {
return file;
}

public void setFile(FormFile file) {
this.file = file;
}

หลังจากนั้นก็ไปแก้ใน method validate ให้มันเช็กว่ามีการรับไฟล์เข้ามาจิงไหม (ซึ่งจิงๆ เอาไปรันแล้ว มันก็ไม่ยอมเช็คให้ – -” ไม่เข้าใจมันเหมือนกัน 555+)

public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
ActionErrors errors = new ActionErrors();
if (getFile() == null) {
errors.add(“file”, new ActionMessage(“error.name.file”));
}
return errors;
}

เพื่อกันลืม ก็ไปใส่ข้อความที่จะให้ขึ้นตอน error ที่ ApplicationResource.properties ใน package com.myapp.struts ก็เพิ่มบรรทัดสุดท้ายเป็น

error.name.file=You must select file first
สังเกตว่า ชื่อ error จะต้องตรงกับ ชื่อ argument ใน ActionMessage ของข้างบนนะ

เสร็จละโปรเจค เอ้ย!! ไม่ใช่ๆ ต่อไปก็มาทำ jsp (ต้องทำก่อนที่จะทำ action นะ ไม่งั้นมันไม่รู้ว่าจะ action ไปที่ไหน)

สร้าง JSP ขึ้นมา ในที่นี้ตั้งชื่อว่า upload.jsp อย่าลืม add taglib ของ struts เข้าไปด้วยนะ

แล้วก็สร้างฟอร์มสำหรับเลือกไฟล์ที่จะ upload ให้ action ไปที่ uploadFile (ต่อไปก็จะต้องกำหนดเป็น URL-path ของ action)

ก็เป็นอันเสร็จ JSP ต่อไปก็ต้องสร้าง Action ขึ้นมา เพื่อใช้ในการ copy file ที่ได้รับมาจาก jsp เริ่มรู้สึกแล้วสินะว่าทำไมมันต้องสร้างอารายเยอะแยะ ฮ่าฮ่า ก็รู้สึกเหมือนกันนะ แต่เค้าว่ามาอย่างงี้ ก็ต้องจำๆ กันหน่อย ฮึบบบ ^^

สร้าง Action ที่ชื่อ uploadAction อยู่ใน package actions อันนี้เราให้ action กับ upload.jsp

พอสร้างเสร็จลองไปแอบดูใน struts-config จะพบว่ามี mapping เพิ่มขึ้นมา

ต่อไปก็ไปเพิ่มโค้ดใน method ActionForward คือในนี้เราต้องเขียนให้มันรับไฟล์มาจากฟอร์ม แล้วก็เขียนลงไปบนคอมเรา ตำแหน่งไหนก็ว่ากันไป จากการที่ลองแล้ว ถ้าใช้ FileWriter เขียน จะเขียนไฟล์ภาพไรงี้ไม่ได้ แต่ถ้าใช้ FileOutputStream ก็เขียนได้หมด

อันดับแรกก็ให้แปลง ActionForm ที่เป็น parameter ของ method ให้เป็น object ของ FileActionForm ที่เราสร้างเอาไว้ก่อน หลังจากนั้นก็ getFile เข้ามาใส่ใน FormFile แล้วก็ getFilename มาเพื่อที่จะให้เป็นชื่อของไฟล์ที่เราจะบันทึกลงไป

FileActionForm f = (FileActionForm) form;
FormFile file = f.getFile();
String filename = file.getFileName();

หลังจากนั้นก็เปิด FileOutputStream แล้วก็เขียนลงไป แล้วก็ปิด แค่นี้ ก็เสร็จ ฮ่าฮ่า

FileOutputStream fout = new FileOutputStream(“c:/” + filename);
fout.write(file.getFileData());
fout.close();

แต่จิงๆ ก็ยังไม่เสร็จนะ ฮ่าฮ่า อีกนิดๆ สังเกตว่าใน method มันจะ return mapping.findForward(SUCCESS);
ซึ่งเราต้องไปสร้างไฟล์ที่จะให้มัน map กับ success ขึ้นมาก่อน ก็สมมติสร้าง success.html ละกัน ข้างในก็พิมข้อความง่ายๆ
แล้วก็ไปเพิ่มตรง ใน struts-config ให้มันรู้จัก success ของเราก่อน

ก็ลองรันดู แล้วก็ลองเลือกไฟล์ไปดู ก็จะพบว่ามันสร้างไฟล์ให้จิงๆ ว๊าวววววววตื่นเต้น

กว่าจะเสร็จ T^T จาตีสี่แล้วววว ตายห่าาา พุ่งนี้เรียนเว็บโปร แงๆๆๆ

ไปนอนละคับพี่น้อง TT

Firstly we need a form that can upload an image to save with PHP. This could be something like this:

<form action="./upload.php" method="post" enctype="multipart/form-data">
   <p>
      <label for="file">Select a file:</label> <input type="file" name="userfile" id="file"> <br />
      <button>Upload File</button>
   <p>
</form>

On line one we tell the form to send the information to our PHP file (which we will create later) named upload.php, we then tell the form to send the information as “multipart/form-data”, this is required to send files through the form. Then we create an input with type=”file”, this makes an input with the required buttons to select a file. Finally we add a button to submit the form.

<?php
   // Configuration - Your Options
      $allowed_filetypes = array('.jpg','.gif','.bmp','.png'); // These will be the types of file that will pass the validation.
      $max_filesize = 524288; // Maximum filesize in BYTES (currently 0.5MB).
      $upload_path = './files/'; // The place the files will be uploaded to (currently a 'files' directory).

   $filename = $_FILES['userfile']['name']; // Get the name of the file (including file extension).
   $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Get the extension from the filename.

   // Check if the filetype is allowed, if not DIE and inform the user.
   if(!in_array($ext,$allowed_filetypes))
      die('The file you attempted to upload is not allowed.');

   // Now check the filesize, if it is too large then DIE and inform the user.
   if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)
      die('The file you attempted to upload is too large.');

   // Check if we can upload to the specified path, if not DIE and inform the user.
   if(!is_writable($upload_path))
      die('You cannot upload to the specified directory, please CHMOD it to 777.');

   // We'll start handling the upload in the next step

?>

<?php
   // Configuration - Your Options
      $allowed_filetypes = array('.jpg','.gif','.bmp','.png'); // These will be the types of file that will pass the validation.
      $max_filesize = 524288; // Maximum filesize in BYTES (currently 0.5MB).
      $upload_path = './files/'; // The place the files will be uploaded to (currently a 'files' directory).

   $filename = $_FILES['userfile']['name']; // Get the name of the file (including file extension).
   $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Get the extension from the filename.

   // Check if the filetype is allowed, if not DIE and inform the user.
   if(!in_array($ext,$allowed_filetypes))
      die('The file you attempted to upload is not allowed.');

   // Now check the filesize, if it is too large then DIE and inform the user.
   if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)
      die('The file you attempted to upload is too large.');

   // Check if we can upload to the specified path, if not DIE and inform the user.
   if(!is_writable($upload_path))
      die('You cannot upload to the specified directory, please CHMOD it to 777.');

   // Upload the file to your specified path.
   if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $filename))
         echo 'Your file upload was successful, view the file <a href="' . $upload_path . $filename . '" title="Your File">here</a>'; // It worked.
      else
         echo 'There was an error during the file upload.  Please try again.'; // It failed  .

?>

Step 4

For more information look through the Handling File Uploads section at php.net

Nu cred ca este cineva care sa nu-si smulga parul din cap pentru ca nu a facut backup, pana chiar si la o mica chestie. Ca multi altii si eu am pierdut multe, dintr-o simpla formatare facuta in graba sau intr-un exces de entuziasm cauzat de vreun nou sistem de operare furnizat de microshit. Dupa ce in urma cu cateva luni am pierdut cam 2 ani de munca (recuperati din fericire in cele din urma… dar nu in totalitate, ci cam 70%) si cateva mii de poze, m-am gandit serios la alternative de backup.

Am facut niste cautari serioase si am gasit cateva chestii interesante chiar la Google. In primul rand:

Google Notebook – aparent e o banalitate… dar unde alt undeva poti stoca fisiere text, retete, bancuri, liste cu filme vazute, mini todo-uri ale proiectelor samd, daca nu chiar aici si chiar cu contul tau de gmail?

Google Calendar – pentru cei care folosesc TODO’s dar si pentru cei care nu au folosit in viata lor, dar si-au impus o organizare mai buna in viata lor dezorganizata. Cel mai important aspect este ca primesti SMS-uri de la Google cu ce trebuie sa faci la ora cutare! Acum poti primi SMS inainte cu 1h sa pleci la munca/facultate/liceu/etc. Si cum romanul e al dracului de inventiv, de ce sa nu faci share la calendarul tau cu anumiti prieteni, si sa trimiti SMS-uri gratis, sub forma de task-uri?:D

GSpace – oficial, cei care au facut acest add-on pentru Mozilla Firefox nu au nicio treaba cu cei de la Google. Ca sa fiu succint: prin intermediul acestui add-on te poti folosi de cei +7GB pe care ti-i ofera Gmail pentru a-ti stoca muzica, pozele, etc. Un alt avantaj este ca poti downloada fisierele uploadate prin intermediul Gspace, chiar din contul de Gmail pentru ca aceste fisiere sunt trimise ca email-uri. Singura problema pe care am intampinat-o a fost viteza de upload, cu care sper sa nu aveti prea mari probleme… dar chiar si asa, cine iti mai da GRATIS pe net acum +7GB ?!

P.S. in mod clar am renuntat la Gspace dat fiind uploadul si mi-am cumparat aceasta jucarie in varianta de 250GB 160RON si face toti banii (si ca sa fiu sigur ca microshit nu’si bate joc de mine si imi sterge ceva chiar si de pe hardul asta pe care il folosesc ca backup, ii scot alimentarea cat timp nu am nevoie de el)

I will try to explain the different steps to follow in order to create a pictures gallery related to let’s say an Event with Symfony. We speak of a gallery since my Event can have several related pictures. I created this gallery in the backend but it could be easily transposed to any frontend.

Caveat: I use symfony 1.2 and Doctrine

Lets first have a glance at the problems I faced when trying to create the gallery:

• I wanted to display the Events as a list with their related pictures knowing that there was already a dedicated module in the backend to manage the Events properties
• I wanted to be able to manage (erase, edit and add pictures) in a single form all the pictures related to my Event
• I wanted to display the pictures as thumbnails in the list view

And now the main steps we will follow to create our gallerie

• Create the picture class in our schema.yml
• Generate a gallerie module based on Event class
• Configure the generator in the backend
• Create the BackendEventPicturesForm which will include all the related Pictures Form. We’ll had a specific widget to enable user to delete a picture
• Create the BackendEmbedPictureForm and modify its method to handle file management in our directories
• Install the thumbNailPlugin to generate associated thumbnails
• Write a template to display the thumbnails

So let’s begin with the schema.yml…
You first have to create a Picture table that will be linked to the Event table with a 1 to Many relation.

#schema.yml
Picture:
  actAs: { Timestampable: ~ }
  columns:
    name: { type: string(255), unique: true, notnull: true }
    photo: { type: string(255), notnull: true }
    event_id: { type: integer, notnull: true }
    comment: { type: string(255) }
    deleted_at: { type: timestamp }
    is_visible: {type: boolean }
    tags: {type: string(255) }
  relations:
    Event: { local: event_id, foreign: id, foreignAlias: Pictures, onDelete: CASCADE, onUpdate: RESTRICT }

Notice that you don’t have to update the part of the schema.yml related to your Event class since Doctrine will automatically link your Picture class with the event Class.

Then you have to generate a new module in the backend. As I already said, the Event class has already an event module. Since the list must based on our Events objects, we have to build the new module based on the Event class. Type the following in your terminal:

php symfony doctrine:generate-admin --module="gallerie" backend Event

This indicates symfony to create the gallerie module based on the Event class.
Then go into the generator file of the new module

#apps/backend/modules/gallerie/config/generator.yml
generator:
  class: sfDoctrineGenerator
  param:
    model_class:                   Event
    theme:                            admin
    non_verbose_templates: true
    with_show:                     false
    singular:                         ~
    plural:                            ~
    route_prefix:                  event_gallerie
    with_doctrine_route:     1

    config:
      actions: ~
      fields:  ~
      list:
        title: Gallerie photo des Evènements
        table_method: retrieveBackendPicturesList
        display: [=name, _show_picture]
        fields:
          show_picture: {label: Dernières photos }
        object_actions:
          _edit: { label: Modifier la gallerie }
      filter:
        class: false
      form:
        class: BackendEventPicturesForm
      edit:    ~
      new:     ~

Take care to indicate in the config form part a dedicated form to use otherwise it will call the Event default form. The table_method allows to improve data requests efficiency by forcing symfony to automatically create a joint request between our Events and Pictures tables:

in lib/model/doctrine/EventTable.class.php
public function retrieveBackendPicturesList(Doctrine_Query $q)
  {
    $rootAlias = $q->getRootAlias();
    $q->leftJoin($rootAlias . '.Pictures p');
    return $q;
  }

We can now move to the next step dealing with forms creation. We need to use the very useful but not always clear embed form that allow the 1.2 version of Symfony. Embed forms are pretty straightforwards unless you try to upload files… which is the case here.

You first set up the dedicated form related to the Event class. We called it BackendEventPicturesForm in our generator. Creating a special form enables you to customize the form to your needs without interfeering with the form traditionnaly used to create a new Event.
We will unset all the fields since we dont want to modify our Even and we will embed as many BackendEmbedPictureForm as the number of pictures related to our event plus a BackendEmbedPictureForm to add a new picture to our Event.

So let’s explain first how to build our BackendEmbedPictureForm. We will unset a couple of fields that are useless here (updated_at, created_at etc). What we really need is a name fied with a simple sfValidatorString. The file (called ‘photo’ in our example) is much more tricky… We use a sfWidgetFormInputFileEditable to enter the file. The ‘file_src’ indicate symfony where to look if a file already exists to display it (%file% in ‘template’ option). The validator associated is the sfValidatorFile which will pass a ‘validatedFile’ in the update method for instance. The ‘path’ option indicates where the picture will be stored.

//in lib/model/form
class BackendEmbedPictureForm extends PictureForm
{
  public function configure()
  {
    $this->removeFields();
    $this->addWidgets();
    $this->addValidators();
  }

  public function removeFields(){
    unset(
    $this['event_id'],
    $this['deleted_at'],
    $this['created_at'],
    $this['updated_at']
    );
  }

  public function addWidgets(){
    $this->widgetSchema['name'] = new sfWidgetFormInput();
    $this->widgetSchema['photo'] = new sfWidgetFormInputFileEditable (array(
      'file_src'=> sfConfig::get('app_dir_event_photos').$this->getObject()->getPhoto(),
      'is_image'=> true,
      'edit_mode'=>!$this->isNew(),
      'template'=>/
%file%/%input%/

',
        ));
  }

  public function addValidators()
  {
    $this->validatorSchema['name'] = new sfValidatorString();
    $this->validatorSchema['photo'] = new sfValidatorFile(array(
     'path' => sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_event_photos'),
     'required' => false,
     'mime_types' => 'web_images',
    ));
  }
}

Later on we will override a few methods of the form otherwise you will call me liyer since you wont have the expected results with this form. I used sfConfig::get(‘app_dir_event_photos’) to set up in the config file of the app the end of the path to the directory.

Here is the code of the BackendEventPicturesForm. To create a form based on an existing value, simply pass the name of the object to your form : newForm(myObjectToUpdate).

// in lib/model/form
class BackendEventPicturesForm extends EventForm
{
  public function configure()
  {
  	//unset all the event fields
  	$this->unsetAllExcept(array());

	  // embed forms only when editing
	  if (!$this->isNew()) {

	    if ($this->getObject()->getPictures())
	    {
		  	// embed all gallery pictures forms
		    foreach ($this->getObject()->getPictures() as $picture) {

			    // create a new subcategory form for the current subcategory model object
			    $picture_form = new BackendEmbedPictureForm($picture);

			    // embed the subcategory form in the main category form
			    $this->embedForm('picture'.$picture->getId(), $picture_form);

			    // set a custom label for the embedded form
			    $this->widgetSchema['picture'.$picture->getId()]->setLabel('Image: '.$picture->getName());

			    // set a custom widget to delete a picture
			    $this->widgetSchema['picture'.$picture->getId()]['name'] = new sfWidgetFormInputDelete(array(
			    'url' => 'event/deletePicture',      // required
			    'model_id' => $picture->getId(),        // required
			    'confirm' => 'Êtes-vous sûre de vouloir supprimer cette image de la gallerie ?',                     // optional
			    ));
		    }
	    }

		   //create a new picture form for a new picture model object
	    $picture_form = new BackendEmbedPictureForm();

		  // embed the picture form in the main Event form
		  $this->embedForm('picture', $picture_form);

		  // set a custom label for the embedded form
		  $this->widgetSchema['picture']->setLabel('Nouvelle Photo');

		  }

  }
}

I used a method which allows to unset all fields of a form except one. I found it on the following article but I write the code again since it was in a comment for Doctrine users

//in lib/form/doctrine
public function unsetAllExcept($keepFields = array())
  {
    foreach($this as $key => $value)
    {
      $baseFields[]=$key;
    }
    //array_diff compares two arrays and returns the difference
    $temp = array_diff($baseFields, $keepFields);

    foreach ($temp as $unsetField)
    {
      unset($this[$unsetField]);
    }
  }

If you went through the code, you might have noticed the sfWidgetFormInputDelete that enables the administrator to delete a picture from the gallery. I will show you the code in detail right now but I first give a few words of explanations on the options. The ‘url’ will serve to indicate symfony where to find the executeDelete method (cf the routing system). the ‘model_id’ could have been passed in the url since basically it will be added in the route. This widget is based on the code found in the following article which I slightly modified.

// in lib

class sfWidgetFormInputDelete extends sfWidgetFormInput {

  protected function configure($options = array(), $attributes = array()) {

    $this->addRequiredOption('url');

    $this->addRequiredOption('model_id');

    $this->addOption('confirm', null);

    $this->addOption('icon', null);

    parent::configure($options, $attributes);
  }

  public function render($name, $value = null, $attributes = array(), $errors = array()) {

    $ctx = sfContext::getInstance();

    $request = $ctx->getRequest();

    $controller = $ctx->getController();

    if (is_null($this->getOption('confirm'))) {

      $this->setOption('confirm', __('Are you sure you want to delete this item?'));

    }

    if (is_null($this->getOption('icon'))) {

    	$this->setOption('icon', sprintf('http://%s%s/sfDoctrinePlugin/images/delete.png',$request->getHost(), $request->getRelativeUrlRoot()));

    } else {
      $this->setOption('icon', sprintf('http://%s%s/images/%s', $request->getHost(), $request->getRelativeUrlRoot(), $this->getOption('icon')));
    }

    $html = parent::render($name, $value, $attributes, $errors);

    $img = $this->renderTag('img', array('src' => $this->getOption('icon')));

    // this link was modifier by Pierre
    $link = link_to($img, $this->getOption('url') . '/?id=' . $this->getOption('model_id'), array('confirm' => 'Confirmez-vous ?'));
    //
    // it did not work before, placing an  'action' at the end of the url...
    //$link = 'genUrl($this->getOption('url')).'?id='.$this->getOption('model_id').'" onclick="if (confirm(\''.$this->getOption('confirm').'\')) { return true; };return false;">'.$img.'';

    $html .= $link;

    return $html;

  }

}

And now, you have to add an executeDeletePicture method in the Event class

//in apps/backend/modules/event/actions
public function executeDeletePicture (sfWebRequest $request)
  {
    $picture = Doctrine::getTable('Picture')->findById($request->getParameter('id'));
    $picture->delete();
    $this->redirect('@event_gallerie');
  }

But if you don’t override your bind method, you might be slightly disappointed. It seems Symfony does not handle automatically the file update process. More precisely, if you don’t bind these embedded forms, you won’t be able to access to some values of your embedded form… So you have to override the method bind()

//in lib/form/doctrine
public function bind(array $taintedValues = null, array $taintedFiles = null) {

    // remove the embedded new form if the name field was not provided)
    if (is_null($taintedValues['picture']['name']) || strlen($taintedValues['picture']['name']) === 0 ) {

        unset($this->embeddedForms['picture'], $taintedValues['picture']);

        // pass the new form validations
        $this->validatorSchema['picture'] = new sfValidatorPass();

    } else {

        // set the category of the new subcategory form object
        $this->embeddedForms['picture']->getObject()->setEvent($this->getObject());

    }

    // call parent bind method
    $output = parent::bind($taintedValues, $taintedFiles);

    //forces symfony to bind the embedded form
	  foreach ($this->embeddedForms as $name => $form) {
	      $this->embeddedForms[$name]->isBound = true;
	      $this->embeddedForms[$name]->values = $this->values[$name];
	    }

    return $output;

  }

But then, we dont want symfony to save the uploaded file with a generated hexadecimal code which is unreadible… We want a nice file name like event-pictureName.fileExtension. First, we have to pass the form values to the save method so that we have a chance to rename the file ! When you upload a file, symfony will call the processUploadedFile method. This one will then call the save method, but with only 2 arguments. We’ll add a third argument (if not passed, symfony will try to access it but wont be able and will put a null value by default…) to be able to access to the ‘name’ value of the form.

//in lib/form/doctrine BackendEventPicturesForm
//Saves the uploaded file for the given field
  protected function processUploadedFile($field, $filename = null, $values = null)
  {

  	parent::processUploadedFile($field, $filename = null, $values = null);

    //This line was added to be able to give a specific name to the registered file
    //by passing the $values[$field] to the "saveFile" method
    //otherwise you get an empty name for the file saved
    return $this->saveFile($field, $filename, $values[$field]);

  }

Now we’re done with the BackendEventPicturesForm, let’s complete the BackendEmbedPictureForm by overriding the updateObject() method. What we have to take into account by overriding is the management of the uploaded files in our directories (web/uploads/images/event-photos/). For instance, when a picture object is deleted, we want the associated file to be removed from its folder. Same when we edit the picture name we want to override the file name in the directory. And we must keep in mind that these actions will have to be duplicated to take care of the generated thumbnails… We could have overriden the save() method but the updateObject() stands for the kind of modifications we are doing : changing the linked properties of an object while the save() method will be more focused on our object and what we want to happen when saved.

//in lib/form/doctrine BackendEmbedPictureForm
public function updateObject($values = null)
  {
  	//define two "pathes variables" to ease code readibility
  	$eventPath = sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_even_photos') ;
    $thumbPath = sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_event_photos') . 'thumbnail/';

    //test if we are in edit mode (and not new mode)
    if(!$this->getObject()->isNew())
    {

      //check if object name has been changed by user
      if ($this->getValue('name') != $this->getObject()->getName())
      {

        //only the name has changed, the file remains the same
        if (!$this->getValue('photo'))
        {

        	//current associated picture filename has to be updated in our directories
          vac::renameFile(
            $eventPath . $this->getObject()->getPhoto(),
            $eventPath . $this->getNewPath()
          );

          //dont forget to update associated thumbnail filename
          vac::renameFile(
            $thumbPath . $this->getObject()->getPhoto(),
            $thumbPath . $this->getNewPath()
          );

          //related attribut of our picture has to be updated
          //we use getNewPath() method since the "generatePholoFileName()" method wont be called
          $this->getObject()->setPhoto($this->getNewPath());
        }

        //both name and picture file are changed
        else
        {
        	//previous picture file has to be deleted
          vac::deleteFile($eventPath . $this->getObject()->getPhoto());
          //associated thumbnail must be removed as well
          vac::deleteFile($thumbPath . $this->getObject()->getPhoto());

          //photo attribut of our picture is set to its new value
          $this->getObject()->setPhoto($this->getPicturePhotoName());
        }
      }
    }

    //creating a new picture for our event
    else
    {
    	//setting up the name of photo attribut
      $this->getObject()->setPhoto($this->getPicturePhotoName());
    }

    //back to the normal process of update (save object, etc, etc)
    $object = parent::updateObject($values);

    return $object;

  }

We call two methods that allegate the codes

// in BackendEmbedPictureForm
public function getPicturePhotoName()
  {
    return  vac::slugify($this->getValue('name')) . $this->getValue('photo')->getOriginalExtension();
  }

and the second one which is a bit more tricky and enables to collect the file extension of our file before renaming it (and then we can once again add this extension to our new name) when the user changes only the name (and leaves the file unchanged)

// in BackendEmbedPictureForm
public function getNewPath()
  {
  	//Collect photo's file type
    $array = explode(".", $this->getObject()->getPhoto());
    //rename photo and add file type
    return $this->getObject()->getEvent()->getSlugName() . '-' . vac::slugify($this->getValue('name')) . '.' . $array[1];

  }

We are almost done. There only remains to add a few methods to the Picture class. You can see that we refer to the thumbnails. Before explaining the process to generate the thumbnail, lets open a paranthesis. We added to the Picture class the following method :

//Customize the generated picture file name
  public function generatePhotoFileName (sfValidatedFile $file)
  {
  	return $this->getEvent()->getSlugName().'-'.$this->getPhoto();
  }

If you don’t do this, you will get very sad when you will see under which name symfony registers your file. This method is called automatically by the save method. The argument sfValidatedFile has been generated by the sfFileValidator

Let’s finish with the thumbnails. Symfony has a plugin that takes care of everything for you. Just type into your terminal

php symfony plugin:install sfThumbnailPlugin

Now, we need to generate a thumbnail each time a file is uploaded or modified. That’s why we’ll override the save() method and add a generateThumbnail() instruction

// in Picture.Class.php
//save method is overrided to create a thumbnail when picture saved
  public function save(Doctrine_Connection $conn = null)
  {
  	//check if object has been modified
    if ($this->isModified())
    {
    	//generate associated thumbnail
  	  $this->generateThumbnail();
    }

    return parent::save($conn);
  }

Since we dont want to generate a thumbnail for all our Pictures each time we press the ’save’ button, we check if the object has been modified before generating a thumbnail. Now let’s generate the thumbnail. This is pretty straightforward with the plugin. Just create the thumbnail file or you will have an error message

//Generate a thumbnail in upload dir under png format
	public function generateThumbnail()
	{
	   //set path variable to ease readibility of code
	   $uploadDir = sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_event_photos');

	   //create new thumbnail
		 $thumbnail = new sfThumbnail(100, 100);
		 //get the file the thumbnail will be based on
		 $thumbnail->loadFile($uploadDir.'/'.$this->getPhoto());
		 //save the thumbnail in the indicated directory
		 $thumbnail->save($uploadDir.'/thumbnail/'. $this->getPhoto());
	}

And finally we override the delete() method to erase the files in the directory when “delete” is pressed on the widget we added to our pictures in the form

//overriden to delete the file from the upload/Event-photo folder
	public function delete(Doctrine_Connection $conn = null){
		//delete picture file in the directory
		vac::deleteFile( sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_event_photos') . $this->getPhoto());
		//delete associated thumbnail file in the directory
    vac::deleteFile( sfConfig::get('sf_web_dir') . sfConfig::get('app_dir_event_photos') . 'thumbnail/' . $this->getPhoto());

    //return to normal method
		parent::delete($conn);
	}

I was about to forget the template to display the thumbnail ! Here it is :

// in apps/backend/modules/gallerie/templates/ _show_picture
//dont forget to add php tags...
foreach ($event->getPictures() as $picture):
  if ($picture->getIsVisible()):
    echo image_tag(sfConfig::get('app_dir_event_photos').'thumbnail/'.$picture->getPhoto() );
  endif;
endforeach;

And that’s it ! Hope this has been useful. A few methods are not explained (slugify or delete) but you will find equivalent easily on the net.

Introduction

A couple of weeks ago I was asked to write a web service that needed to provide a single operation (method) that allowed the user to upload a file using a Secure Sockets Layer (SSL / HTTPS) .

Although they changed their minds and went for a solution using a VPN connection, I still decided to create the web service in case they went back on their decision again.

This article outlines the steps you need to follow in order to create a service to upload a file over HTTPS using WCF. And it’s been quite a while since I wrote my last article for this blog. I figured this would make an interesting topic…

Table Of Contents

• Introduction
• WCF Service Contract
• Service Implementation
• Hosting The Service
• Configuring The Host
• SSL Certificate
• Client Application
• Authenticate The Server
• Authenticate The Client
• Summary
• Download

WCF Service Contract

Let’s start by laying the groundwork for the WCF Service. As stated the service must enable users to upload a file to the web server which hosts it. Thus the resulting service contract only contains one method, aptly named Upload(…).

Start by opening up Visual Studio 2008 and create a new blank solution called WcfOverHttps. Next add a new WCF Service Library titled CGeers.Wcf.Services. This class library contains some automatically generated files (IService1.cs, Service.cs, App.config). Rename the IService.cs file to IFileUploadService.cs.

Figure 1 – Solution Explorer

The code for the service contract is displayed in Listing 1:

Listing 1 – Service Contract

[ServiceContract(Namespace = "http://cgeers.wordpress.com/wcf/services")]
public interface IFileUploadService
{
    [OperationContract]
    FileReceivedInfo Upload(FileInfo fileInfo);
}

As you can see displayed in Figure 1 and Listing 1 above they mention two other classes, namely:

1. FileInfo
2. FileReceivedInfo

These classes are both decorated with the MessageContract attribute. To upload the file I opted to use streaming. WCF stipulates that the parameter that holds the data to be streamed must be the only parameter in the method.

You could opt to change the type of the fileInfo parameter to Stream, but then you cannot send any additional information about the file along with it. You can circumvent this issue by creating a new class which contains all of the information you want to transmit. By decorating this class with the MessageContract attribute you can use this class (or message) as a parameter or return type in your service operations.

The FileInfo class specifies the structure of a SOAP envelope for a particular message.

Listing 2 – FileInfo class

[MessageContract]
public class FileInfo
{
    [MessageHeader(MustUnderstand = true)]
    public string FileName { get; set; }

    [MessageHeader(MustUnderstand = true)]
    public long Length { get; set; }

    [MessageBodyMember(Order = 1)]
    public Stream Stream { get; set; }
}

As you can see in Listing 2 the FileInfo class contains three properties. Apart from the actual file (Stream property) the filename and length of the file are also provided.

By applying the MessageHeader attribute to the FileName and Length propery you place this information in the header of the SOAP message. When streaming a file the body of the SOAP message must only contain the actual file itself. By applying the MessageBodyMember attribute to the Stream property you place it in the body of the SOAP message.

If your service operation contains a parameter of a type which has been decorated with the MessageContract attribute then all of the parameters and the return type used in this operation must be of a type to which this attribute has been applied.

You cannot mix parameters of a primitive type with message contracts. For instance if you want the Upload(…) method to return a boolean indicating if the upload succeeded or failed then you have to wrap this in another message contract.

Listing 3 displays how to setup the return value as a message contract. Apart from the boolean value (body) the header of this SOAP message contains the filename of the uploaded file and an optional message property which contains some information about why the upload failed.

Listing 3 – FileReceivedInfo class

[MessageContract]
public class FileReceivedInfo
{
    [MessageHeader(MustUnderstand = true)]
    public string FileName { get; set; }

    [MessageHeader(MustUnderstand = true)]
    public string Message { get; set; }

    [MessageBodyMember(Order = 1)]
    public bool UploadSucceeded { get; set; }
}

If you try to mix message contracts and parameters of a primitive type you’ll receive the following error message:

System.InvalidOperationException: The operation ‘Method’ could not be loaded because it has a parameter or return type of type System.ServiceModel.Channels.Message or a type that has MessageContractAttribute and other parameters of different types. When using System.ServiceModel.Channels.Message or types with MessageContractAttribute, the method must not use any other types of parameters.

Top of page

Service Implementation

Now that the contract for the service has been established it’s time to provide an actual implementation for it.

Start by renaming the Service1.cs file to FileUploadService.cs and add a reference to the System.Configuration assembly.

Listing 4 displays the code for implementing the service. The code is pretty straightforward. Check out the comments in the code for more explanation. Basically it reads the incoming stream and saves it to a file using familiar .NET code.

The Upload(…) method’s return type is of the FileReceivedInfo type. If the upload succeeds the UploadSucceeded property is set to true, if it fails this property is set to false and the message property is populated with the message property of the exception that occured.

Listing 4 – Service Implementation

[ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall,
    ConcurrencyMode = ConcurrencyMode.Single)]
public class FileUploadService : IFileUploadService
{
    #region IFileUploadService Members

    public FileReceivedInfo Upload(FileInfo fileInfo)
    {
        try
        {
            // Determine to which directory the file needs to be uploaded
            string uploadDirectory =
                ConfigurationManager.AppSettings["uploadDirectory"];
            if (String.IsNullOrEmpty(uploadDirectory))
            {
                throw new InvalidOperationException("...");
            }

            // Try to create the upload directory if it does not yet exist
            if (!Directory.Exists(uploadDirectory))
            {
                Directory.CreateDirectory(uploadDirectory);
            }

            // Check if a file with the same filename is already 
            // present in the upload directory. If this is the case 
            // then delete this file
            string path = Path.Combine(uploadDirectory, fileInfo.FileName);
            if (File.Exists(path))
            {
                // Check if the file is read-only
                if ((File.GetAttributes(path) & FileAttributes.ReadOnly) ==
                    FileAttributes.ReadOnly)
                {
                    File.SetAttributes(path, FileAttributes.Normal);
                }
                File.Delete(path);
            }

            // Read the incoming stream and save it to file
            const int bufferSize = 2048;
            byte[] buffer = new byte[bufferSize];
            using (FileStream outputStream = new FileStream(path,
                FileMode.Create, FileAccess.Write))
            {
                int bytesRead = fileInfo.Stream.Read(buffer, 0, bufferSize);
                while (bytesRead > 0)
                {
                    outputStream.Write(buffer, 0, bytesRead);
                    bytesRead = fileInfo.Stream.Read(buffer, 0, bufferSize);
                }
                outputStream.Close();
            }
            return new FileReceivedInfo
                       {
                           FileName = fileInfo.FileName,
                           Message = String.Empty,
                           UploadSucceeded = true
                       };
        }
        catch (Exception ex)
        {
            return new FileReceivedInfo
                       {
                           FileName = fileInfo.FileName,
                           Message = ex.Message,
                           UploadSucceeded = false
                       };
        }
    }

    #endregion
}

Top of page

Hosting The Service

Now that the service has been setup it’s time to create a host for it. To keep things simple a console application will do. Add a new Console Application project to your solution named ConsoleHost. Next add references to the System.ServiceModel assembly and the CGeers.Wcf.Services project.

The code for the Main(…) method of the console application is slim and simple. Take a look at Listing 5.

Listing 5 – Hosting the FileUpload service

static void Main(string[] args)
{
    ServiceHost host = new ServiceHost(typeof(FileUploadService));
    host.Open();
    Console.WriteLine("FileUpload Service Host");
    Console.WriteLine("Service Started!");
    foreach (Uri address in host.BaseAddresses)
    {
        Console.WriteLine("Listening on " + address);
    }
    Console.WriteLine("Press any key to close the host...");
    Console.ReadKey();
    host.Close();
}

A new ServiceHost instance is created for the FileUploadService type and the host is then started. But before you launch the console application you still need to configure the service. Instead of doing this through code I opted to do this via an application configuration file. The next section addresses how you can easily configure your service.

Top of page

Configuring The Host

Start by adding an application configuration (App.config) file to the ConsoleHost project. Next specify the directory in which the service should save the incoming files.

Listing 6 – Upload directory

<appSettings>
  <add key="uploadDirectory" value="C:\temp\upload" />
</appSettings>

Now add a node to the configuration file. Within this node three child nodes will be added in order to configure the service. The first such node specifies the service’s behavior.

Listing 7 – Service Behavior

<behaviors>
  <serviceBehaviors>
    <behavior name="FileUploadServiceBehavior">
      <serviceMetadata httpGetEnabled="False" httpsGetEnabled="True" />
      <serviceDebug includeExceptionDetailInFaults="False" />
    </behavior>
  </serviceBehaviors>
</behaviors>

The behavior specifies that the service should not propagate exception details and that it’s metadata should be shared over HTTPS (httpsGetEnabled) instead of HTTP (httpGetEnabled).

Next up is the binding for the service. Since the goal is to use HTTPS the built-in BasicHttpBinding fits the bill. A couple of its properties need to be tweaked to fit the needs of the service, namely:

1. transferMode: Set it to Streamed to enable streaming.
2. messageEncoding: The message encoding is set to MTOM encoding which is a mechanism for transmitting binary attachements with SOAP messages.
3. maxReceivedMessageSize: Set to 64 megabytes to allow large files to be uploaded.
4. maxBufferSize: Set to 64 kilobytes.
5. receiveTimeout: Set to 10 minutes. If the file fails to upload within this time frame an exception will be thrown.

Remark: Configure these settings according to the needs of your application. For my application a maximum of 64 Mb for the file size and 64 KB for the buffer are sufficient.

Listing 8 – The Binding

<bindings>
  <basicHttpBinding>
    <!-- buffer: 64KB; max size: 64MB -->
    <binding name="FileUploadServiceBinding"
             transferMode="Streamed"
             messageEncoding="Mtom"
             maxReceivedMessageSize="67108864" maxBufferSize="65536"
             closeTimeout="00:01:00" openTimeout="00:01:00"
             receiveTimeout="00:10:00" sendTimeout="00:01:00">
      <security mode="Transport">
        <transport clientCredentialType="None" />
      </security>
    </binding>
  </basicHttpBinding>
</bindings>

Last but not least is the configuration for the service itself.

Listing 9: FileUploadService configuration

<services>
  <service behaviorConfiguration="FileUploadServiceBehavior"
    name="CGeers.Wcf.Services.FileUploadService">
    <endpoint address="" binding="basicHttpBinding" contract="CGeers.Wcf.Services.IFileUploadService"
              bindingConfiguration="FileUploadServiceBinding">
      <identity>
        <dns value="localhost" />
      </identity>
    </endpoint>
    <endpoint address="mex" binding="mexHttpsBinding" contract="IMetadataExchange" />
    <host>
      <baseAddresses>
        <add baseAddress="https://127.0.0.1:8741/FileUploadService/" />
      </baseAddresses>
    </host>
  </service>
</services>

The service’s ABC’s are specified and it’s hooked up to the behavior and binding we configured earlier. The address https://127.0.0.1:8741/FileUploadService/ is specified as being the location of the service. As you can see in the service’s binding the security is set to Transport which requires that you provide an HTTPS based address.

Remark: Note that for the metadata exchange (mex) the mexHttpsBinding is specified and not the default mexHttpBinding.

If you run the ConsoleHost project now you receive the following result:

Figure 2 – ConsoleHost

Top of page

SSL Certificate

If you run the ConsoleHost project now and enter the address https://127.0.0.1:8741/FileUploadService/ in a browser you’ll receive an error. Before you can proceed , you need to bind an SSL Certificate to port 8741 for the IP address 127.0.0.1.

First you need to create an SSL certificate. You can do this using the makecert.exe command-line utility. Just start a new Visual Studio command prompt and enter the following command in order to create a X509 certificate which will be used for SSL communication on the localhost (127.0.0.1).

makecert.exe -sr LocalMachine -ss My -n CN=127.0.0.1 -sky exchange -sk -pe

After this command is executed, the new certificate with the private key is created and stored in the LocalMachine Personal store. To see it, use the MMC-certificate snap-in.

After executing this command your new certificate is created and stored in the LocalMachine Personal store. Open the MMC-certificate snap-in to see it.

1. Click Start, Run and enter the command “mmc”
2. Click OK to start the MMC console
3. Click File | Add/Remove snap-in…
4. In the resulting dialog that pops up click the Add option and choose the Certificates snap-in
5. Confirm your changes by closing the dialog windows

Afterwards you can view you new certificate in the MMC console as displayed in Figure 3.

Figure 3 – MMC Console Certificates snap-in

Next you need to bind this new certificate to the port 8741. Return to the Visual Studio command prompt and enter the following command to do so:

httpcfg.exe set ssl -i 127.0.0.1:8741 -h cfdf5d1140b94614d047dd77c7bd4d4d4422e1c9 -Personal

Replace the “cfdf5d1140b94614d047dd77c7bd4d4d4422e1c9″ value with the thumbprint of your own certificate. You can retrieve the thumbprint using the Certificates MMC snap-in as shown in Figure 3. Be sure to remove all the spaces.

If you rerun the ConsoleHost application after creating the certificate and binding it to 127.0.0.1:8741 you should receive the standard WCF service test page after entering the address https://127.0.0.1:8741/FileUploadService/ in a browser.

Figure 4 – FileUploadService

Top of page

Client Application

Voila, now that the file upload service is ready we can begin to consume it. Let’s test this…

Add a new console application project named ConsoleClient to your solution. Next add a reference to the System.ServiceModel assembly. When done start the ConsoleHost application in non-debug mode. We need to add a reference to this service to the client application. For this the service needs to be up and running.

Right click on the ConsoleClient project within the Solution Explorer and choose “Add Service Reference…”. The Add Service Reference dialog is displayed. Enter the address of the service (https://127.0.0.1:8741/FileUploadService/) in the address field and click Go. The SSL certificate will be presented to the calling application (= Visual Studio). You’ll be prompted to accept the certificate. Click Yes to proceed.

Figure 5 – SSL Certificate Security Alert In Visual Studio 2008

Rename the namespace ServiceReference1 to ServiceReferences and click Advanced. The Service Reference Settings dialog is shown. Make sure that the option “Always generate message contracts” is checked. Click OK to close this dialog. Click OK once more to let Visual Studio add the service reference and generate the necessary proxy classes.

Remark: If you don’t check the option “Always generate message contracts” then the message contract’s properties will appear as individual parameters in the proxy. And for the result type you’ll only get the property that is marked as the body of the SOAP message.

Unchecked the Upload(…) method on the proxy will be generated as such:

Listing 10: Always Generate Message Contracts

bool Upload(string fileName, long length, Stream stream);

instead of

FileReceivedInfo Upload(FileInfo fileInfo);

Once the necessary proxy classes have been generated consuming the service is an easy task. Consider the following code in the Main(…) method of the ConsoleClient application.

Listing 11 – ConsoleClient Application

using (FileUploadServiceClient proxy = new FileUploadServiceClient())
{
    FileStream inputStream = File.Open(@"c:\temp\uploadtest.txt", FileMode.Open);

    ServiceReferences.FileInfo fileInfo =
        new ServiceReferences.FileInfo("uploaded.txt", inputStream.Length, inputStream);
    FileReceivedInfo info = proxy.Upload(fileInfo);
    if (info.UploadSucceeded)
    {
        Console.WriteLine(String.Format("File {0} uploaded", info.FileName));
    }
    else
    {
        Console.WriteLine(String.Format("File {0} upload failed", info.FileName));
        Console.WriteLine(info.Message);
    }
    Console.WriteLine();
    Console.ReadLine();
}

Top of page

Authenticate The Server

Make sure the ConsoleHost application is still running and start the ConsoleClient application for the first time. Upon hitting the line of code that calls the Upload(…) method on the proxy you’ll receive the following error message:

Could not establish trust relationship for the SSL/TLS secure channel with authority ‘127.0.0.1:8741′.

This means that the server (ConsoleHost) presented the SSL certificate to the client application during the handshake and the client did not validate it. Thus a trusted relationship for the SSL/TLS secure channel could not be established.

To solve this problem add the following code to the beginning of the Main(…) method of the ConsoleClient application.

Listing 12 – Validating The Server

ServicePointManager.ServerCertificateValidationCallback += customXertificateValidation;

The code for the customXertificateValidation(…) method is as follows:

private static bool customXertificateValidation(object sender, X509Certificate cert,
    X509Chain chain, SslPolicyErrors error)
{
    X509Certificate2 certificate = (X509Certificate2)cert;
    if (certificate.Subject == "CN=127.0.0.1" && !String.IsNullOrEmpty(certificate.Thumbprint) &&
        certificate.Thumbprint.ToLower() == "cfdf5d1140b94614d047dd77c7bd4d4d4422e1c9")
    {
        return true;
    }
    return false;
}

When the customXertificateValidation(…) method is called (callback) by WCF to validate the server certificate you have the opportunity to inspect the certificate (= cert parameter). In this example the value of the Subject and Thumbprint are checked in order to validate the identity of the server. If they match then the server is authenticated, if not then the SSL connection cannot be established.

Remark: Feel free to adjust the validation of the SSL certificate to suit your own needs.

Upon running the client again after applying these changes you’ll receive the message “File uploaded.txt uploaded”.

Top of page

Authenticate The Client

At this point you could consider your file upload service complete, but one crucial item remains. Namely authenticating the client by the server.

I don’t want anyone who happens to stumble upon my service to be able to upload files to the web server. To block unauthorized users we have to validate the client. Luckily WCF allows you do so without much hassle.

Let’s return to the CGeers.Wcf.Service project for a while. Add a reference to the System.IdentityModel assembly and add a new class called CustomUserNameValidator.

Listing 13 – CustomUserNameValidator

public class CustomUserNameValidator : UserNamePasswordValidator
{
    public override void Validate(string userName, string password)
    {
        if (userName != "Christophe" || password != "WCFRocks!")
        {
            // This throws an informative fault to the client.
            throw new FaultException("Incorrect username or password");
        }
    }
}

This class derives from the UserNamePasswordValidator which can be found in the System.IdentityModel.Selectors namespace. Only one method needs to be overriden, namely the Validate(…) method. Here you need to specify your own custom code in order to validate the provided username and password. Just throw a FaultException if you cannot validate the user.

Next you need to configure the ConsoleHost application so that it uses the CustomUserNameValidator class in order to validate the clients. Open the App.config file of the ConsoleHost application and adjust the following settings:

For the basicHttpBinding set the required clientCredentialType of the transport security to Basic. This requires that the client present the necessary credentials (username & password).

Listing 14 – Adjusting The Binding

...
<security mode="Transport">
  <transport clientCredentialType="Basic" />
</security>
...

Then add the following bit of configuration to the service behavior to tell the service how to validate the client credentials.

Listing 15 – Adjusting The Service Behavior

...
<serviceCredentials>
  <userNameAuthentication
    userNamePasswordValidationMode="Custom"
    customUserNamePasswordValidatorType="CGeers.Wcf.Services.CustomUserNameValidator, CGeers.Wcf.Services" />
</serviceCredentials>
...  

The service is now correctly setup and requires the client to provide the necessary credentials. If you run the ConsoleClient application now you’ll receive the following error message:

The HTTP request is unauthorized with client authentication scheme ‘Anonymous’. The authentication header received from the server was ‘Basic realm=”"‘.

The configuration for the client application needs to reflect the changes we made to the service. Right click on the service reference and choose “Update Service Reference”.

Running the client application again will now result in the following error message:

The HTTP request was forbidden with client authentication scheme ‘Basic’.

You still need to adjust the client application so that it passes the correct credentials to the service. Add the following lines of code to the ConsoleClient’s Main(…) method.

Listing 16 – Client Credentials

...
proxy.ClientCredentials.UserName.UserName = "Christophe";
proxy.ClientCredentials.UserName.Password = "WCFRocks!";
...

That’s it! The client will now present valid credentials to the service and an SSL connection will be established.

Remark: The username and password validation in this article is kept short for illustrative purposes. Replace this with you’re own validation logic in real-world applications. A better approach would be to validate the username and password against a database containing the user’s credentials.

Top of page

Summary

I hope you enjoyed this tutorial on how to transfer files over HTTPS using WCF. To recap what we’ve covered from a developer’s point of view:

• Streaming a file over WCF
• Configuring a WCF service for communication over HTTPS(directories)
• Generating and binding a test SSL certificate to a port
• Consuming a service over HTTPS
• Authenticating the server
• Authenticating the client

Any comments, questions, tips…etc. are always appreciated.

Top of page

Download

You can find the source code for this article on the Download page of this blog.

Top of page

I’m still very new to Symfony 1.2 and its form framework. Reading through documentation, discussion forums and blog posts, I couldn’t find a tutorial which had everything I needed in an image upload. Having finished an image upload for the first time, I decided to write such a tutorial.

This tutorial requires Symfony 1.2, the Doctrine ORM plugin and the PHP GD library. You should already have all of these elements installed, and be familiar with them.

We’ll start at the beginning. I’m going to make an uploader for a background image to attach to a Website model. Make sure you have a field in your model to store the image file name:

Website:
  columns:
    background_image:  string(255)

And rebuild your model:

symfony doctrine:build-all-reload

Now open the form class generated from your schema.

You’re going to add a widget and a validator for the image upload. The widget will also allow the user to view the image after it has been uploaded, and delete it if necessary. The validator will make sure the image upload is not required (it is required by default). There is also a second validator, sfValidatorPass, because the widget we are using adds a checkbox widget giving the user the option to delete the file.

You’ll also override the doSave() method and updateObject() methods. The doSave() method will handle the upload (if there is one), create a new file name for the image, and save the image both to the file system and the background_image field automatically. Since the background_image field is automatically set with the full path of the file, you will use updateObject() to remove the path and just store the file name. If you move your project to another system, the file path will change and so we want to store just the file name.

Also in doSave(), you will handle the case where the user has checked off the “delete image” checkbox, which is automatically named background_image_delete.

Here is the code so far under lib/form/doctrine/WebsiteForm.class.php:

class WebsiteForm extends BaseWebsiteForm
{
  public function configure()
  {
    $this->widgetSchema['background_image'] = new sfWidgetFormInputFileEditable(array(
      'file_src' => '/'.basename(sfConfig::get('sf_upload_dir')).'/'.$this->getObject()->getBackgroundImage(),
      'is_image' => true,
      'edit_mode' => strlen($this->getObject()->getBackgroundImage()) > 0,
      'template'  => '
<div>%file%
%input%
%delete% %delete_label%</div>
'
    ));

    $this->validatorSchema['background_image'] = new sfValidatorFile(array(
      'required' => false,
      'mime_types' => 'web_images'
    ));
    $this->validatorSchema['background_image_delete'] = new sfValidatorPass();
  }

  protected function doSave ( $con = null )
  {
    $upload = $this->getValue('background_image');

    if ( $upload )
    {
      $filename = sha1($upload->getOriginalName().microtime().rand()).$upload->getExtension($upload->getOriginalExtension());
      $filepath = sfConfig::get('sf_upload_dir').'/'.$filename;

      $oldfilepath = sfConfig::get('sf_upload_dir').'/'.$this->getObject()->getBackgroundImage();
      if ( file_exists($oldfilepath) )
      {
        unlink($oldfilepath);
      }

      $upload->save($filepath);
    }

    $delete = $this->getValue('background_image_delete');
    if ( $delete )
    {
      $filename = $this->getObject()->getBackgroundImage();
      $filepath = sfConfig::get('sf_upload_dir').'/'.$filename;
      @unlink($filepath);
      $this->getObject()->setBackgroundImage(null);
    }

    return parent::doSave($con);
  }

  public function updateObject($values = null)
  {
    $object = parent::updateObject($values);
    $object->setBackgroundImage(str_replace(sfConfig::get('sf_upload_dir').'/', '', $object->getBackgroundImage()));
    return $object;
  }

}

This should work well for the most part. But what if the image is 2000 pixels in width? It will be very disruptive to display such a large image.

That’s where sfThumbnailPlugin comes in.

Install the plugin if you haven’t already done so:

$ symfony plugin:install sfThumbnailPlugin
$ php symfony cc

Now create a new directory to store your thumbnails:

$ mkdir /web/uploads/thumbnails

You’ll probably want to use this directory in other modules or applications in your project. Add a new setting called sf_thumbnail_dir in your project configuration:

config/ProjectConfiguration.class.php

...
class ProjectConfiguration extends sfProjectConfiguration
{
  public function setup()
  {
    ...
    sfConfig::set('sf_thumbnail_dir', sfConfig::get('sf_upload_dir').'/thumbnails');
    ...
  }
}

Now all that’s left to do is create and store the thumbnail from the doSave() method of your form class, and make sure that your form displays the thumbnail and not the source image in your configure() method.

Modify the widget settings so that it displays the thumbnail. Note that I’ve …’d most of the parts that don’t change:

lib/form/doctrine/WebsiteForm.class.php

class WebsiteForm extends BaseWebsiteForm
{
  public function configure()
  {
    ...
    $this->widgetSchema['background_image'] = new sfWidgetFormInputFileEditable(array(
      'file_src' => '/'.basename(sfConfig::get('sf_upload_dir')).'/'.basename(sfConfig::get('sf_thumbnail_dir')).'/'.$this->getObject()->getBackgroundImage(),
      'is_image' => true,
      'edit_mode' => strlen($this->getObject()->getBackgroundImage()) > 0,
      'template'  => '
<div>%file%
%input%
%delete% %delete_label%</div>
'
    ));
    ...
  }

  protected function doSave ( $con = null )
  {
    $upload = $this->getValue('background_image');

    if ( $upload )
    {
      ...
      $thumbnailpath = sfConfig::get('sf_thumbnail_dir').'/'.$filename;
      ...
      $oldthumbnailpath = sfConfig::get('sf_thumbnail_dir').'/'.$this->getObject()->getBackgroundImage();
      if ( file_exists($oldthumbnailpath) )
      {
        unlink($oldthumbnailpath);
      }

      ...
      $thumbnail = new sfThumbnail(150, 150, true, true, 75, 'sfGDAdapter');
      $thumbnail->loadFile($filepath);
      $thumbnail->save($thumbnailpath);
    }

    $delete = $this->getValue('background_image_delete');

    if ( $delete )
    {
      ...
      $thumbnailpath = sfConfig::get('sf_thumbnail_dir').'/'.$filename;
      @unlink($thumbnailpath);
      ...
    }
  }

  ...

}

And that’s all there is to it. Note that there is no template file here because the form framework handles the view of the form inputs.

Questions? Complaints? Leave a comment.

Here are some related resources:

• sfWidgetFormInputFileEditable documentation
• sfValidatorFile documentation
• sfThumbnailPlugin readme

Here are some other posts you might be interested in:

• Adding to the sfDoctrineGuardPlugin
• How to secure FCKEditor against unauthorized access in a Symfony application
• Table-level behaviors will remove global behaviors in Doctrine schemas

Kewlshare.com  is a provider of images, audio,video, docs, pdf, zip or any other type files …
You can upload any document without restrictions.

Apart from download, you can watch or listen online  any file you upload to your account. A unique link will be provide to every uploaded file, which can be shared via e-mail, Website, Blog, forums, My Space, Face book etc with your friends for free download.

You can upload photos, audio, video, documents or anything else are maximum file size is 500 MB. You will get money when some one downloads your file from kewlshare links.

Your paments send via PayPal.You will get the payment with in 12 to 20 business

Click here to Register Kewlshare…

I love Central Desktop’s “Drag n Drop” upload capability. It is probably the one feature I use more than any other on a consistent basis. If I need to upload a batch of files to a folder, it never fails me. But the Drag n Drop is only good for uploading files in bulk, right? Not neceissarily, if you know how to tweak a URL or two, you can upload files quickly and easily to any folder you specify and even tag them at the same time.

I have two methods, today, for getting more out of CD’s Drag n Drop upload tool. Both are designed to be used in repeatable circumstances, and thus aren’t appropriate for one-off tasks. (A little disclaimer here, I work almost exclusively in Firefox on a Windows XP box.  I have a MacBook for personal use, and most of the techniques I describe on this site work on both. Your mileage may vary from OS to OS.)

First up, the sidebar upload box. One great thing about the DND zone is that you don’t need the popup window to upload. You can embed the zone in a wiki page, open it up in a new tab in your browser, or summon it as a bookmark in Firefox’s sidebar. But to get there, we need to learn a little bit more about the DND zone and how it works.

(A little disclaimer here, I work almost exclusively in Firefox on a Windows XP box.  I have a MacBook for personal use, and most of the techniques I describe on this site work on both. Your mileage may vary from OS to OS.)

Each DND zone has its own URL. Here’s a sample: https://YOURDOMAIN.centraldesktop.com/spaces/javaupload?upload_type=std&spid=93938&spacename=AlanSandbox&cat=719544&dbid=&catname=Jones%20Account&tag=  To get this URL I just summoned a DND zone from the workspace and folder I wanted to upload to, then double clicked on the padlock icon at the bottom of the new window. Then, by navigating to the “General” tab, I can see my URL.

Where to find DND zone URL

Now let’s parse this URL.

https://YOURDOMAIN.centraldesktop.com/spaces/javaupload?upload_type=std  This starts off the URL, nothing to tweak here.

&spid=93938&spacename=AlanSandbox  Here’s your workspace id (spid) and workspace name. The workspace name parameter only affects the workspace name as displayed in the DND zone

&dbid=  Database ID. (We’ll look at this later)

&catname=Jones%20Account  Folder name (be sure to use the “%20″ in lieu of spaces.)

&tag=  Yes, you can use the DND zone to upload with tags. (I love this part.)

So now what do we do with all of this? Here’s how I use it. Every week I have several reports to upload for each account. And each report has to be tagged with a certain tag. Now I can go to the Jones Account folder, hit the “Single File Upload” link, navigate to the file I need, select it, choose my tags (double check that I have the right tag) and then upload it. Or, I can use a custom URL to create a bookmark that loads in the sidebar. I don’t even have to be in the Jones Account folder to upload the file.

So I just add in the appropriate tags and get “https://YOURDOMAIN.centraldesktop.com/spaces/javaupload?upload_type=std&spid=93938&spacename=AlanSandbox&cat=719544&dbid=&catname=Jones%20Account&tag=TPSReports” Paste that URL into a new bookmark, and set it to open in the sidebar.

The finished product

The second technique is for database records. I’m always uploading files to database records, and the easiest way to for me to upload files is via the DND zone. So to save a few minutes each time, I had a new file to upload to a database.

I employed the technique above, and combined it with a previous tip on creating Firefox Quick Search Shortcuts, and have put them together to save a ton of time.

First, I navigated to a database record in the database I want to use. Any record will do, we’re more interested in things like database id and workspace id right now.

https://YOURDOMAIN.centraldesktop.com/spaces/javaupload?upload_type=db&spid=93938&spacename=AlanSandbox&cat=-4&dbid=93938_9686884qkol8s98ap0kzg96kvs9ifbpg|2|9686884qkol8s98ap0kzg96kvs9ifbpg&catname=Attachments&tag=

Again, we’ll add any tags we want, and, if we want, populate the catname parameter with a folder name.

The number between the pipes (|) is the record ID. We want this to be our input parameter, so we use Firefox’s search shortcut %s in place of the record ID, and we end up with a URL that looks like: https://YOURDOMAIN.centraldesktop.com/spaces/javaupload?upload_type=db&spid=93938&spacename=AlanSandbox&cat=-4&dbid=93938_9686884qkol8s98ap0kzg96kvs9ifbpg|%s|9686884qkol8s98ap0kzg96kvs9ifbpg&catname=Attachments&tag=tpscoversheet

Now we just use that newly created URL to create a Quick Search with a keyword of your choice, like “tpscvr”

To use this trick, just type in tpscvr <record id> into the address bar, and a DND zone will open up for you.

Check server-side MIME type of uploaded files

The PHP form variable $_FILES['file']['type'] does not return correct mime type, so we have to use some php functions like…….
> finfo_file()
> getimagesize()
> exif_imagetype()

if(version_compare(substr(PHP_VERSION,0,1),5) == -1)
{
$san	= finfo_open(FILEINFO_MIME);
$mime	= finfo_file($san,$FileName);
$tmpvar = explode(";", $mime);
finfo_close($san);
if($mime == "image/jpeg")
{
echo "this is jpeg";
}
else
{
echo "this is not jpeg";
}
}

One can use getID3 [http://getid3.sourceforge.net/] classes to get mime type other than images….

Don’t upload to a web accessible directory

Protect your directory to execute perticular file type by putting a .htacces file in directory

AddType text/plain .php .js .cgi

more help here:

http://www.askapache.com/htaccess/mod_rewrite-tips-and-tricks.html

Check server-side MIME type of uploaded files

The PHP form variable $_FILES['file']['type'] does not return correct mime type, so we have to use some php functions like…….
> finfo_file()
> getimagesize()
> exif_imagetype()

if(version_compare(substr(PHP_VERSION,0,1),5) == -1)
{
$san	= finfo_open(FILEINFO_MIME);
$mime	= finfo_file($san,$FileName);
$tmpvar = explode(";", $mime);
finfo_close($san);
if($mime == "image/jpeg")
{
echo "this is jpeg";
}
else
{
echo "this is not jpeg";
}
}

One can use getID3 [http://getid3.sourceforge.net/] classes to get mime type other than images….

Don’t upload to a web accessible directory

Protect your directory to execute perticular file type by putting a .htacces file in directory

AddType text/plain .php .js .cgi

more help here:

http://www.askapache.com/htaccess/mod_rewrite-tips-and-tricks.html

Today i am going to explain about a interesting problem, that i faced during the course of my project development.

I was trying to do a file upload using jsp from a client to  server. For this when i searched the net, i got many code, at last i managed to edit one such code and customized it to my requirement. Here is the below code snippet of the form, which is used to upload a file.

File Name: FileUploadForm.jsp

<FORM ENCTYPE=”multipart/form-data” METHOD=”post” name=”main” action=”FileUploadAction.jsp”>
<br>
<tr>
<td align=”right”><b>Choose the file To Upload:</b></td>
<td><INPUT NAME=”F1″ TYPE=”file”></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<INPUT TYPE=”button” VALUE=”Upload” onclick=uploadFile()>
</td>
</tr>
</FORM>

Below scriplet is the code of other file which does the file upload action to the server

File Name: FileUploadAction.jsp
<%
//to get the content type information from JSP Request Header
String contentType = request.getContentType();
//here we are checking the content type is not equal to Null and as well as the passed data from mulitpart/form-data is greater than or equal to 0
if ((contentType != null) && (contentType.indexOf(“multipart/form-data”) >= 0)) {
DataInputStream in = new DataInputStream(request.getInputStream());
//we are taking the length of Content type data
int formDataLength = request.getContentLength();
byte dataBytes[] = new byte[formDataLength];
int byteRead = 0;
int totalBytesRead = 0;
//this loop converting the uploaded file into byte code
while (totalBytesRead < formDataLength) {
byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
totalBytesRead += byteRead;
}
String file = new String(dataBytes);
//for saving the file name
String saveFile = file.substring(file.indexOf(“filename=\”") + 10);
saveFile = saveFile.substring(0, saveFile.indexOf(“\n”));
saveFile = saveFile.substring(saveFile.lastIndexOf(“\\”) + 1,saveFile.indexOf(“\”"));

String timestamp = new SimpleDateFormat(“yyyy.MM.dd.HH.mm.ss.S.”).format(new Date());
saveFile = userId+timestamp+saveFile;
int lastIndex = contentType.lastIndexOf(“=”);
String boundary = contentType.substring(lastIndex + 1,contentType.length());
int pos;
//extracting the index of file
pos = file.indexOf(“filename=\”");
pos = file.indexOf(“\n”, pos) + 1;
pos = file.indexOf(“\n”, pos) + 1;
pos = file.indexOf(“\n”, pos) + 1;

int boundaryLocation = file.indexOf(boundary, pos) – 4;
int startPos = ((file.substring(0, pos)).getBytes()).length;
int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;

// creating a new file with the same name and writing the content in new file
String fileName = request.getRealPath(“”)+”\\excelFiles\\”+saveFile;
FileOutputStream fileOut = new FileOutputStream(fileName);
fileOut.write(dataBytes, startPos, (endPos – startPos));
fileOut.flush();
fileOut.close();

%>

But there is a serious problem in the above code, it works fine in the windows, whereas in linux machines this code fails. When i went through the everyline of the code, the line of code which gives different output in linux is,

String file = new String(dataBytes);
The above line is used to convert the file data in bytes to String. The reason we are doing is to find the boundary location of the file, now lets dont go deep in to this, this is more about file parsing formats. You can read the RFC which explains about the formats and parsing the file data from a HTML. But the strange that i could see in the above line is for the same file uploaded the String variable file length varies in windows server and linux server. I am not able to imaging the reason behind this.

After a long fight with the code and searching in the internet, i happen to see the apache commons api’s. This api is really cool and interesting. It does all the things that is required for parsing and reduces our load. FileUploadForm.jsp can be used the same. But i changes the code of FileUploadAction.jsp. Below is the code

File Name: FileUploadAction.jsp

<%@ page import=”java.text.SimpleDateFormat” %>
<%@ page import=”org.apache.commons.fileupload.FileItem” %>
<%@ page import=”org.apache.commons.fileupload.FileUploadException” %>
<%@ page import=”org.apache.commons.fileupload.disk.DiskFileItemFactory” %>
<%@ page import=”org.apache.commons.fileupload.servlet.ServletFileUpload” %>

<%@ page import=”java.io.*” %>
<%@ page import=”java.util.*” %>
<%

if (ServletFileUpload.isMultipartContent(request)){
ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
List fileItemsList = null;
try {
fileItemsList = servletFileUpload.parseRequest(request);
} catch (FileUploadException e) {
System.err.println(“inside uploadUpdateACtion while parsing Exception is ["+e.getMessage()+"]“);
}

Iterator i = fileItemsList.iterator();
//String comment = ((FileItem)i.next()).getString();
FileItem fi = (FileItem)i.next();
// filename on the client
String fileName = fi.getName();

fileName = fileName.substring(fileName.lastIndexOf(“\\”)+1);

String timestamp = new SimpleDateFormat(“yyyy.MM.dd.HH.mm.ss.S.”).format(new Date());
String saveFile = userId+timestamp+fileName;
// write the file
try {
fi.write(new File(request.getRealPath(“”)+”/excelFiles”, saveFile));
} catch (Exception e) {
System.err.println(“inside uploadUpdateACtion while writing the uploded file Exception is ["+e.getMessage()+"]“);
}

%>

For the above code to work we need two jars to be included in the classpath commons-fileupload-1.2.1.jar and commons-io-1.4.jar. Both the jars are available in the apache site. This code will work for all environments and platforms. It has lot of features to be explored by me.
Thanks for reading, Have a great day !!!!!!!!!!!!!!!!!!!!!!!!!!!

-Sudan

There are different ways you can add documents to a doc library or to list item as an attachment. You could use object model, built-in web service, custom web service that uses object model, or HTTP PUT method.

In this post I will be stepping through them in detail. Let us take the object model approach first. For the sake of simplicity I have created a simple windows forms app that will push documents in to the document library and list

Adding documents to a Document Library and updating document attributes :

   1: private void button1_Click(object sender, EventArgs e)

   2:         {

   3:             if (openFileDialog1.ShowDialog() == DialogResult.OK)

   4:             {

   5:                 try

   6:                 {

   7:                     FileStream myStream;

   8:                     string fullName;

   9:                     if ((myStream = (FileStream)openFileDialog1.OpenFile()) != null)

  10:                     {

  11:                         fullName = openFileDialog1.FileName;

  12:                         FileInfo myFileInfo = new FileInfo(fullName);

  13:                         using (myStream)

  14:                         {

  15:                             using (SPSite oSite = new SPSite("http://vslearnmoss/sites/FileUpload"))

  16:                             {

  17:                                 using (SPWeb oWeb = oSite.OpenWeb())

  18:                                 {

  19:                                     SPFolderCollection oFolders = oWeb.GetFolder("MyDocuments").SubFolders;

  20:                                     SPFolder oFolder = oFolders["Folder1"];

  21:                                     SPFileCollection oFileColl = oFolder.Files;

  22:                                     Hashtable oDocAttribs = new Hashtable { { "Field1", "Value1" }, { "Field2", "Value2" } };

  23:                                     SPFile oFile = oFileColl.Add(myFileInfo.Name, myStream, oDocAttribs, true);

  24:                                 }

  25:                             }

  26:  

  27:                         }

  28:                     }

  29:                 }

  30:                 catch (Exception ex)

  31:                 {

  32:                     MessageBox.Show("Error: " + ex.Message);

  33:                 }

  34:             }

  35:  

  36:         }

Adding document attachments to a list item  :

   1: private void button1_Click(object sender, EventArgs e)

   2:         {

   3:             if (openFileDialog1.ShowDialog() == DialogResult.OK)

   4:             {

   5:                 try

   6:                 {                    

   7:                     string fullName;

   8:                     fullName = openFileDialog1.FileName;

   9:                     FileInfo myFileInfo = new FileInfo(fullName);

  10:                     byte[] fileData = System.IO.File.ReadAllBytes(fullName);

  11:  

  12:                     using (SPSite oSite = new SPSite("http://vslearnmoss/sites/FileUpload"))

  13:                     {

  14:                         using (SPWeb oWeb = oSite.OpenWeb())

  15:                         {

  16:                             SPList oList = oWeb.Lists["MyList"];

  17:                             SPQuery oQuery = new SPQuery { Query = "0" };

  18:                             SPListItem oItem = oList.GetItems(oQuery).Add();

  19:                             oItem["Title"] = textBox1.Text;

  20:                             SPAttachmentCollection attachments = oItem.Attachments;

  21:                             attachments.Add(myFileInfo.Name, fileData);

  22:                             oItem.Update();

  23:                         }

  24:                     }

  25:                 }

  26:                 catch (Exception ex)

  27:                 {

  28:                     MessageBox.Show("Error: " + ex.Message);

  29:                 }

  30:  

  31:             }

  32:         }

One thing to note when accessing the list for creating a new list item is to be mindful that when SPList.Items.Add is called it fetches all the items before creating a new item, one way to avoid is to make a blank query that fetches zero results and add a new list item to the collection. [Thanks to Rob Garret]

SPQuery oQuery = new SPQuery { Query = "0" };

SPListItem oItem = oList.GetItems(oQuery).Add();

You can look for more info about adding list item efficiently in this article by Rob Garret.

In the next part of this article, I will show you how to utilize web services or HTTP PUT method to push documents into the SharePoint document library.