Show image using jquery in mvc

CodeWhizFaisal answered on July 12, 2023 Popularity 2/10 Helpfulness 1/10

answer Show image using jquery in mvc

Show image using jquery in mvc

Comment

var file = Request.Form.Files.FirstOrDefault();
var LogoUrl = _webHostEnvironment.UploadFile(file);

        /// <summary>
        /// Get absolute file path by passing file and upload file path
        /// </summary>
        /// <param name="file">IFormFile from Form</param>
        /// <param name="uploadPath">upload path must be start with / </param>
        /// <returns></returns>
        public static string UploadFile(this IWebHostEnvironment _webHostEnvironment, IFormFile? file, string uploadPath= "/AdminTemplate/Images/")
        {
            if (file == null || uploadPath == null)
                return string.Empty;
            if (uploadPath.Length > 0 && uploadPath[0] != '/')
                throw new ArgumentException("file path must start wit /");

            try
            {
                var fileName = DateTime.Now.ToString("hhmmss") + file.FileName;
                var imgDirectory = Path.Combine(_webHostEnvironment.WebRootPath, uploadPath[1..].Replace("/", "\\"));

                if (!Directory.Exists(imgDirectory))
                    Directory.CreateDirectory(imgDirectory);
                var filePath = Path.Combine(imgDirectory, fileName);
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
                var absoluteFilePath = uploadPath + fileName;
                return absoluteFilePath;
            }
            catch (Exception)
            {
                throw;
            }
        }
    

//Html Start                    
<div class="d-flex align-items-start align-items-sm-center gap-4">
                        <img src="../assets/img/avatars/1.png"
                             alt="user-avatar"
                             class="d-block rounded"
                             height="100"
                             width="100"
                             id="uploadedAvatar" />
                        <div class="button-wrapper">
                            <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                <span class="d-none d-sm-block">Upload new photo</span>
                                <i class="bx bx-upload d-block d-sm-none"></i>
                                <input type="file"
                                       id="upload"
                                       class="account-file-input"
                                       hidden
                                       accept="image/png, image/jpeg" />
                            </label>
                            <button type="button" class="btn btn-outline-secondary account-image-reset mb-4">
                                <i class="bx bx-reset d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">Reset</span>
                            </button>

                            <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p>
                        </div>
</div>

//Html END
//Js start
document.addEventListener('DOMContentLoaded', function (e) {
  (function () {
    // Update/reset user image of account page
    let accountUserImage = document.getElementById('uploadedAvatar');
    const fileInput = document.querySelector('.account-file-input'),
      resetFileInput = document.querySelector('.account-image-reset');

    if (accountUserImage) {
      const resetImage = accountUserImage.src;
      fileInput.onchange = () => {
        if (fileInput.files[0]) {
          accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
        }
      };
      resetFileInput.onclick = () => {
        fileInput.value = '';
        accountUserImage.src = resetImage;
      };
    }
  })();
});
//Js END

Popularity 2/10 Helpfulness 1/10 Language csharp

Source: Grepper

Tags: c# image jquery show using

Link to this answer
Share Copy Link

Contributed on Jul 12 2023

CodeWhizFaisal

0 Answers Avg Quality 2/10

Show image using jquery in mvc

Contents

More Related Answers

Show image using jquery in mvc

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.