locked
customize the dropzone.js to upload multiple Photos RRS feed

  • Question

  • User-1858220497 posted

    Hi

    I am using dropzone.js to upload multiple Photos by an ASP.Net webform.aspx. Everything is fine and I can save image file to server and its name to DB.

    My problem is that i want to enable user to add title for each photo easily:

    1-  I want to have a "add title" button for each photo;

    2-  A modal popup would be displayed after clicking on "add title" button;

    3-  Modal popup has a textbox for image title and a save button

    4-  User enters a title and click on "save title"

    5-  Immediately after "save title click" modal popup will be closed and image title would be updated;

    6-  User could see the title by "mouse over" on desired image

    7-  All steps are with Ajax and Jquery without any postback!

    Is it possible with dropzone.js?

    Here is a sample: http://my.niazerooz.com/advertisement/ad/create/ but I am not sure that they are using dropzone.js… of course its functionality is my concern

    Here are fields of Photogalery table :

     Photo_id            int           Unchecked

    FileName             varchar(50)         Unchecked

    FileTitle                nvarchar(50)      Checked

    Thank you for taking your time

    Monday, July 25, 2016 5:07 PM

Answers

  • User61956409 posted

    Hi koohbor323,

    koohbor323

    Here is a sample: http://my.niazerooz.com/advertisement/ad/create/ but I am not sure that they are using dropzone.js…

    I’m using F12 developer tools Network tool to search through the traffic I capture, and I find the website you provided is using dropzone.js.

    koohbor323

    My problem is that i want to enable user to add title for each photo easily:

    From the website you provided, we could find an image container with thumbnail and button will be displayed in web page

    if you’d like to enable user to add title for thumbnail from a modal popup by clicking button, you could read API documentation to define a custom previewTemplate.

    http://www.dropzonejs.com/#layout

    And then you could attach client-side click event to thumbnail container to show modal popup on click event. And you could find element for image title in previewTemplate and dynamically change text of this element based on user input title.

    Regarding modal popup, you could try to use Bootstrap modal plugin.

    http://www.w3schools.com/bootstrap/bootstrap_modal.asp

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 27, 2016 6:21 AM