2010-11-19 5 views
4

사용자가 Amazon S3에 직접 파일을 업로드 할 수있는 HTML 5 AJAX 라이브러리/프레임 워크를 찾고 있습니다. 목표는 첨부 파일을 웹 서버에 업로드하는 것을 피하는 것입니다 (웹 서버가 Amazon으로 전송할 때 차단됨). 내 이해는 XDomainRequest을 사용하여 가능해야하지만, 방법을 알아낼 수 없습니다.HTML 5 Amazon S3 직접 업 로더

Ruby-on-rails를 실행 중이며 업로드 된 파일에 웹 서버에 다시 게시 될 임시 이름 (UUID 사용)을 할당하여 나중에 파일의 이름을 바꾸고 클립과 통합 할 수 있도록하려고했습니다.

아이디어가 있으십니까? jQuery가 처리 할 수있는 것이 있나요? Flash는이 프로젝트의 옵션이 아닙니다. 감사!

편집 :

나는 기본적인 포스트 작업을 얻을 수 있었다하지만 여전히 문제가 있어요. 나는 정확히 어떤 헤더가 필요한지, 요청에 Amazon 필수 매개 변수를 인코딩하는 방법을 모르겠습니다 (요청 헤더에 넣을 수 있습니까?).

const XMLHTTPFactories = [ 
    function() { return new XDomainRequest(); }, 
    function() { return new XMLHttpRequest(); }, 
    function() { return new ActiveXObject("Msxml2.XMLHTTP"); }, 
    function() { return new ActiveXObject("Msxml3.XMLHTTP"); }, 
    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }, 
]; 

var xhr = null; 

for (var i = 0; i < XMLHttpFactories.length; i++) { 
    try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; } 
} 

$(this).change(function() { 

    for (var i = 0; i < this.files.length; i++) { 
    var file = this.files[i]; 

    xhr.open(settings.method, settings.url, true); 
    xhr.setRequestHeader("Cache-Control", "no-cache"); 
    xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*") 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhr.setRequestHeader("X-File-Name", file.fileName); 
    xhr.setRequestHeader("X-File-Size", file.fileSize); 

    xhr.send(file); 
    } 

편집 : 여기에 지금까지 내 진행하다 나는 crossdomain.xml 파일을 업로드 한

XMLHttpRequest cannot load http://bucket.s3.amazonaws.com/ . Origin http://local.app is not allowed by Access-Control-Allow-Origin.

: 추가 업데이트 후

, 나는 다음과 같은 오류가 관리했습니다 와일드 카드 (*) 도메인에서 액세스 할 수 있습니다. 계속하는 방법을 잘하지 ...

편집 :

다 더 조사를 한 후, 나는 자바 스크립트 POST가 S3에 가능하지 않을 수도 있음을 생각하기 시작하고있다. 송금하기 전에 EC2 인스턴스에 게시해야합니까? 마이크로 인스턴스를 확보 할 수는 있지만 가능한 경우 S3로 직접 이동하는 것이 좋습니다! 감사!

편집 :

나는 아마존 포럼에 질문을 게시하고 피드백을받지 못했습니다. 상호 참조의 경우 다른 게시물은 여기에서 찾을 수 있습니다 : https://forums.aws.amazon.com/message.jspa?messageID=206650#206650.

답변

4

다른 쪽 문제는 an Access-Control-Allow-Origin header해야합니다. 다른 쪽은 Amazon S3 서버입니다. 헤더에 도메인을 언급하지 않으면 사이트에 대한 크로스 사이트 요청을 할 수 없습니다.

Amazon S3 now supports Cross Origin Resource Sharing 및 하나 이상의 CORS 규칙을 버킷에 추가하여 도메인 간 액세스를위한 S3 버킷을 구성 할 수 있습니다. 각 규칙은 버킷에 액세스 할 수있는 도메인과 허용 할 HTTP 동사 집합을 지정할 수 있습니다.

+0

답장을 보내 주셔서 감사합니다! Amazon S3에서 'Access-Control-Allow-Origin' 헤더를 설정할 수 있는지 알고 계십니까? –

+0

@Kevin 나는 이것을 연구 해왔다. Amazon S3는이 헤더를 버킷 * 또는 * 객체에 설정할 수 없습니다. 자세한 내용은이 [스레드] (https://forums.aws.amazon.com/message.jspa?messageID=160131)를 확인하십시오. 아마존은 응답의 부족에 따라 미래에이를 지원하는데 전혀 관심이없는 것으로 보인다. –

+0

@ Dan 감사. 나는 그 실에 실제로 '포스터'가 있었고 희망을 포기했습니다. –

1

이것은 자바 스크립트에서 S3 자격 증명을 노출해야한다는 것을 의미합니다. 너는 그걸 원하지 않아.

가장 좋은 해결책은 Paperclip을 사용하는 것입니다. 예, 서버에 먼저 업로드해야하지만 적어도 안전해야합니다.

의견을 확인하지 마십시오.

+2

아니요. Amazon은 만료 토큰과 함께 HMAC SHA-2 인코딩을 지원합니다. 정규 게시물 (http://doc.s3.amazonaws.com/proposals/post.html)을 통해 직접 업로드 할 수 있습니다. AJAX가 필요합니다. –

+1

굉장합니다. 그것에 대해 몰랐어요! – Ariejan

+0

그래, 아직도 내 버그 Ariejan을 고치는 방법을 모르겠다. 다른 사람 아시 겠죠? 위의 게시물을 참조하십시오! –

1

S3 호스팅 할 수있는 HTML 페이지 아무 문제가이 작업을 갖고있는 것 같다. 버킷이 서버 URL이됩니다. S3 Bucket Explorer와 같은 도구를 사용하면 한 번의 클릭으로 버킷의 HTML 페이지에 대한 URL을 얻을 수 있습니다.

그러면 XMLHttpRequest에서 PUT 명령을 사용하여 파일을 업로드 할 수 있습니다.

이것은 본질적으로 JQuery-HTML5-Upload 플러그인이 Amazon S3에서 작동하는 방식입니다 (문제 # 12 참조).

실제로 변수에 연결 한 다음 XMLHttpRequest open() 메소드와 함께 사용하여 Amazon S3 REST API 구문을 시험해 볼 수 있습니다.

다원의 평화.

1
아마존이 허용 간 리소스 공유 (CORS)에 대한 지원이 추가 마지막으로 한

:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource -sharing.html

4

오늘 Amazon은 Amazon S3에서 Cross-Origin Resource Sharing (CORS)에 대한 완벽한 지원을 발표했습니다. 이제 JavaScript 및 HTML5를 사용하는 웹 응용 프로그램을 작성하여 Amazon S3의 자원과 상호 작용할 수 있으므로 Amazon S3에 HTML5 드래그 앤 드롭 업로드를 구현하거나 업로드 진행 상황을 표시하거나 콘텐츠를 업데이트 할 수 있습니다.

0

s3_drect_upload라고하는 좋은 레일 보석이 있으며, 상자에서 원하는 것을 정확히 수행합니다. 파일 이름 바꾸기를 지원하는 html5/javascript 업 로더입니다.