1

I would like to upload images with .net core web api 2.1 and jquery in the post data to azure blobs with an id, then when retrieving the data, the image also is in the relevant table row (basically like a blog post).
Currently the way I upload and retrieve data to azure blobs is as follows:
web api:

[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class BlobController : Controller
{

    private CloudBlobClient cloudBlobClient;


    public BlobController(CloudBlobClient cloudBlobClient)
    {
        this.cloudBlobClient = cloudBlobClient;

    }

    [HttpPost()]
    public OkObjectResult upload([FromForm] IFormFile file)
    {
        string FileName = file.FileName;
        var blobfile = cloudBlobClient.GetContainerReference("container").GetBlockBlobReference(FileName);

        if (blobfile.Exists())
        {

        }
        else
        {
            var container = cloudBlobClient.GetContainerReference("container");
            var blob = container.GetBlockBlobReference(FileName);

            blob.UploadFromStream(file.OpenReadStream());



        }
        return Ok("uploaded");
    }

    [HttpGet()]

    public OkObjectResult GetAll()
    {

        var bloblist = new ArrayList();

        var container = cloudBlobClient.GetContainerReference("container");
        SharedAccessBlobPolicy ReadOnly = new SharedAccessBlobPolicy()
        {
            SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
            Permissions = SharedAccessBlobPermissions.Read
        };

        var sas = container.GetSharedAccessSignature(ReadOnly);

        foreach (var blob in container.ListBlobs())
        {
            bloblist.Add(blob.Uri + sas);
        }
        return Ok(bloblist);
    }

}


html/js for image upload and viewing:

 <div align="center">
    <form method="post" action="" enctype="multipart/form-data" id="myform">

        <div>
            <input type="file" id="file" name="file" />
            <input type="button" class="button" value="Upload"
                   id="but_upload">
        </div>
    </form>



    <div>
        <input type="button" id="but_display" value="show all uploaded images">

        <div id="stage">
        </div>

    </div>
</div>

@section Scripts {
    <script type="text/javascript">
    $("#but_upload").click(function () {
                var fd = new FormData();
                var files = $('#file')[0].files[0];
                fd.append('file', files);

                $.ajax({
                    url: 'https://localhost:44331/api/blob/',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response != 0) {
                            alert('file uploaded');
                        }
                        else {
                            alert('file not uploaded');
                        }
                    },
                });
            });

            $("#but_display").click(function () {
                $.ajax({
                    url: 'https://localhost:44331/api/blob/',
                    type: 'get',
                    success: function (response) {
                        $("#stage").empty();
                        response.forEach((url) => {

                            $("#stage").append("<img src='" + url + "' width='200' >");

                        })
                    }
                });

            });

</script>
}


Any help will be greatly appreciated.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dusk Hare
  • 55
  • 2
  • 8
  • 1
    Could you please tell me your error message? – Jim Xu Mar 05 '20 at 00:53
  • @JimXu there is no error message. As I have said above all i want to know is how to send and receive then display images from azure blobs with and id in the file name so that i can append it to a table row just like a blog. – Dusk Hare Mar 05 '20 at 05:21
  • Is that you want to know how to use rest api to get Azure blob name and url then show it in Html? – Jim Xu Mar 05 '20 at 05:54
  • @JimXu I want to show images from blob in corresponding table row after i upload it. In basic terms I want to post a blog entry that has a image and description and then see the posts in order using a table (just like a blog website). I have up to now been able to do the above functionalities but I cannot proceed further without help. – Dusk Hare Mar 05 '20 at 08:44
  • Is that you have gotten image url and description but you do not know how to merge them? – Jim Xu Mar 05 '20 at 08:56
  • @JimXu I want a way to make a blog (both admin and user side)using azure blobs.Right now i can display images and upload them. I also can post description and view in blog post list. All I want to know is how to add image to corresponding blog post when retrieving from blob. – Dusk Hare Mar 05 '20 at 09:58
  • Regarding the issue, I think you can create one subfolder for one post in the container. The subfolder's name is the post name. Then you retrieve the image from Aure blob with post name fro every post. For more details, please refer to https://stackoverflow.com/questions/2619007/microsoft-azure-how-to-create-sub-directory-in-a-blob-container – Jim Xu Mar 09 '20 at 01:24

0 Answers0