redgoose file uploader

redgoose file uploader

textarea & image elements

textarea나 다른 영역이나 에디터에다 파일 정보를 삽입할 수 있습니다.
이 예제는 파일 목록의 `본문삽입`버튼을 누르면 textarea에는 파일이름, 이미지 영역에는 이미지태그가 들어갑니다. (이미지영역의 이미지는 css로 사이즈를 작게 조절하도록 하겠습니다.)

textarea

image area

File upload

아래 업로드 버튼을 눌러서 파일을 추가하거나 이 영역에 파일을 드래그하여 추가합니다.

    var plug_editor = new RG_Uploader.core(document.getElementById('comp_editor'), {
    	queue : {
    		datas : 'data.json',
    		buttons : [
    			{
    				name : 'open file',
    				iconName : 'open_in_new',
    				className : 'btn-open-file',
    				action : function(app, file) {
    					console.log('action : open file');
    					window.open(file.src);
    				}
    			},
    			{
    				name : 'insert editor',
    				iconName : 'center_focus_strong',
    				className : 'btn-insert-editor',
    				action : function(app, file) {
    					var $textarea = $('#target_textarea');
    					var $figure = $('#target_image');
    					var src = ((/^data:/g).test(file.src)) ? file.name : file.src;
    					$textarea.val($textarea.val() + ' [' + src + ']');
    					$figure.append('<img src="' + file.src + '" alt="' + file.name + '">');
    				}
    			},
    			{
    				name : 'remove queue',
    				iconName : 'close',
    				className : 'btn-remove-queue',
    				action : function(app, file) {
    					app.queue.removeQueue(file.id, false, true);
    				}
    			}
    		]
    	},
    	plugin : [
    		{ name : 'preview', obj : new RG_Uploader.plugins.Preview() },
    		{ name : 'dnd', obj : new RG_Uploader.plugins.DragAndDrop() },
    		{ name : 'sizeInfo', obj : new RG_Uploader.plugins.SizeInfo() },
    		{ name : 'changeQueueStyle', obj : new RG_Uploader.plugins.ChangeQueueStyle() }
    	]
    });