[javascript] Universal Viewer를 활용한 웹 기반의 파일 탐색기 기능

30 Nov 2023

javascript

개요

본 글에서는 Universal Viewer를 이용하여 웹 기반의 파일 탐색기 기능을 구현하는 방법을 소개합니다. Universal Viewer는 다양한 파일 형식을 지원하며, 웹 브라우저에서 이들 파일을 편리하게 볼 수 있도록 해주는 라이브러리입니다. 이를 이용하여 파일 탐색기의 기능을 구현할 수 있습니다.

Universal Viewer란?

Universal Viewer는 웹 브라우저에서 다양한 파일 형식을 지원하기 위해 개발된 라이브러리입니다. 이미지, 동영상, 문서 등 다양한 형식의 파일을 편리하게 뷰할 수 있으며, 확대, 축소, 회전 등의 기능도 제공합니다. Universal Viewer는 개발자들이 웹 기반의 파일 뷰어를 구현하기 위해 사용되는 많은 기능과 도구들을 포함하고 있습니다.

웹 기반의 파일 탐색기 구현하기

Universal Viewer를 이용하여 웹 기반의 파일 탐색기를 구현하는 방법은 다음과 같습니다.

Universal Viewer 라이브러리를 다운로드하고 웹 페이지에 추가합니다.

<script src="universal-viewer.js"></script>

웹 페이지에 파일 탐색기의 UI를 구성합니다. 일반적으로 폴더와 파일 목록을 보여주는 트리 구조가 사용됩니다.

<div id="file-browser">
  <ul>
    <li>폴더 1
      <ul>
        <li>파일 1</li>
        <li>파일 2</li>
      </ul>
    </li>
    <li>폴더 2
      <ul>
        <li>파일 3</li>
        <li>파일 4</li>
      </ul>
    </li>
  </ul>
</div>

파일을 선택했을 때 해당 파일을 Universal Viewer로 로드하도록 합니다. 이를 위해 파일의 경로를 파라미터로 전달하여 Universal Viewer를 초기화합니다.

var fileBrowser = document.getElementById('file-browser');
var files = fileBrowser.getElementsByTagName('li');

for (var i = 0; i < files.length; i++) {
  files[i].addEventListener('click', function() {
    var filePath = this.innerText;
    var viewerOptions = {
      url: filePath
    };

    var viewer = new UniversalViewer(viewerOptions);
    viewer.init();
  });
}

이제 웹 페이지에서 파일 탐색기를 사용할 수 있습니다. 사용자가 파일을 선택하면 해당 파일이 Universal Viewer로 로드되어 뷰어에서 볼 수 있게 됩니다.

마무리

Universal Viewer를 활용하여 웹 기반의 파일 탐색기 기능을 구현하는 방법을 알아보았습니다. Universal Viewer는 다양한 파일 형식에 대한 지원과 풍부한 기능을 제공하기 때문에 파일 뷰어 구현 시 유용하게 사용될 수 있습니다.

누구나 다양한 파일 형식을 웹 브라우저에서 손쉽게 볼 수 있는 파일 탐색기를 개발하고자 한다면, Universal Viewer를 고려해보는 것을 추천합니다.

개요

Universal Viewer란?

웹 기반의 파일 탐색기 구현하기

마무리

참고 자료