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

To implement file uploading functionality

1.I have added following code in OrderSummary.cshtml

<div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                @T("Admin.Catalog.Products.Pictures.AddNew")
                                                            </div>
                                                            <div class="panel-body">
                                                                <div class="form-group">

                                                                    <div class="col-md-3">
                                                                        @Html.NopLabelFor(model => model.PictureId)
                                                                    </div>

                                                                    <div class="col-md-9">

                                                                        @Html.NopEditorFor(model => model.PictureId)

                                                                        @Html.ValidationMessageFor(model => model.PictureId)

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>



2.then i have added following code in shoppingcartmodel.cs


   [UIHint("Picture")]
   [NopResourceDisplayName("Admin.Catalog.Products.Pictures.Fields.Picture")]
   public int PictureId { get; set; }




now i am able to see following pictore uploading controll in view




and able to upload the image to the Picure database table but i am not able to remove(delete) the image .can any one please explain me how to achive these functionality .also i need to uplod all type of files(pdf,word etc).

also i need explanation how  [UIHint("Picture")] is actually works,how it redirects to AsyncUpload() action of PictureController

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

rakshiraik wrote:

Please note: your process of picture uploading will not work who has no right Access Admin Panel. I mean guest or only register user can't able to upload file. You can make new picture uploading template for public store.

And also you can make delete functionality that will delete data from picture table too.

You can create Picture controller and Picture.cshtml file in nop.web project

forefront wrote:


why the [UIHint("Picture")] is actaully used is it responsible for createing file uploader view.if not how does the file uploder view is renderd based on just following code


<div class="form-group">
                    <div class="col-md-3">
                        @Html.NopLabelFor(model => model.AddPictureModel.PictureId)
                    </div>
                    <div class="col-md-9">

                        @Html.NopEditorFor(model => model.AddPictureModel.PictureId)
                        @Html.ValidationMessageFor(model => model.AddPictureModel.PictureId)
                    
                    </div>
                </div>

You can review DRY concept in internet.

File uploader we are using many places. So you have to write that 20-30 line of code all the time.

So they make it in one page picture.cshtml. And this page they using inside UIHint class for building file uploader.

Then we can create file upload control using UIHint. It means using only 1 line code.

Clear ?

Thanks,
Jatin

forefront wrote:


so to create picture upload in nop.web is the following step is enough

1.add picture.html in nop.web/views/shared/picture.html

2.adding following code in ordersummary.html

   <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                @T("Admin.Catalog.Products.Pictures.AddNew")
                                                            </div>
                                                            <div class="panel-body">
                                                                <div class="form-group">

                                                                    <div class="col-md-3">
                                                                        @Html.NopLabelFor(model => model.PictureId)
                                                                    </div>

                                                                    <div class="col-md-9">

                                                                        @Html.NopEditorFor(model => model.PictureId)

                                                                        @Html.ValidationMessageFor(model => model.PictureId)

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>



3.adding following model field in  shoppingcart\shoppingcartmodel.cs


        [UIHint("Picture")]
        [NopResourceDisplayName("Admin.Catalog.Products.Pictures.Fields.Picture")]
        public int PictureId { get; set; }

4.Adding new controller named picture and action AsyncUpload

5.set to the path AsyncUpload from picture.cshtml

is thees much of stem enough

how can i render nop.web/views/shared/picture.html insted nop.admin/views/shared/picture.html

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

how to use BaseAdminController in picturecontroller of nop.web