Search code examples
angularjsazureazure-blob-storageng-file-upload

Azure blob put - image corrupt


I'm trying to use the azure storage blob to put an item on it. It works fine with PDF, MP3 but, when I upload an IMAGE file (or TXT file) the file has changed.

When I download the pdf or the mp3, the file is readable. But for the image, it says that it's corrupt ... However the TXT file is readable but the content is surrounded by the webkitfromboundary

I thinks this is the reason why image don't work...

Exemple :

TXT file with hello word only ->

------WebKitFormBoundary3rxc8zHbnz4expeP
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain

hello word
------WebKitFormBoundary3rxc8zHbnz4expeP--

So I guess this is the reason why images don't work


so this is my upload (from angularJS) --- I Use https://github.com/danialfarid/ng-file-upload

Upload.upload
  url: url
  method: 'PUT'
  headers: head
  file: file
  .success (data, status, headers, config) ->
    console.log("SUCCES!!!")

value of head - ( for an text file)

{"x-ms-version":"2014-02-14","x-ms-blob-type":"BlockBlob","x-ms-date":"2015-11-06 10:02:24 GMT","Authorization":"SharedKey generate_key","Content-Type":"text/plain"}

ofcourse, the content-type change when this is an image (it takes file.type )


If it can help, this is the request headers from the network page ->

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:fr,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:214
Content-Type:application/json;charset=utf-8
Host:myaccount.blob.core.windows.net
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36

and the request payload ->

------WebKitFormBoundary3rxc8zHbnz4expeP
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain


------WebKitFormBoundary3rxc8zHbnz4expeP--

So, anyone has an idea ?


Solution

  • The anwser was that the Content-Type sent in the http request was never the good type.

    It's because

    Upload.upload
    

    doesn't allow you to change it.

    BUT you can use the http method of the same library, and it'll work like that :

      Upload.http
        url: uploadInfo.url
        method: 'PUT'
        headers: {
        "Content-Type": file.type
        [other headers ...]
      }
      data: file
    

    and there you go ! it works !