ngx-uploader icon indicating copy to clipboard operation
ngx-uploader copied to clipboard

Upload file as body. Azure blob storage SAS

Open vovikdrg opened this issue 6 years ago • 1 comments

I need to do upload to blob storage directly, so I have code

onUploadOutput(output: UploadOutput): void {
    if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { // add file to array when added
      console.log(output);
      this.photoService.getBlobToken(this.type, this.id, 'photos', output.file.name)
        .safeSubscribe(this, (resp) => {
          const event: UploadInput = {
            type: 'uploadFile',
            url: resp.UploadTo,
            method: 'PUT',
            file: output.file,
            headers: {
              'x-ms-blob-type': 'BlockBlob',
              'Content-Type': 'application/json;charset=utf-8',
              'x-ms-blob-content-type': output.file.nativeFile.type
            }
          };

          this.uploadInput.emit(event);
        })

    } else if (output.type === 'dragOver') {
      this.dragOver = true;
    } else if (output.type === 'dragOut') {
      this.dragOver = false;
    } else if (output.type === 'drop') {
      this.dragOver = false;
    } else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
      alert('Invalid file type')
    }
  }

But here is a problem that Azure will store whole body which WebKitFormBoundary so then image become invalid.

I can make pull request by adding property to UploadInput as uploadAsBlob also data will go as GET parameters.

vovikdrg avatar Jun 11 '18 11:06 vovikdrg

hi. please do so and add documentation to readme.

jkuri avatar Jun 11 '18 11:06 jkuri