3

AWS S3 JS SDK を使用して、ブラウザから複数のファイルをアップロードしたいと考えています。1 つのファイルは問題なく取得できますが、複数のファイルを取得することはできません。複数のファイルを選択すると、最後のファイルだけがアップロードされます。コードは次のとおりです。

//head    
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.213.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

//body 
<input type="file" id="file-chooser" multiple />
<button id="upload-button">Upload to S3</button>
<div id="results"></div>
<script type="text/javascript">
AWS.config.region = 'us-east-1';

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: '###'
});

AWS.config.credentials.get(function(err) {
    if (err) alert(err);
    console.log(AWS.config.credentials);
});

var bucketName = 'c2networkingfiles'; // Enter your bucket name
var bucket = new AWS.S3({
    params: {
        Bucket: bucketName
    }
});

var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function() {
  var fileArr = fileChooser.files;
  if (fileArr[0]) {
    for (k=0; k<fileArr.length; k++) {
      var file = fileArr[k];
      var fileName = file.name;

      // test to see if file already exists
      var objKey2 = 'testing/' + file.name;
      var objE = new AWS.S3();
      var params2 = {
          Bucket: bucketName,
          Key: objKey2
      };
      objE.headObject(params2, function(err, data) {
        if (data) {
          results.innerHTML = 'File is present. Uploaded on ' + data.LastModified;
          //console.log(data);
        } else {
          //results.innerHTML = '';
          var objKey = 'testing/' + file.name;
          var params = {
              Key: objKey,
              ContentType: file.type,
              Body: file,
              ACL: 'public-read'
          };

          bucket.putObject(params, function(err, data) {
              if (err) {
                results.innerHTML = 'ERROR: ' + err;
              } else {
                //listObjs();
                results.append('SUCCESS! ' + fileName + ' uploaded. <br />');
              }
          });
        }
      });
    }
  } else {
      results.append('Nothing to upload.');
  }
}, false);
</script>

元のコード例にはループがありませんでした。ループが次のアップロードを開始する前に最初のファイルが完了するまで待機するメカニズムがないため、これが正しく機能していないかどうか疑問に思っています。

これが答えである場合、アップロードのステータスを確認し、最初のファイルが完了するまで待ってからループを続行する方法はありますか?

これが答えでない場合、他に何が起こっている可能性がありますか?

4

0 に答える 0