2017-12-23 1 views
1

Azure Blob 저장소에 파일을 업로드하기 위해 React 앱에 FineUploader React 라이브러리를 구현하려고합니다.FineUploader 잘못된 Azure Blob 저장 URI

어떤 이유로 든 FineUploader에서 BLOB 저장소 URI가 잘못 표시됩니다.

import React, { Component } from 'react'; 

import FineUploaderAzure from 'fine-uploader-wrappers/azure' 
import Gallery from './gallery/index'; 

const uploader = new FineUploaderAzure({ 
    options: { 
     cors: { 
      expected: true, 
      sendCredentials: true 
     }, 
     signature: { 
      endpoint: 'https://myapp.com/api/getsas' 
     }, 
     request: { 
      endpoint: 'https://myaccount.blob.core.windows.net/test-container' 
     }, 
     uploadSuccess: { 
      endpoint: 'https://myapp.com/api/done' 
     } 
    } 
}) 

class Index extends Component { 
    render() { 
     return (
      <Gallery uploader={uploader} /> 
     ) 
    } 
} 

export default Index; 

가 여기에 콘솔에서보고 있어요 오류입니다 : 내 테스트 구성 요소에 FineUploader을 실체화하는 방법

이입니다. FineUploader가 BLOB 저장소에 잘못된 URI를 사용하고있는 것 같습니다. enter image description here

어떤 원인 일 수 있습니까?

업데이트 :이 옵션 섹션에서 containerUrlendpoint을 변경하지만 그 중 도움을 보이지 않았다 , GauravMantri의 제안 @를 당으로. 내가 보내고있다 요청은 다음과 같습니다 : 나는 우편 배달을 통해 요청을 보낼 때 여기에 내가지고있어 SAS의

const uploader = new FineUploaderAzure({ 
    options: { 
     cors: { 
      expected: true, 
      sendCredentials: true 
     }, 
     signature: { 
      endpoint: 'https://myapp.com/api/getsas' 
     }, 
     request: { 
      containerUrl: 'https://myaccount.blob.core.windows.net/test-container' 
     }, 
     uploadSuccess: { 
      endpoint: 'https://myapp.com/api/done' 
     } 
    } 
}) 

: 여기처럼 보이는 무엇

http://example.com/api/files/get/sas?blobUri=https://myaccount.blob.core.windows.net/test-container/test.txt&_method=put 

그리고 여기에 내가받은 SAS의 :

"?sv=2017-04-17&sr=b&sig=7pXTnI2r8uGyZms12T9cRvHg1XlLI53ZJtwPUwGElnY%3D&st=2017-12-28T14%3A02%3A56Z&se=2017-12-28T14%3A22%3A56Z&sp=w" 
+0

몇 가지 : 1) 여기 요청 옵션을 볼 때 : https://docs.fineuploader.com/quickstart/02-setting_options-azure.html,'request'의 매개 변수 이름은'endpoint'입니다 만, 여기를보십시오 : https://docs.fineuploader.com/api/options-azure.html#request-option, 매개 변수 이름은'containerUrl'입니다. 이 문제의 원인인지 확실하지 않습니다. 2) 귀하의 서비스에서 반환 된 SAS를 공유 할 수 있습니까? (명백히 계정 이름 및 기타 세부 사항을 모호하게 만듭니다.) –

+0

@GauravMantri 최근 답변에 죄송합니다. 나는 매개 변수를'containerUrl'로 변경하려고했지만 도움이되지 않았다.내'options' 섹션의 모습을 보여주기 위해 원래 게시물을 업데이트했습니다. 백엔드에서받은 'SAS'도 게시했습니다. 도와 줘서 고마워. – Sam

+0

Sam : 걱정 마세요. 1) 어떤 이유로 SAS 토큰은'% 22 '로 이스케이프 된 큰 따옴표 (''')를 포함하고 있습니다 .2)'test.txt'라는 이름의 파일에 대해 SAS를 생성하더라도 그 이름은 업로드 요청에 포함되지 않습니다 (Chrome 오류 스크린 샷) –

답변

1

나는 그것을 만들 수있었습니다. 당신의 FineUploader 설정에서

  1. , 당신은 endpoint 속성을 필요로하고 그 업로드 할 블롭 컨테이너의 URL이 있어야합니다 기본적으로 하나 명심해야 할 몇 가지가있어. 이 구성은 내 코드에서와 같은 모습입니다 :

    var uploader = new qq.azure.FineUploader({ 
        debug: true, 
        element: document.getElementById("uploader"), 
        cors: { 
         expected: true, 
         sendCredentials: false 
        }, 
        signature: { 
         endpoint: 'http://localhost:63194/users/sas' 
        }, 
        request: { 
         endpoint: 'https://account-name.blob.core.windows.net/container-name' 
        }, 
    
    }) 
    
  2. 공유 액세스 서명 (SAS)를 얻기위한 API가 blob URL + SAS Token를 반환해야합니다. API에 대한 blobUrl 매개 변수는 BLOB의 절대 URL이어야합니다. 이것은 (아래 코드는 고려 사항으로 _method 매개 변수를 사용하지 않기 때문입니다로 사용하지 마십시오) 내가 API에 사용되는 코드입니다 :

    [Route("sas")] 
    [HttpGet] 
    public async Task<HttpResponseMessage> Sas(string blobUri) 
    { 
        var credentials = new StorageCredentials("account-name", "account-key"); 
        var blob = new CloudBlockBlob(new Uri(blobUri), credentials); 
        var sasParameters = new SharedAccessBlobPolicy() 
        { 
         SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1), 
         Permissions = SharedAccessBlobPermissions.Write 
        }; 
        var sasToken = blob.GetSharedAccessSignature(sasParameters); 
        var returnValue = blob.Uri.AbsoluteUri + sasToken; 
        var resp = new HttpResponseMessage(HttpStatusCode.OK); 
        resp.Content = new StringContent(returnValue, System.Text.Encoding.UTF8, "text/plain"); 
        return resp; 
    } 
    

내가 여기에서 정밀 업 로더 푸른 관련 파일 다운로드 : https://fineuploader.com/customize.html 그리고 간단한 HTML 페이지를 만들어 테스트 해 보았습니다. 내 HTML 페이지의 모습은 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="fine-uploader-gallery.min.css" rel="stylesheet"> 
    <script src="azure.fine-uploader.min.js""></script> 
    <script type="text/template" id="qq-template"> 
     <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here"> 
      <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> 
       <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> 
      </div> 
      <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> 
       <span class="qq-upload-drop-area-text-selector"></span> 
      </div> 
      <div class="qq-upload-button-selector qq-upload-button"> 
       <div>Upload a file</div> 
      </div> 
      <span class="qq-drop-processing-selector qq-drop-processing"> 
       <span>Processing dropped files...</span> 
       <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> 
      </span> 
      <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals"> 
       <li> 
        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> 
        <div class="qq-progress-bar-container-selector qq-progress-bar-container"> 
         <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> 
        </div> 
        <span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
        <div class="qq-thumbnail-wrapper"> 
         <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale> 
        </div> 
        <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button> 
        <button type="button" class="qq-upload-retry-selector qq-upload-retry"> 
         <span class="qq-btn qq-retry-icon" aria-label="Retry"></span> 
         Retry 
        </button> 

        <div class="qq-file-info"> 
         <div class="qq-file-name"> 
          <span class="qq-upload-file-selector qq-upload-file"></span> 
          <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span> 
         </div> 
         <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> 
         <span class="qq-upload-size-selector qq-upload-size"></span> 
         <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete"> 
          <span class="qq-btn qq-delete-icon" aria-label="Delete"></span> 
         </button> 
         <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause"> 
          <span class="qq-btn qq-pause-icon" aria-label="Pause"></span> 
         </button> 
         <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue"> 
          <span class="qq-btn qq-continue-icon" aria-label="Continue"></span> 
         </button> 
        </div> 
       </li> 
      </ul> 

      <dialog class="qq-alert-dialog-selector"> 
       <div class="qq-dialog-message-selector"></div> 
       <div class="qq-dialog-buttons"> 
        <button type="button" class="qq-cancel-button-selector">Close</button> 
       </div> 
      </dialog> 

      <dialog class="qq-confirm-dialog-selector"> 
       <div class="qq-dialog-message-selector"></div> 
       <div class="qq-dialog-buttons"> 
        <button type="button" class="qq-cancel-button-selector">No</button> 
        <button type="button" class="qq-ok-button-selector">Yes</button> 
       </div> 
      </dialog> 

      <dialog class="qq-prompt-dialog-selector"> 
       <div class="qq-dialog-message-selector"></div> 
       <input type="text"> 
       <div class="qq-dialog-buttons"> 
        <button type="button" class="qq-cancel-button-selector">Cancel</button> 
        <button type="button" class="qq-ok-button-selector">Ok</button> 
       </div> 
      </dialog> 
     </div> 
    </script> 

    <title>Fine Uploader Gallery UI</title> 
</head> 
<body> 
    <div id="uploader"></div> 
    <script> 
     // Some options to pass to the uploader are discussed on the next page 
     var uploader = new qq.azure.FineUploader({ 
      debug: true, 
      element: document.getElementById("uploader"), 
      cors: { 
       expected: true, 
       sendCredentials: false 
      }, 
      signature: { 
       endpoint: 'http://localhost:63194/users/sas' 
      }, 
      request: { 
       endpoint: 'https://account-name.blob.core.windows.net/container-name' 
      }, 

     }) 
    </script> 
</body> 
</html> 

이 코드를 실행하면 문제없이 Blob 컨테이너에 파일을 업로드 할 수있었습니다.

+0

정말 고마워요! 이것은 작동 중입니다. 문제는 SAS 생성과 같았습니다. 충분히 고마워 할 수 없어! – Sam

+0

당신을 가장 환영합니다. 이 일을 처리하는 것은 꽤 재미있었습니다. –