Question

I have MVC3 project & Valums file uploader.

The code is following

<script type="text/jscript">
   var uploader = new qq.FileUploader({
   element: document.getElementById('file-uploader'),
   action: '@Url.Action("UploadFile")',
   allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
   sizeLimit: 2147483647,
   onComplete: function (id, fileName, responseJSON) {
           var uploadedFile = "/Images/Orders/thumb-" + responseJSON.uploadedFile;
           $("#uploadedImage").attr("src", uploadedFile);
           $("#ImageErrorMessage").text("");
           alert("Your file has been uploaded.");
      }
  });                                 
</script>

So locally when the uploading is done I can see the thumbnail image so jQuery
works great.

But on LIVE website it doesn’t show the thumbnail image at all. (But I see the alert message anyway and thumbnail image is created I checked it.)

The size of the thumbnail is around 30 Kb.

So it should be but it doesn’t.

Any clue? Thank you!

Answer 1

You have a hardcoded url:

var uploadedFile = "/Images/Orders/thumb-" + responseJSON.uploadedFile;

That’s something you should never do in an ASP.NET MVC application. You should always use url helpers when dealing with urls. The reason for that is because when you deploy your application in IIS, there’s a virtual directory name that you must put in front of your urls. So the correct address is now:

var uploadedFile = "/MyAppName/Images/Orders/thumb-" + responseJSON.uploadedFile;

Obviously having the two separate versions one for development and one for production is unacceptable. That’s why you should use url helpers.

So:

var uploadedFile = '@Url.Content("~/images/orders/thumb-")' + responseJSON.uploadedFile;

or if this is in a separate javascript file in which you cannot use server side helpers, you could declare the base url as a global javascript variable in your view and then reuse it here.