FileUploader error while uploading images
I am using nopcommerce and I have added code to upload photos using file uploader, but I am getting this error:
Reason: XHR returned a 404 response code
@model ProductDetailsModel
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
Layout = "~/Views/Shared/_ColumnsOne.cshtml";
//title
Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
//meta
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);
//page class
Html.AppendPageCssClassParts("html-product-details-page");
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
//canonical URL
if (seoSettings.CanonicalUrlsEnabled)
{
var productUrl = Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme);
Html.AddCanonicalUrlParts(productUrl);
}
//open graph META tags
if (seoSettings.OpenGraphMetaTags)
{
Html.AddHeadCustomParts("<meta property=\"og:type\" content=\"product\" />");
Html.AddHeadCustomParts("<meta property=\"og:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
Html.AddHeadCustomParts("<meta property=\"og:description\" content=\"" + Html.Encode(Nop.Core.Html.HtmlHelper.StripTags(Model.MetaDescription)) + "\" />");
Html.AddHeadCustomParts("<meta property=\"og:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
Html.AddHeadCustomParts("<meta property=\"og:url\" content=\"" + Request.Url.AbsoluteUri + "\" />");
Html.AddHeadCustomParts("<meta property=\"og:site_name\" content=\"" + Html.Encode(Model.CurrentStoreName) + "\" />");
}
//Twitter META tags
if (seoSettings.TwitterMetaTags)
{
Html.AddHeadCustomParts("<meta property=\"twitter:card\" content=\"summary\" />");
Html.AddHeadCustomParts("<meta property=\"twitter:site\" content=\"" + Html.Encode(Model.CurrentStoreName) + "\" />");
Html.AddHeadCustomParts("<meta property=\"twitter:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
Html.AddHeadCustomParts("<meta property=\"twitter:description\" content=\"" + Html.Encode(Nop.Core.Html.HtmlHelper.StripTags(Model.MetaDescription)) + "\" />");
Html.AddHeadCustomParts("<meta property=\"twitter:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
Html.AddHeadCustomParts("<meta property=\"twitter:url\" content=\"" + Request.Url.AbsoluteUri + "\" />");
}
Html.AddCssFileParts("~/Scripts/fineuploader/fineuploader-4.2.2.min.css");
Html.AddScriptParts("~/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js");
<script type="text/template" id="qq-template-gallery">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
}
<!--product breadcrumb-->
@section Breadcrumb
{
@Html.Partial("_ProductBreadcrumb", Model.Breadcrumb)
}
@Html.Widget("productdetails_after_breadcrumb", Model.Id)
<div class="page product-details-page">
<div class="page-body">
@Html.Widget("productdetails_top", Model.Id)
@using (Html.BeginRouteForm("Product", new { SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
{
<div itemscope itemtype="http://schema.org/Product" data-productid="@Model.Id">
<div class="product-essential">
@Html.Widget("productdetails_before_pictures", Model.Id)
<!--product pictures-->
@Html.Partial("_ProductDetailsPictures", Model)
@Html.Widget("productdetails_after_pictures", Model.Id)
<div class="overview">
@Html.Partial("_Discontinued", Model)
<div class="product-name">
<h1 itemprop="name">
@Model.Name
</h1>
</div>
@if (!String.IsNullOrEmpty(Model.ShortDescription))
{
<div class="short-description">
@Html.Raw(Model.ShortDescription)
</div>
}
@Html.Widget("productdetails_overview_top", Model.Id)
<!--product reviews-->
@Html.Partial("_ProductReviewOverview", Model.ProductReviewOverview)
<!--manufacturers-->
@Html.Partial("_ProductManufacturers", Model.ProductManufacturers)
<!--availability-->
@Html.Partial("_Availability", Model)
<!--SKU, MAN, GTIN, vendor-->
@Html.Partial("_SKU_Man_GTIN_Ven", Model)
<!--delivery-->
@Html.Partial("_DeliveryInfo", Model)
<!--sample download-->
@Html.Partial("_DownloadSample", Model)
<!--attributes-->
@{
var dataDictAttributes = new ViewDataDictionary();
dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", Model.Id);
@Html.Partial("_ProductAttributes", Model.ProductAttributes, dataDictAttributes)
}
<!--gift card-->
@{
var dataDictGiftCard = new ViewDataDictionary();
dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = string.Format("giftcard_{0}", Model.Id);
@Html.Partial("_GiftCardInfo", Model.GiftCard, dataDictGiftCard)
}
<!--rental info-->
@{
var dataDictRental = new ViewDataDictionary();
dataDictRental.TemplateInfo.HtmlFieldPrefix = string.Format("rental_{0}", Model.Id);
@Html.Partial("_RentalInfo", Model, dataDictRental)
}
<!--price & add to cart-->
@{
var dataDictPrice = new ViewDataDictionary();
dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", Model.Id);
@Html.Partial("_ProductPrice", Model.ProductPrice, dataDictPrice)
@Html.Partial("_ProductTierPrices", Model.TierPrices)
var dataDictAddToCart = new ViewDataDictionary();
dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", Model.Id);
@Html.Partial("_AddToCart", Model.AddToCart, dataDictAddToCart)
}
<!--wishlist, compare, email a friend-->
<div class="overview-buttons">
@Html.Widget("productdetails_inside_overview_buttons_before", Model.Id)
@{
var dataDictAddToWishlist = new ViewDataDictionary();
dataDictAddToWishlist.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", Model.Id);
@Html.Partial("_AddToWishlist", Model.AddToCart, dataDictAddToWishlist)
}
@Html.Partial("_CompareProductsButton", Model)
@Html.Partial("_ProductEmailAFriendButton", Model)
@Html.Widget("productdetails_inside_overview_buttons_after", Model.Id)
</div>
@Html.Partial("_ShareButton", Model)
@Html.Widget("productdetails_overview_bottom", Model.Id)
</div>
@if (!String.IsNullOrEmpty(Model.FullDescription))
{
<div class="full-description" itemprop="description">
@Html.Raw(Model.FullDescription)
</div>
}
</div>
@Html.Widget("productdetails_before_collateral", Model.Id)
<div class="product-collateral">
@Html.Partial("_ProductSpecifications", Model.ProductSpecifications)
@Html.Partial("_ProductTags", Model.ProductTags)
</div>
@Html.Action("ProductsAlsoPurchased", "Product", new { productId = Model.Id })
@Html.Action("RelatedProducts", "Product", new { productId = Model.Id })
</div>
}
@Html.Widget("productdetails_bottom", Model.Id)
@Html.Partial("Picture")
<div id="fine-uploader-gallery"></div>
<script>
var galleryUploader = new qq.FineUploader({
element: document.getElementById("fine-uploader-gallery"),
template: 'qq-template-gallery',
request: {
endpoint: '/server/uploads'
},
thumbnails: {
placeholders: {
waitingPath: '/source/placeholders/waiting-generic.png',
notAvailablePath: '/source/placeholders/not_available-generic.png'
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
},
callbacks: {
onError: function (id, name, errorReason, xhrOrXdr) {
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
}
},
cors: {
//all requests are expected to be cross-domain requests
expected: false,
//if you want cookies to be sent along with the request
sendCredentials: false
},
xhrFields: {
withCredentials: true
}
});
</script>
</div>
</div>
+3
source to share
1 answer
Known issue with nopCommerce regarding this. If your application is running under the IIS Virtual Directory, Tiny MCE will most likely fail to find your image.
Edit the following file:
\ Administration \ Views \ Shared \ EditorTemplates \ RichEditor.cshtml
Uncomment the lines:
//allowJbimages = true;
//allowRoxyFileman = false;
To:
allowJbimages = true;
allowRoxyFileman = false;
Literature: [1] https://github.com/nopSolutions/nopCommerce/issues/142 [2] https://www.nopcommerce.com/boards/t/35370/virtual-directory-not-included-in-the -images-urls.aspx
+3
source to share