Hi,
I would like to block the upload of file and only accept urls in the image and image picker question type.
is there an easy way to do that?
thank you very much
Camille
Image and image pick block upload
Answers approved by surveyjs Support
Hello Camille,
To disable the image upload option on a design surface, set the options.allowEdit
property to false
in the creator.onElementAllowOperations event.
Codecreator.onElementAllowOperations.add((sender, options) => {
if (
options.element.getType() === "imagepicker" ||
options.element.getType() === "image"
)
options.allowEdit = false;
});
An image upload button disappears for Image and Image Picker questions:
Please let me know if this option works for you.
Hi Jane,
I’m Claire, a colleague of Camille, and I’m also working on blocking image upload for image picker and image question types.
Thank you very much for your answers, they helped a lot ! (:
I’m still facing a small problem though : for the image question type, the upload icon is still present even though I set the allowEdit property of options to false per your recommendation.
Here, you’ll find a replication of our code : https://replit.com/@ClaireDeGiovann/SurveyJs-creator-disable-upload-images#src/creator.tsx.
Am I missing something ? Do I not set the property correctly for it to work ?
Thank you again for your very much appreciated help,
Have a nice day,
Claire.
Hello Claire,
Thank you for contacting me. You're always welcome.
Regarding the recent issue, I have reviewed your demo and it seems that the project is utilizing different versions of SurveyJS libraries. It is highly recommended to ensure consistency by using the same version of SurveyJS libraries throughout your application. Therefore, I suggest updating the SurveyJS packages to the latest version available.
JSON{
"name": "react-typescript",
"version": "1.0.0",
"type": "module",
"description": "React TypeScript on Replit, using Vite bundler",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"survey-core": "^1.9.93",
"survey-creator-core": "^1.9.93",
"survey-creator-react": "^1.9.93"
},
"devDependencies": {
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.7.4",
"typescript-language-server": "^0.11.2",
"vite": "^3.0.4"
}
}
After the update, the upload button doesn't appear:
The updated sample is available at https://replit.com/@JanetGaidukova/SurveyJs-creator-disable-upload-images?v=1.
Please let me know if you have any questions or require further assistance.
Hello Camille,
You may simply cancel a new image uploading using the
onUploadFile
event.creator.onUploadFile.add(function (_, options) { options.callback('error'); });
However, when an Image/Image question doesn't contain an image, the question displays an image upload button or an empty image placeholder.
Image Question
Image Picker Question
You may wish to hide unnecessary elements with CSS.
As an alternative, you can implement an Image/Image picker question descendant and override question rendering to hide the empty image placeholder/an image upload button. For more information on how to create custom questions, refer to the tutorial for your JavaScript platform:
Integrate Third-Party Angular Components / Integrate Third-Party React Components.
Let me know if you have further questions.