태그 보관물: FileReference

Image Editor revised.

2008년 플래시 액션스크립트 카페 컨퍼런스를 위해서 만들었던 이미지 에디터를 업데이트 했습니다.

플래시 플레이어 10에서 지원된 FileReference 객체를 통한 로컬 파일 불러오기와 저장하기를 적용하였습니다. 이미지를 서버로 전송했다가 다시 다운로드 하는 등 서버연동 없이, 로컬에서 이미지 로드 및 저장이 가능합니다.
그로인해 이미지 저장 후 다운로드 할 때 에러가 발생하는 보안문제도 한꺼번에 해결이 되네요.

Download Image Editor V2 source code.

Downloader alpha version.

2005년에 만들었던 Multiple File Downloader를 AIR 1.5 버전으로 다시 만들었습니다. 이전 버전은 FileReference API를 이용하여 파일을 다운로드하기 때문에, 각각의 파일들에 대해서 저장하기 대화상자가 나타나는 문제가 있었죠. 새 버전에서는 File 및 FileStream API를 이용하여 귀찮은 대화상자를 표시하지 않고 바로 저장을 해 줍니다.

아직은 알파버전 이라서, 에러 및 예외처리 등의 기능이 빠져 있습니다.

downloader

Click here to download.

Flash Player에서 동작하는 ‘로컬 파일 읽고 쓰기’

Adobe RIA 공식사이트에 4월 27일자로 연재된, 플래시 플레이어 10에서 FileReference 객체를 통한 로컬 파일 읽기 및 쓰기 기술문서 입니다.

Flash 8에서 추가된 FileReference 클래스는 사용자의 컴퓨터와 서버 사이에 파일을 업로드하거나 다운로드 할 수 있는 방법을 제공한다. 운영체제의 대화상자를 통해 사용자로 하여금 업로드할 파일 또는 파일을 다운로드 할 위치를 선택하도록 한다. 하나의 FileReference 객체는 사용자 컴퓨터에서 하나의 파일에 대응하며, 해당 파일의 파일명, 크기, 타입 등의 정보를 가지고 있다.

그러나 보안상의 문제로 인해서, 선택된 파일에 대한 로컬 컴퓨터 상의 전체 파일 경로는 제공하지 않는다. 그렇기 때문에 Flash Player에서 FileReference 객체를 사용한다 할지라도 사용자 컴퓨터의 파일을 직접 불러오는 것이 불가능했다. 본 문서는 이런 문제를 해결해주는 Flash CS4와 Flash Player 10의 새로운 기능에 대하여 설명한다.

기술문서 전체 내용을 보려면, Adobe RIA 공식사이트로 고고씽.
http://www.adoberia.co.kr/iwt/board/board.php?tn=pds_tech&id=254&mode=view

User-initiated action requirements in Flash Player 10

플래시 플레이어 10에선, 사용자의 인터랙션(UIA, user-initiated action)이 없이 FileRefernece.browse()나 FileReference.download() 메쏘드를 실행할 수 없습니다. 그런데 플래시에서 ByteArray로 인코딩된 파일을 URLLoader API를 이용하여 업로드 하는 경우에도, 위의 제약사항이 적용됩니다.

그리고 아래 코드와 같이 dispatchEvent()로 우회하는 방법도 더 이상 사용할 수 없습니다.

In Flash Player 10, FileReference.browse() and FileReference.download() methods can not be executed without a user-initiated action(UIA). It applies to URLLoader API, when you encode a file via ByteArray and upload it to a server.

It can not be bypassed with the followind code.

Flash Player 10で、ユーザのアクション(UIA, user-initiated action)無しに、FileReference.browse()やFileReference.download()メソッドを実行出来ません。ところが、ByteArrayを使って生成したファイルを、URLLoader APIでサーバーに伝送する場合も、この制約が適用される。

また、下のコードのように、dispatchEvent()で廻る方法も効かない。

dispatchEvent(new MouseEvent(MouseEvent.CLICK));

Related URL
– Understanding the security changes in Flash Player 10
– User-initiated action requirements in Flash Player 10

Saving an image with AS3 and PHP: 3. ByteArray

The following ActionScript 3 code is used to save GIF image that is encoded using GIFEncoder. I use GIFEncoder, distributed via ByteArray.org, to encode GIF files.
다음은 GIFEncoder를 이용하여 인코딩한 GIF 파일을 저장하는 액션스크립트3 코드입니다. GIF 파일을 인코딩하기 위해서, ByteArray.org에서 배포하는 GIFEncoder를 사용하였습니다.
これはGIFEncoderを使用してGIFファイルを保存するActionScript3のコードです。GIFファイルをエンコードするために、ByteArray.comで配布されているGIFEncoderを使いました。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Imports the GIFEndocer class by Thibault Imbert.
// You can download it from ByteArray.org.
import org.gif.encoder.GIFEncoder;
 
var serverPath:String = "/";
 
// Initializes GIFEncoder
var myGIFEncoder:GIFEncoder = new GIFEncoder();
myGIFEncoder.setRepeat(0);
myGIFEncoder.setDelay (300);
 
// Initializes an URLLoader object to upload a file stream.
var ul:URLLoader = new URLLoader();
ul.addEventListener(Event.COMPLETE, saveDone);
 
var urh:URLRequestHeader = new URLRequestHeader("Accept","image/gif");
var BOUNDARY:String = "---------------------------7d76d1b56035e";
 
/**
 * Starts the gif encoding when clicks on the stage.
 */
stage.addEventListener(MouseEvent.CLICK, generateGIF);
function generateGIF(evt:MouseEvent):void{
 
	// Starts the gif encoder.
	myGIFEncoder.start();
 
	// Add frame.
	var bd:BitmapData = new BitmapData(100, 100, false, Math.round(0xFFFFFF*Math.random()));
	myGIFEncoder.addFrame(bd);
 
	// Finishes the gif encoder.
	myGIFEncoder.finish();
 
	// Starts the upload process.
	uploadGIF();
 
}// end generateGIF
 
/**
 * Generates a file stream and upload it.
 */
function uploadGIF():void{
 
	// Retrieves the file stream from the GIF Encoder.
	var myGIFStream:ByteArray = myGIFEncoder.stream;
	var filename:String = "test.gif";
 
	// Creates the file header.
	var formData:String  =  "--" + BOUNDARY + '\r\nContent-Disposition: form-data; name="Filedata"; filename="' + filename + '"\r\nContent-Type: application/octet-stream\r\n\r\n';
	var formData2:String = "\r\n";
	formData2 += "--" + BOUNDARY + '\r\nContent-Disposition: form-data; name="Filedata"\r\n\r\nSubmit Query\r\n';
	formData2 += "--" + BOUNDARY + '--';
 
 
	// Conbines the header and the file stream.
	var dataArray:ByteArray = new ByteArray();
	dataArray.writeMultiByte(formData,"ascii");
	for(var k:uint=0; k<myGIFStream.length; k++){
		dataArray.writeByte(myGIFStream[k]);
	}	
	dataArray.writeMultiByte(formData2,"ascii");
 
	// Initializes an URLRequest object
	var ur:URLRequest = new URLRequest();
	ur.requestHeaders.push(urh);
	ur.method = URLRequestMethod.POST;
	ur.contentType = "multipart/form-data; boundary=" + BOUNDARY;
	ur.url = serverPath + "test/uploadok.php";
	ur.data = dataArray;
 
	ul.load(ur);
 
}// end uploadGIF
 
/**
 * Executes when a file upload is finished.
 */
function saveDone(evt:Event):void{
	var str:String = evt.target.data;
	trace(str);
}// end saveDone
Special thanks to Kim Eung. He devised the draft of the PHP and AS3 codes. Furthermore, he allowed me to open them to the public.
이 PHP와 AS3 코드의 기틀을 만들고, 이 소스를 공개하는데 흔쾌히 동의하신, 김응 실장님에게 진심으로 감사드립니다.