surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
898 stars 373 forks source link

Image Picker - Enhance UI to help users implement a Video Picker question #5378

Closed JaneSjs closed 5 months ago

JaneSjs commented 6 months ago

Image Picker doesn't visualize videos. Please update the Choices property grid category. image

{
 "title": "'Asking' is a powerful tool—as long as it remains in your hands",
 "description": "Built to empower enterprises to choose full integration and security",
 "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
 "logoWidth": 200,
 "logoHeight": 80,
 "logoFit": "cover",
 "logoPosition": "right",
 "pages": [
  {
   "name": "all",
   "elements": [
    {
     "type": "panel",
     "name": "panel2",
     "elements": [
      {
       "type": "image",
       "name": "surveyJS-integration-tutorial",
       "imageLink": "https://youtu.be/RAXo6pzOczQ",
       "contentMode": "youtube",
       "imageHeight": 450,
       "imageWidth": 800
      }
     ],
     "description": "Refer to the following YouTube video to learn how to embed surveys and forms in your JavaScript application in minutes."
    },
    {
     "type": "imagepicker",
     "name": "question1",
     "choices": [
      {
       "value": "Image 1",
       "imageLink": "https://youtu.be/RAXo6pzOczQ"
      },
      {
       "value": "Image 2",
       "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
      },
      {
       "value": "Image 3",
       "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
      },
      {
       "value": "Image 4",
       "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
      }
     ],
     "imageFit": "cover"
    }
   ],
   "title": "Full integration is simple"
  }
 ],
 "showNavigationButtons": "none",
 "widthMode": "static",
 "width": 900
}
JaneSjs commented 6 months ago

The uploaded video doesn't appear in an Image Picker: https://plnkr.co/edit/M46XLx6FrFjkfLHM

Image

JaneSjs commented 6 months ago

Image

By default, an image picker allows users to create image items. To implement a video selector, switch the Image Picker's Content Type to Video.

Image

ElenaGorbatkova commented 5 months ago

@RomanTsukanov Please update the helper text for the Content mode property of the Image picker (under General). The Auto option exists in Image question only. Current version: image

Choose between "Image" and "Video" to set the content mode of the media selector. If "Image" is selected, ensure that all options provided are image files. Similarly, if "Video" is selected, ensure that all options are direct links to video files. Please note that YouTube links are not supported for video options. If you wish to use YouTube links, consider using the Image question instead.

ElenaGorbatkova commented 5 months ago

@RomanTsukanov For the Image question, please add the following helper text to the Image or Video file URL property: image A free survey can accept up to 64KB of files in total. If you wish to have an unlimited total size for all uploaded files, including images and videos, we recommend self-hosting Survey Creator.

ElenaGorbatkova commented 5 months ago

@RomanTsukanov For the Image picker question, please add the following helper text to the Image or Video file URL option property:

image

A free survey can accept up to 64KB of files in total. If you wish to have an unlimited total size for all uploaded files, including images and videos, we recommend self-hosting Survey Creator.