다음을 통해 공유


파일을 공유하는 방법(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

다른 사용자 또는 앱과 파일을 공유할 수 있습니다. 공유 기능을 사용하면 앱에서 동료에게 메일로 파일 보내기, 가족 휴가 사진 공유 등과 같은 작업을 쉽게 지원할 수 있습니다.

파일 공유 등을 지원할 경우 앱에서 파일을 준비하는 데 필요한 시간을 고려해야 합니다. 대부분의 경우 앱은 파일을 바로 준비할 수 있습니다. 이 경우 이 항목의 단계를 수행하면 됩니다. 앱에서 파일을 준비하는 데 추가 작업이 필요한 경우(예: 다른 형식으로 파일 변환) pull 작업을 지원하는 방법을 참조하세요. 이 항목에서는 개발자 앱에서 콘텐츠를 푸시할 필요 없이 대상 앱이 개발자 앱에서 공유 중인 콘텐츠를 끌어올 수 있도록 대리자 함수를 사용하는 방법을 보여 줍니다.

알아야 할 사항

기술

사전 요구 사항

  • Visual Studio 및 관련 템플릿을 잘 알고 있어야 합니다.
  • JavaScript에 대해 잘 알고 있어야 합니다.
  • 파일 및 기타 데이터를 가져오는 방법(예: FileOpenPicker 사용)을 알고 있어야 합니다. 파일 선택기를 사용하여 파일에 액세스에서 자세히 알아볼 수 있습니다.

지침

단계 1: 사용자가 이미지 파일을 선택할 수 있도록 단추 처리기 함수 만들기

다음 단추 처리기 코드를 사용하여 사용자가 이미지 파일을 선택할 수 있습니다. 이 파일은 이 빠른 시작의 나머지 단계에서 사용됩니다.

참고  

다음 코드는 pickSingleFileAsync를 사용합니다. Windows Phone 8.1에서는 pickSingleFileAndContinue를 대신 사용해야 합니다.

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

단계 2: 앱을 공유 소스로 설정

DataTransferManager 개체는 모든 공유 작업의 주요 시작점입니다. 사용자가 공유를 호출하려고 하면 실행되는 DataRequested 이벤트 처리기를 추가합니다. Windows 스토어 앱에서는 사용자가 공유 참 메뉴를 호출하면 자동으로 실행됩니다. Windows Phone용으로 개발하는 경우에는 기본 제공 공유 참 메뉴가 없으므로 사용자가 처리기를 탭하여 트리거하는 컨트롤을 추가해야 합니다.

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);

나머지 단계는 shareStorageItemsHandler 함수를 구현하기 위한 것입니다.

단계 3: DataRequest 개체 가져오기

datarequested 이벤트가 발생하면 앱이 DataRequest 개체를 받습니다. 이 개체에는 사용자가 공유하려는 콘텐츠를 제공하는 데 사용할 수 있는 DataPackage가 포함되어 있습니다.

var request = e.request;

단계 4: 제목 및 설명 속성 설정

request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";

단계 5: DataPackage에 파일 추가

DataPackage에 파일을 추가하려면 setStorageItems 메서드를 사용합니다.

request.data.setStorageItems([imageFile]);

설명

기본적으로 setStorageItems는 대상 앱과 공유하기 위해 storageItems의 읽기 전용 "클론"을 제공합니다. setStorageItems를 호출한 후에는 각 저장소 항목에서 설정한 새 속성이 복제된 항목에 반영되지 않습니다. 따라서 DataPackage에 파일을 추가하기 전에 파일을 공유할 준비가 되었는지 확인해야 합니다.

또한 대상 앱이 storageItems에서 읽기/쓰기 접근 권한 값을 갖도록 하려면 읽기 전용 또는 읽기/쓰기를 지정할 수 있는 setStorageItems 메서드의 오버로드 버전을 사용합니다. 예를 들어 대상에 붙여넣을 때 삭제 작업을 수행하도록 요청하는 원본 앱은 대상이 원본 파일을 복사한 후에 삭제할 수 있도록 읽기/쓰기를 지정합니다.

앱에서 비동기 작업을 사용하여 이미지 또는 미리 보기를 준비해야 하는 경우 지연 패턴을 사용해야 합니다. 이 작업을 수행하는 방법은 datarequested 처리기에서 비동기 호출을 하는 방법을 참조하세요.

앱이 파일을 준비하는 데 시간이 오래 걸리면(200밀리초 이상) 대리자 함수를 사용하여 파일을 공유해야 합니다. 이 작업을 수행하는 방법은 끌어오기 작업을 지원하는 방법을 참조하세요. 대리자 함수를 사용하려면 파일을 추가하기 전에 DataPackage에 대한 FileTypes 속성을 설정해야 합니다.

전체 예제

다음은 사용자에 대해 공유할 파일을 설정하는 함수의 예를 보여 줍니다. 자세한 예를 보려면 코드 갤러리 샘플(영문)을 참조하세요.

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function shareStorageItemsHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share StorageItems Example";
    request.data.properties.description = "Demonstrates how to share files.";
    request.data.setStorageItems([imageFile]);
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register it as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);
            // Setup the button handler to pick image file
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

관련 항목

콘텐츠 공유 원본 앱 샘플

데이터 공유 및 교환

HTML을 공유하는 방법

링크를 공유하는 방법

텍스트를 공유하는 방법

빠른 시작: 콘텐츠 공유

DataPackage

Windows.ApplicationModel.DataTransfer

Windows.ApplicationModel.DataTransfer.Share