I'm using nopcommerce and I've added code for photo upload using file uploader but I'm getting this error:
Reason: XHR returned response code 404
@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> 1 Answers
Answers 1
There is a known issue with nopCommerce regarding this. If your app is running under IIS Virtual Directory, Tiny MCE is likely not able 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; References: [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
0 comments:
Post a Comment