upload image to azure blob and display in src tag

upload image to azure blob and display in src tag

I'm trying to create a simple rest api for images
I'm posting from the client using js formdata and jquery ajax
to an asp.net ApiController
that is uploading to azure blob storage
whenever I try to retrieve one of the images that I uploaded, I get one of
those 'no image' icons
you can see it here:
http://listr.blob.core.windows.net/images/42zrkyxd.k3y.jpg
I also try to use it in a src tag to no avail
I uploaded an image through visual studio and that is getting retrieved
properly so I think it has to be the upload code.
The blobs look the same when looking at them on the azure portal as far as
blob properties go.
api and client code below:
help! and thanks in advance
[System.Web.Http.HttpPost]
[ActionName("Images")]
public HttpResponseMessage Images(int id)
{
if (!Request.Content.IsMimeMultipartContent("form-data"))
{
throw new
HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
CloudStorageAccount storageAccount =
CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("CloudStorageConnectionString"));
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container =
blobClient.GetContainerReference("images");
container.CreateIfNotExists();
var permissions = container.GetPermissions();
if (permissions.PublicAccess == BlobContainerPublicAccessType.Off)
{
permissions.PublicAccess = BlobContainerPublicAccessType.Blob;
container.SetPermissions(permissions);
}
var task = Request.Content.ReadAsStreamAsync();
task.Wait();
Stream stream = task.Result;
string randomBlobName = string.Format(Path.GetRandomFileName() +
".jpg");
CloudBlockBlob blob =
container.GetBlockBlobReference(randomBlobName);
blob.Properties.ContentType = "image/jpeg";
blob.UploadFromStream(stream);
return new HttpResponseMessage(HttpStatusCode.Created);
}
Client code here
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as
thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="',
e.target.result,
'" title="',
escape(theFile.name),
'"/>'].join('');
document.getElementById('list').insertBefore(span,
null);
var data = new FormData();
data.append('image', e.target.result);
if (FormData) {
$.ajax({
url: "api/posts/3/images",
type: "POST",
data: data,
processData: false,
contentType: false,
success: function (res) {
console.dir(res);
}
});
}
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
</script>
thanks