I'm trying to create a survey question that has the possibility to upload multimedia be it an image or a video, however it should only be one image or video, not one of each. The columns are called image and video respectively, can this be done in the request or on the vue.js front end, I don't mind either solution.
What would be the best way to do this?
This is the SurveyQuestion Request I have right now
public function rules()
{
return [
'question' => 'required',
'survey_section_id' => 'required|exists:survey_sections,id',
'response_type_id' => 'required|exists:response_types,id',
'optional' => 'required',
];
}
I would have one input on the frontend and then validate on the back...
On the frontend:
<input type="file" name="file" accept="image/*,video/*">
On the backend:
public function rules()
{
return [
// ... other validation rules
'file' => 'file'
];
}
You might want to add mimetype validation on the backend too to confirm it's a video/image
@kylemilloy I have them separate in the request and database because I do a preview of each before sending, and each type (img or video) are treated differently when showing the question in the survey, If I did put them together how would I differentiate which file it is in order to show the correct thing?
Sounds like a bit of a UX problem as well. I would recommend that you don't wanna provide two different inputs for a user to fill if you only are going to use one. I'd rely instead on having a radio toggle allow the user to decide if they want a video or image and then you can present your view differently based on that. If you're using Vue it'd be something like:
<input type="radio" v-model="isImage" value="1">
<input type="radio" v-model="isImage" value="0">
<div v-if="isImage">
<!-- show user instructions for uploading an image -->
</div>
<div v-else>
<!-- show user instructions for uploading a video -->
</div>
<input :allow="allow" type="file" name="file">
data() {
return {
isImage: 1
}
},
computed: {
allow() {
return isImage ? 'image/*' : 'video/*'
}
}
The added benefits of only accepting one file at the front-end is that there's less load time for the form submission as well.
@kylemilloy oh that is a great idea! I'll use a toggle to add that functionality!
Please or to participate in this conversation.