how can i implement file uploading and deleting functionality in nopcomerce(cart view)

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin

Hi,

Add front side Path like this.

@Html.EditorFor(model => model.PictureId, "../../Views/Shared/Picture")

And remove admin path from endpoint in Picture.cshtml and add your front side controller name and action name.

Let me know the result.

Thanks,
Jatin

Hi,

Add front side Path like this.

@Html.EditorFor(model => model.PictureId, "../../Views/Shared/Picture")

And remove admin path from endpoint in Picture.cshtml and add your front side controller name and action name.

Let me know the result.

Thanks,
Jatin

Hi,

Add front side Path like this.

@Html.EditorFor(model => model.PictureId, "../../Views/Shared/Picture")

And remove admin path from endpoint in Picture.cshtml and add your front side controller name and action name.

Let me know the result.

Thanks,
Jatin

Hi,

Add front side Path like this.

@Html.EditorFor(model => model.PictureId, "../../Views/Shared/Picture")

And remove admin path from endpoint in Picture.cshtml and add your front side controller name and action name.

Let me know the result.

Thanks,
Jatin



how to use BaseAdminController in nopcomerce

Hello,

This is the code for remove picture. Make sure its available in \Presentation\Nop.Web\Administration\Views\Shared\Picture.cshtml file.

 <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
            }
        </div>

<script type="text/javascript">
    $(document).ready(function() {
$("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });

</script>

Also i need to uplod all type of files(pdf,word etc).
For that you need to customize in then AsyncUpload() of PictureController


Also i need explanation how  [UIHint("Picture")] is actually works,
UIHint is nothing but Attribute And its reference from System.ComponentModel.DataAnnotations

How it redirects to AsyncUpload() action of PictureController
For this you can find below code in Picture.cshtml

 $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

Let me know if you have any question or query.

Thanks,
Jatin


how does nopcomerce uses "~/Admin/Picture/AsyncUpload" in  

endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'

 public class AdminAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "Admin";
            }
        }

        public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Admin_default",
                "Admin/{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", area = "Admin", id = "" },
                new[] { "Nop.Admin.Controllers" }
            );
        }
    }